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

You can use Google Tag Manager to easily manage loading your campaign 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.


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.


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.


Follow the instructions given from Google and after you have placed those code pieces on your site, click the OK button.

Step 4. Create a Tag

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


Add a title for your tag.


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.


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 Sitewide Embed Code for basic usage with Google Tag Manager, however the Campaign Embed Code will work as well.

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.


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.


Next, move to the Triggering section.

Step 5. 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 Sitewide 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.

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.


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


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

Your new tag is added.


Step 6. Preview and Publish the Tag

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


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 Lightbox campaign we’ve added to the site using Google Tag Manager.


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 Campaign on Specific Pages

Instead of loading your campaign 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 campaign Embed Code for your HTML Tag and choose how often to load the Tag in the Advanced Settings.

Step 3. Fire On Settings

Next, click the pencil under Triggering. select the Fire On section.


Click the plus sign at the top right to create a new trigger.


Click the pencil in Trigger Configuration at the top right to choose a trigger type.


Choose the type Page View. Then, change This trigger fires on to Some Page Views. From there you can add rules to dictate where the tag will fire. When you are done, click Save.


IMPORTANT: Keep in mind the tag will only fire if all the rules you set within a trigger are true, the same way all rules within an OptinMonster ruleset need to be true for the campaign to fire.

You can add as many triggers as you want for the same Tag. When you are done adding triggers, click Save.

You are now ready to Preview or Publish your tag.

Looking to extend the functionality of OptinMonster? Check out our JavaScript events API.