How to Integrate OptinMonster with Google Tag Manager

You can use Google Tag Manager to control where and when your optins load on your site. Follow our documentation to learn how to integrate OptinMonster with Google Tag Manager.


Basic Usage

You can use Google Tag Manager to easily manage loading your optin on all pages of your site. For more complex management of OptinMonster through Google Tag Manager see our Advanced Usage examples.

Step 1. Create a Google Tag Manager Account (optional)

If you don’t already have a Google Tag Manager Account you wish to use, you’ll need to create one.

Login to Google Tag Manager, if you don’t have any Accounts you’ll be prompted immediately to create one. If you have existing accounts and want to create a new one you can do so from either the Accounts or Admin pages.

In this example we’re starting without any previous Accounts so we’ll create a new Account once logged into Google Tag Manager. It’s as simple as giving the Account a name.

If you don't have an existing Account in Google Tag Manager you wish to use you'll need to create a new one.

Select the Continue button to proceed.

Step 2. Create a Container

Google Tag Manager will prompt you next to create a Container for your new Account. Enter the domain for your Container and select ‘Web’ as the place you want to use the Container.

You need to create a New Container in Google Tag Manager to add your Tag to if you don't have an existing Container you wish to use.

Select the Create button to proceed.

If you’re adding OptinMonster to an Account you’ve already created you can add a new Container through the Admin screen.

Step 3. Install Google Tag Manager Code

Next you’ll need to add the Google Tag Manager code snippet provided to your site, just after the opening tag.

Before you can use Google Tag Manager you need to install the code snippet provided by Google Tag Manager into your site.

Step 4. Create a Tag

From the Container > Tags screen, select New to create a new Tag.

Once you have an Account and Container in Google Tag Manager you can add a new Tag to integrate OptinMonster through.

Name your Tag and choose Custom HTML Tag from the available options.

Once you've named your new Tag, select the HTML Tag option to begin adding your optin's embed code.

You’ll need to grab the Embed Code for the optin you wish to manage through Google Tag Manager. From your OptinMonster Dashboard select the embed icon next to the optin you want to use.

Select the Embed Icon from the Dashboard view to begin embedding your optin.

On the Embed screen select the Sitewide Embed option to add a single embed code for all optins:

You can use the Sitewide Embed Code to use a single embed for all optins on your site.

Alternatively you can add individual embeds for each optin you create using the Campaign Specific Embed option:

You can embed your optins individually also, if you don't want to use a Sitewide Embed Code.

Once you’ve copied the embed code you wish to use, return to Google Tag Manager and paste the optin’s embed code into the HTML field.

Expand the Advanced Settings section and select the Tag firing option you wish to use. In this example we’ll fire the Tag once per page load.

Add your optin Embed Code for your HTML Tag and choose how often to load the Tag in the Advanced Settings.

Select the Continue button to proceed.

Step 5. Configure the Fire On Rules

You’ll need to specify the rules you want to fire the tag on.

IMPORTANT: If you’re using the Sitewide Embed you’ll want to configure the Tag to fire on all pages of your site and control where on your site the optin appears through the optin builder’s Display Rules options.

If you’re using Google Tag Manager to extend the functionality of the Display Rules options you’ll likely want to use the Campaign Specific Embed option and control where the Tag fires throughout your site in Google Tag Manager.

For this example we’ve selected All Pages.

You can choose the rules to fire your Tag on through Google Tag Manager.

Select the Create Tag button to proceed.

Step 6. Preview and Publish the Tag

Once you’ve created your Tag you can either Preview or Publish it. From the Container > Tags screen you can select either option from the Publish button’s dropdown menu.

You can preview and publish your new Tag to view your OptinMonster optin on the site.

When you Preview the Tag, Google Tag Manager will show you specific data related to the Tag when you view your site from the same browser. Here we’re Previewing a Fullscreen optin we’ve added to the site using Google Tag Manager.

You can preview your new Tag from the same browser you're logged into Google Tag Manager with before Publishing the Tag.

Once you’re done previewing, you’re ready to Publish your tag and you’ve successfully integrated OptinMonster with Google Tag Manager!


Advanced Usage


Load Optin on Specific Pages

Instead of loading your optin site-wide, you can control which pages it appears on using Google Tag Manager.

Step 1. Edit Your Tag

In Google Tag Manager navigate to Container > Tags and select the Tag you want to edit.

Navigate to Container then Tags to view all Tags associated with your Account in Google Tag Manager.

Step 2. Tag Firing Options

If you created your Tag following our Basic Usage steps your Tag will already be set to fire once per page in the Advanced Settings of your Tag Configuration options. You only need to fire the Tag once on page load when targeting specific pages.

Add your optin Embed Code for your HTML Tag and choose how often to load the Tag in the Advanced Settings.

Step 3. Fire On Settings

Next, select the Fire On section. If you setup your Tag following our Basic Usage steps you’ll want to remove the All Pages trigger first.

Select the Some Pages trigger from the available options.

Select the 'Some Pages' option in the Fire On section to configure the rules for firing your OptinMonster Tag.

Select the New button to add a new trigger.

You can Add triggers, or rules, to load your OptinMonster Tag with.

Give your trigger a name and configure it as desired to target the page you want to load your optin on. In this example I’m loading the optin only if the page URL ends with /blog/ to target my site’s blog page.

You can configure your trigger using a number of conditions to meet any need.

You can add as many triggers as you want for the same Tag.

When you’ve finished creating triggers, select the Save button to apply them to your Tag.

Step 4. Save Tag

Finally, save the changes to your Tag.

Be sure to save the changes made to your Tag so you can Preview or Publish the Tag.

You are now ready to Preview or Publish your tag.

After any changes to your Tag you can Preview before Publishing the Tag.