Install Beacon with Google Tag Manager: No Dev Required

Running a product tour on your website or application used to mean waiting on a developer to deploy an SDK. Not anymore. With Google Tag Manager (GTM), you can deploy Beacon, our no-code product tour builder, in about five minutes flat. You don't need to write a single line of code or open a pull request.

This is a superpower for product managers, marketing pros, and operations teams who need to move fast. GTM is designed for this kind of agility, letting you centralize your scripts and manage them visually. It's truly a secret weapon for getting things done without blocking engineering cycles. Let's get you set up.

## What You'll Need

Before we dive in, make sure you have two things ready:

1. **A Beacon Account:** If you don't have one, sign up for free at dobeacon.com/signup. You'll need to create a project to get your unique Project Key.
2. **Google Tag Manager Access:** You'll need admin or edit access to the GTM container associated with your website.

That's it. No special permissions for your website's codebase are needed. Just GTM access.

## Step 1: Grab Your Beacon Project Key

First, we need to get the unique identifier for your Beacon project. Think of this like a secret handshake that tells Beacon which tours to load for your site.

1. Log into your Beacon Dashboard at [dobeacon.com](https://dobeacon.com).
2. On the left sidebar, navigate to **Settings** > **Projects**.
3. Select the project you want to integrate with GTM. If you haven't created one yet, click "New Project" and give it a name that makes sense (e.g., "Production Website" or "Staging App").
4. You'll see your **Project Key** (it starts with `pk_live_` or `pk_test_`). Copy this to your clipboard. You'll need it in the next step.

Keep this key safe. It's how Beacon knows who you are.



## Step 2: Create a New Tag in Google Tag Manager

Now, let's head over to Google Tag Manager and tell it to load the Beacon SDK.

1. Log into your Google Tag Manager account.
2. Select the container for your website.
3. In the workspace overview, click **"New Tag"**.
4. Name your tag something clear, like `Beacon SDK`.

## Step 3: Configure the Custom HTML Tag

This is where we tell GTM to inject the Beacon SDK script into your page.

1. Click **"Tag Configuration"**.

2. Choose **"Custom HTML"** as the tag type. This is my go-to when I need to deploy any third-party script that isn't already a built-in GTM template. It's incredibly versatile.

3. Paste the following script into the HTML field. **Remember to replace** `YOUR_BEACON_PROJECT_KEY` **with the key you copied from the Beacon dashboard in Step 1.**

   ```html
   <script>
     !function(b,e,a,c,o,n){b.Beacon={q:[],_i:null,init:function(e){var c=this;this._i=e,this.q.forEach(function(e){c.push.apply(c,e.args)})},push:function(){var e=Array.prototype.slice.call(arguments);this._i?this.startTour.apply(this,e):this.q.push({args:e})},startTour:function(e){var c=document.createElement("script");c.async=!0,c.src="https://cdn.dobeacon.com/sdk/beacon.min.js",c.onload=function(){window.Beacon.init(b.Beacon._i),window.Beacon.startTour(e)},document.head.appendChild(c)}}(window,document,"script","beacon"),Beacon.init("YOUR_BEACON_PROJECT_KEY")
   </script>
   ```

   **A quick note on script placement:** While the Beacon SDK can be initialized with just the `Beacon.init()` call, the full script includes a clever loader that ensures the main `beacon.min.js` file is fetched and executed efficiently. This `!function(...)` wrapper handles the asynchronous loading for you, making sure Beacon is ready when you need it.

4. Leave "Support document.write" unchecked unless you have a specific, very old reason to enable it (you probably don't).

## Step 4: Set the Trigger

We want Beacon to load on *every* page of your website where tours might run.

1. Click **"Triggering"**.
2. Choose **"Initialization - All Pages"** (or "All Pages" if Initialization isn't an option in older GTM containers). This ensures the Beacon SDK loads as early as possible on every page view, making sure it's ready before any user interaction occurs.
3. Click **"Save"** in the top right corner.



## Step 5: Test and Publish Your GTM Container

This is the final, crucial step to make your changes live.

1. Before publishing, use GTM's **"Preview"** mode. Click the "Preview" button in the top right of your GTM dashboard. This will open your website in a new tab with the GTM debugger running.
2. On your website, check the GTM debugger pane (usually at the bottom of the page). You should see your `Beacon SDK` tag fire under the "Initialization" event.
3. Open your browser's developer tools (usually F12 or right-click -&gt; Inspect, then go to the "Network" tab).
4. Filter for `beacon.min.js`. You should see it loading successfully, typically with a 200 status code.
5. If you have a tour already published and set to trigger on a matching URL, try navigating to that page. You should see your Beacon tour appear!
6. Once you've confirmed everything is working as expected in preview mode, close the preview tab.
7. Back in GTM, click **"Submit"**.
8. Give your version a descriptive name (e.g., "Added Beacon SDK") and an optional description. Click **"Publish"**.

That's it. Beacon is now live on your site, ready to deliver interactive tours to your users.

## What's Next?

Now that the SDK is loaded, you can:

- **Build tours:** Head back to the Beacon dashboard or install the Chrome Extension to start creating your first tour. Since the SDK is live, any tours you publish will immediately appear on your site.
- **Identify users:** If you need to track user progress or personalize tours, use `Beacon.identify()` through GTM. You can pass user data from your data layer to Beacon by creating new data layer variables and then pushing them with a Custom HTML tag.
- **Start tours programmatically:** Use `Beacon.startTour(tourId)` if you want to trigger specific tours from custom buttons or events on your page.

Deploying Beacon through GTM is a powerful way to put product tours directly into the hands of the teams who need them, without waiting for developer resources. It's how modern web operations should work.

Ready to see it in action? Build your first tour for free at <https://dobeacon.com/signup>.