How to Integrate OptinMonster with Google Tag Manager

Do you want to use Google Tag Manager to control where and when your campaigns load on your site? It’s easy with our embed codes. Follow our documentation to learn how to integrate OptinMonster with Google Tag Manager.

Basic Usage: Account-wide Embed Code

  1. Create a Tag
  2. Configure the Fire On Rules
  3. Preview and Publish the Tag

Advanced Usage: Campaign-Specific Embed Code

  1. Create a Tag
  2. Configure the Fire On Rules
  3. Preview and Publish the Tag

Basic Usage

You can use Google Tag Manager to easily manage supplying OptinMonster’s Account-wide embed code to all of the pages on your site. For more complex management of OptinMonster through Google Tag Manager see our Advanced Usage example.

Note: even though the campaign code will be supplied to all the pages, each campaign will only load / show to your web visitors based on each campaign’s display rules.
Step 1 – Create a Tag

From the Workspace screen, select Add New Tag to create a new Tag.

Add a new GTM tag

Add a title for your tag.

Click Title Area to add Tag Title

Then, click the Tag Configuration box. That will cause a Tag Type menu to slide-out from the right. Scroll down until you get to the Custom section and select Custom HTML.

Account-wide select Custom HTML as tag type

Your next screen will have a Custom HTML field area.

IMPORTANT: You’ll need to grab the Embed Code for the campaign you wish to manage through Google Tag Manager. See how to embed your campaigns on your site for more information on how to retrieve the embed code. We recommend using the Account-wide Embed Code for basic usage with Google Tag Manager, however the Campaign Embed Code will work as well if you followed the advanced usage portion of this guide.

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

Account-wide+paste embed code in tag

Next, you must enable Support document.write

Account-wide enable Support Document Write

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.

Account-wide tag set to fire once per page

Next, move to the Triggering section.

Step 2 – Configure the Fire On Rules

You’ll need to specify the rules you want to fire the tag on. Click the Icon in the middle of the Triggering area and the Choose a Trigger menu will slide-in from the right.

IMPORTANT: If you’re using the Account-wide Embed you’ll want to configure the Tag to fire on all pages of your site and control where on your site the campaign appears through the campaign Builder’s Display Rules options. This is the recommended usage. 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 by following our advanced usage portion of this guide.

For this example we’ve selected All Pages.

Account-wide select all pages for trigger

Once you select All Pages then the menu will slide away. The result is that your tag is fully configured.

Account-wide save newly created tag

After you review your setup, click Save on the top right to save your new tag.

Your new tag is added.

Account-wide embed tag added

Step 3 – Preview and Publish the Tag

Once you’ve created your Tag you can either Preview or Submit (Publish) it. To make this campaign live, go ahead and click Submit.

Account-wide tag submit to publish

New tags added will indicate a new version of Google Tags loading on your site. To help track changes, you should add a version name, including what you changed. Specifically, you’ve added the Account-wide OptinMonster code so you can mention that.

You can click Publish when you’re finished with the information.

Account-wide tag add notes to version and publish

Great, you’re all good to go! You’ll see a summary screen.

Account-wide tag published

Congratulations! Your OptinMonster campaigns are live!

Advanced Usage

You can use Google Tag Manager to easily manage supplying OptinMonster’s Campaign-Specific embed code to all or a specific portion of the pages on your site. For more simple management of OptinMonster through Google Tag Manager see our Basic Usage example.

Note: even though the campaign code will be supplied to all or a portion of the pages, each campaign will only load / show to your web visitors based on each campaign’s display rules.
Step 1 – Create a Tag

From the Workspace screen, select Add New Tag to create a new Tag.

Add a new GTM tag

Add a title for your tag.

Click Title Area to add Tag Title

Then, click the Tag Configuration box. That will cause a Tag Type menu to slide-out from the right. Scroll down until you get to the Custom section and select Custom HTML.

Campaign-specific select custom html tag type

Your next screen will have a Custom HTML field area.

IMPORTANT: You’ll need to grab the Embed Code for the campaign you wish to manage through Google Tag Manager. See how to embed your campaigns on your site for more information on how to retrieve the embed code. For this Advanced usage, you should use the Campaign Embed Code so you can benefit from the page-targeting aspects of Google Tag Manager.

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

Campaign-specific + paste embed code in tag

Next, you must enable Support document.write. Afterward, 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.

campaing-specific-enable document write

Next, move to the Triggering section.

Step 2 – Configure the Fire On Rules

You’ll need to specify the rules you want to fire the tag on. Click the Icon in the middle of the Triggering area and the Choose a Trigger menu will slide-in from the right.

For this example we will create a new trigger. Click the + icon the the top-right.

campaign-specific-add-new-trigger

This will bring you to a Trigger Configuration screen. You can click the Pencil icon or click the icon in the middle to start.

campaign-specific add new trigger

Load Campaign on Specific Pages

You will be presented with various Trigger Types to choose from. To use Google Tag Manager for page targeting, select Page View.

campaign-specific-choose-trigger-type

Next you will need to configure your Trigger. To target specific page(s), you can set that here. In this example, we are targeting our blog pages, which are all located on URLs whose structure is: http://mydomain.com/blog/my-blog-post . Since all are within the folder blog, I can create a rule where the (1) Page Path (2) Starts With: (3) blog . Once this new Trigger Configuration is updated, click Save in the top-right.

campaign-specific-configure-trigger

With your Tag finished, you can click Save on the top-right.

campaign-specific save new tag

 

Once you select All Pages then the menu will slide away. The result is that your tag is fully configured.

Account-wide save newly created tag

After you review your setup, click Save on the top right to save your new tag.

Your new tag is added.

campaign-specfic-tag-created

Step 3 – Preview and Publish the Tag

Once you’ve created your Tag you can either Preview or Submit (Publish) it. To make this campaign live, go ahead and click Submit.

Account-wide tag submit to publish

New tags added will indicate a new version of Google Tags loading on your site. To help track changes, you should add a version name, including what you changed. Specifically, you’ve added the Campaign-Specific OptinMonster code to show on your blog pages, so you can mention that.

Campaign-specific publish tag

You can click Publish when you’re finished with the information.

Great, you’re all good to go! You’ll see a summary screen of your changes.

Congratulations! Your OptinMonster campaigns are live!

For your next steps, are you looking to extend the functionality of OptinMonster? Check out our JavaScript events API.