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: Supplying Embed Code Everywhere

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

Give-Name-to-Account-for-GTM

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.

Create-GTM-Container-for-Web-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.

Add-required-GTM-JavaScript-to-your-site-first

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.

Click-Add-New-Tag-to-create-new-tag-in-GTM

Add a title for your tag.

Give-Title-to-new-GTM-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.

Choose-Custom-Tag-Type-Custom-HTML-in-Google-Tag-Manager

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.

Paste-OptinMonster-Sitewide-embed-code-in-the-HTML-field-area

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.

Choose-Tag-Firing-Options-when-setting-up-sitewide-embed-code-in-GTM

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.

Choose-a-Trigger-for-Sitewide-Embed-Code-for-GTM

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

Sitewide-OptinMonster-embed-code-set-to-fire-on-all-pages-in-GTM

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

Your new tag is added.

Site-wide-embed-code-was-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.

Publish-and-Preview-OptinMonster-GTM-Tag

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.

GTM-Tag-for-OptinMonster-Fired-On-Page

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


Advanced Usage: Supplying Embed Code 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.

gtm-triggering-pencil

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

gtm-trigger-new

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

gtm-trigger-edit

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.

gtm-trigger-some-pages

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.


Troubleshooting

Sharing Preview Mode

If you are having issues with getting OptinMonster working using Google Tag Manager, you can share the preview mode with our support team so that they can assist you. To share your preview mode, click Share Preview from the preview notification banner. This brings up a dialog box where you can copy a URL to send to us. Enter your website domain and copy the resulting preview URL in the box below.

You can then send the preview URL to us or anyone helping you with the setup. The preview URL will take them to a landing page where they will be informed that their browser has been enabled for preview mode. There will also be a link on the landing page to disable preview mode for that browser.

For more information and usage, you can follow this link.

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