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