Advanced OptinMonster Triggers for Popups with Google Tag Manager

Are you looking to generate more leads from your existing site traffic?

Wish you could show popups to people based on CRM data and other data points?

If so, OptinMonster might be the tool for the job.

Personally, I like using OptinMonster on my own website to offer course signups and resource downloads. You can also use them to grow your email list by offering bonuses like discounts or other exclusive benefits.

In this tutorial, I’ll teach you how to Trigger an OptinMonster popup using Google Tag Manager so that you can tailor your popup marketing to specific website users.

Some of what we’ll cover in this post:

When I first installed OptinMonster, I really looked forward to using it in combination with Google Tag Manager. However, I found that there isn’t currently a native way to launch OptinMonster popups using the trigger capabilities of Google Tag Manager.

That’s why we had to come up with this little workaround that I’m about to teach you to open up the triggering options available to you.

With this method, we can utilize all the goodness of the Data Layer in combination with Google Tag Manager to trigger OptinMonster popups to specific segments of our audience by firing on almost any custom trigger or event you can dream of.

Are you ready to see how this works? We’ve got lots to cover, so let’s dive in.

Create a New OptinMonster Campaign

Our journey starts in the OptinMonster dashboard. Click on the Create a New Campaign button.

OptinMonster campaign dashboard with Create New Campaign button highlighted

Here you can choose between the different campaign types. For this guide, we’ll choose the classic Popup since it’s easy to implement.

OptinMonster campaign creation with Popup campaign type highlighted

Next, pick the design template that you’d like for your campaign. We’ll go with this Donate template for now. 

OptinMonster popup templates selection

Give your campaign a name and select the website where you want the popup to appear. When you’re done, click Start Building.

OptinMonster popup campaign configuration settings for name and website domain

And here we have our popup. This template has a cool countdown, some information, and a call-to-action button. I’ll leave it up to you to play around with this and change it around however you want for your own campaign. For this guide, let’s focus on how to implement this on our website.

Install OptinMonster with Google Tag Manager

In order to trigger OptinMonster campaign popups using Google Tag Manager, we’ll first need to install OptinMonster using a general Tag that will load our account information.

Configure Campaign in OptinMonster

Our next step is to choose some preliminary Display Rules, which you can find in your topbar.

OptinMonster popup campaign editor with Display Rules button highlighted

OptinMonster has some native trigger options. We’re going to eventually replace these with more customized triggers in Google Tag Manager, but for now we’ll set up this popup to appear after a user has been on the page for five seconds with the rule time on page is at least 5 sec.

OptinMonster Display Rules rulesets with time on page is at least 5 sec

You can add on more rules to specify where or for whom the popup is triggered. We’ll also add the rule that the current URL path is any page. With these two rules, this popup will be shown after five seconds on any page.

OptinMonster Display Rules rulesets with current URL path is any page

In this tutorial, we are going to ignore the Integrations and Analytics configurations. We don’t really need to worry about these, since if you have any optin fields, you’ll simply integrate them with your CRM.

Instead, click on Publish in your topbar and scroll down to Platforms.

There are a few ways to deploy your OptinMonster campaign. You can use the Display Rules to implement it on any website, or you can use special conditions like a MonsterLink, WordPress plugin, or a campaign-specific  option for developers.

If you just want to use the display rules, then you could probably use any of these options. But if you want to take advantage of triggers in Google Tag Manager, then you need to select the Any Website option.

OptinMonster Publish platform settings with Any Website highlighted

Scroll down and copy the code snippet for your Any Website embed. 

OptinMonster Publish platform settings with embed code highlighted

Finally, let’s make our popup live on our website. At the top of the Publish screen, click the switch next to Status so that it says Live. Click the Save button in the topbar.

OptinMonster popup campaign dashboard with status set to Live and Save button highlighted

Configure Campaign Tag in Google Tag Manager

In a new tab, open your Google Tag Manager dashboard. Click on the Tags header, then click the New button.

Google Tag Manager dashboard with Tags header and New button highlighted

Name your new Tag, then choose Custom HTML as the Tag Type. In the HTML field, paste your code. This is the general code that we’re going to deploy that will eventually allow us to launch any OptinMonster campaign on our website through Google Tag Manager.

Google Tag Manager tag configuration with name, tag type, and custom HTML code highlighted

You will need to check the box for Support document write because this code will implement the popup via the document.write() functionality of JavaScript. So be sure to tick that on.

Google Tag Manager tag configuration with Support document write box checked

Finally, select the All Pages trigger so that this code will be deployed on all the pages.

This is important even if you want to launch a campaign that doesn’t appear on all pages! This is a general Tag with a base code that will allow specific campaign Tags to load properly later on. It’s like the code library that loads in a Facebook Pixel and enables tracking.

So make sure that this Tag fires on all pages and click Save.

Test GTM Implementation of OptinMonster

In Google Tag Manager, click on Preview to enter the GTM Preview & Debug Mode in your browser.

Google Tag Manager dashboard with Preview button highlighted

Go to your website. Fulfill the trigger conditions you set in OptinMonster’s Display Rules to see your popup. In this case, our popup appeared after being on the page for five seconds. You should also see that your Tag has fired in the GTM preview console.

Demo website in GTM Preview and Debug mode with popup Tag fired and popup on website

Trigger an OptinMonster Popup using Google Tag Manager

If you simply want to utilize the display rules that are available in OptinMonster, then you could stop here now that you’ve installed your campaign with Google Tag Manager. And OptinMonster has some really cool ones such as time on page, page targeting, and if the user is about to exit the page. If you upgrade to certain plans, you’ll even be able to target users in certain locations or returning visitors.

But what if you are well-versed in Google Tag Manager and you want to take advantage of the different trigger types it offers?

You could easily build these same rules yourself, plus you could utilize the expanded trigger capabilities of Google Tag Manager. For example, you could use YouTube video tracking in order to show your popup at a certain time, or you can build custom triggers using ReGex and the data layer.

So that’s when you need to change your deployment slightly. Let me show you what I mean.

Build a Trigger in Google Tag Manager

Let’s try a little example with the YouTube Video trigger in Google Tag Manager.

I have a page on my website with an embedded YouTube video. This is what we want to track. Let’s say that if somebody watches more than fifty percent of the video, I want to deploy my popup.

Demo website with YouTube video embedded, progress bar at about fifty percent

In order to make this work, we’ll first need to configure a YouTube Video trigger.  In Google Tag Manager, go to Triggers and click New.

Google Tag Manager dashboard with Triggers header and New button highlighted

Click on the Trigger Configuration box to choose a trigger type. For this example, we’ll select YouTube Video.

Google Tag Manager trigger configuration with YouTube Video trigger type selected

Name your trigger and check all of the Capture boxes: Start; Complete; Pause, Seeking, and Buffering; and Progress. I want to launch my popup when a user has watched at least half of my video, so I’m going to click Percentages and enter 50 percent as the variable.

We’ll also check the box for Add JavaScript API support to all YouTube videos, set this trigger to be enabled on DOM Ready (gtm.dom), and fire it on All Videos. Click Save.

Google Tag Manager trigger configuration with name YT, capture boxes all checked, progress percentages set to 50, Add JavaScript API, enable this trigger on DOM Ready, and trigger fires on All Videos

You also need to enable a variable so we can see the video percentage in the data layer. To do this, go to Variables and click Configure.

Google Tag Manager dashboard with Variables header and Configure button highlighted

Scroll down to the Video variables and check the box for Video Percent.

Google Tag Manager Configure Built-In Variables with Video Percent box checked

Test Listener Functionality of Trigger

Now we can try out the listener functionality of this trigger. We need to make sure that it is correctly configured to launch a popup at the targeted moment, which is halfway through the YouTube video.

Reload your page in GTM Preview & Debug Mode and check out the GTM preview console. Our listener should start listening on the DOM Ready event, and starting the video should initiate a YouTube Video event. If you check the Variables tab for that event, you should see the Video Percent at zero.

Demo website in GTM Preview and Debug mode with YouTube Video event, Variables tab, and Video Percent variable at 0 highlighted

If you skip ahead in the video, you should see a new YouTube Video event in the GTM preview console. This time, the Video Percent will be fifty-two percent. At this point, we will want to fire our Tag.

Demo website in GTM Preview and Debug mode with YouTube Video event, Variables tab, and Video Percent variable at 52 highlighted

Build a GTM Tag for an OptinMonster Campaign Popup

Let’s refine our trigger a bit for our Tag that will load our OptinMonster popup. In Google Tag Manager, click your trigger to edit it.

We’ll change the name of the trigger so that it reflects our specific rules. Then, let’s go ahead and fire this trigger only on Some Videos  where the Video Percent is greater than 50.

Google Tag Manager tag configurations with name YT - above 50% viewed, trigger fires on some videos where video percent is greater than 50, and save button highlighted

Now that the trigger is defined correctly, we need to implement a Tag that will launch our OptinMonster popup. In order to do this, we have to make some minor adjustments in our OptinMonster account.

You know now that OptinMonster uses its own Display Rules system to determine when to activate a campaign. To use the Display Rules, you just need to have our general Tag installed from before. However, since we want to use the triggers in Google Tag Manager, we actually need to get rid of OptinMonster’s Display Rules altogether.

To do this, go to your OptinMonster dashboard and click on Display Rules. If you have more than one If… condition for your campaign, click the minus icon ( ) to delete them.

OptinMonster popup campaign dashboard Display Rules with delete icon highlighted

For this campaign’s only condition, we’re going to select an option called MonsterLink™ (on click). This means that there will be an invisible link that launches the popup in your site’s code, which our Tag will click on when it fires.

OptinMonster popup campaign display rules with MonsterLink (On Click) rule button highlighted

Click the Save button in the topbar to implement the change.

OptinMonster popup campaign display rules with Save button highlighted

The last thing we need in order to build our new Tag is our campaign ID, which tells OptinMonster which campaign to deploy. We can actually  find the ID in the URL after app.optinmonster.com/campaigns/ and before /edit. Copy your campaign ID.

OptinMonster popup campaign URL with campaign ID highlighted

The current Tag that we have in Google Tag Manager launches our OptinMonster code library. Next, we’ll create a new Tag that will launch the popup for our specific campaign.

Go to Tags and click New. Choose Custom HTML as the Tag Type, then enter the following prepared code snippet.

<div class="manual-optin-trigger" data-optin-slug="**CAMPAIGN ID**" style="display: none;"></div>
<script>
  document.querySelector("[data-optin-slug=**CAMPAIGN ID**]").click()
</script>

Replace **CAMPAIGN ID** with your actual campaign ID copied from OptinMonster.

Google Tag Manager tag configuration with Custom HTML tag type and HTML field highlighted

Now what will this code do? First of all, it will deploy or pend a div element to our page. This div element has certain attributes that we know how to target.

Second, this div element will also act as kind of a button that you need to click in order to show the popup. This is what OptinMonster calls the MonsterLinks. Really, it’s just a div that isn’t visible because of the parameter style=”display: none;”.

In the background, our new Tag will use a little bit of JavaScript, search for this element, and then click it. Basically, it’s a virtual click by JavaScript. We implement the div, click it, and that then triggers the right popup.

So let’s try this all out. Let’s give our Tag a name that tells us which popup it launches and when: OM – Popup – Video viewed. Select your YouTube Video trigger and click Save.

Google Tag Manager tag configuration with name OM - Popup - Video viewed, video above 50% viewed trigger, and Save button highlighted

Finally, just to keep things consistent and organized, let’s rename the Tag that contains our general code. It’s just a library that gets deployed, so it doesn’t do anything on your page by itself. It’s only useful if you give it a command with a second campaign Tag.

However, it’s still useful to keep as its own Tag separate from your campaign code. You can reuse it for multiple campaign Tags, so let’s call it OM – General – All Pages and click Save.

Google Tag Manager tag configuration with name OM - General - All Pages and Save button highlighted

Test OptinMonster Popup Launched with Google Tag Manager

Finally, let’s test this in the GTM Preview & Debug Mode. Let’s reload our video page and check out the preview console.

At first, no popup should appear. If we start playing the video, we have a YouTube Video event that shows we’re still at zero percent. But if we skip ahead to fifty percent or further into the video, our OptinMonster popup will fire because our Tag was deployed.

Demo website in GTM Preview and Debug mode with popup Tag fired and popup on website after video view

And you can obviously do this with any kind of other trigger, such as the click trigger, element visibility trigger, scroll trigger, and so on. You can utilize any kind of trigger that you want with this syntax when you combine it with this embedded node. Once it is clicked, it will show your popup or banner that you have defined by OptinMonster.

So this is a method to deploy many different OptinMonster banners or popups on your page, and triggering them individually via Google Tag Manager. You could also do this if you have the right data layer information in there and only fire this for certain people, for example. So you can be very specific with the targeting via Google Tag Manager and simply use OptinMonster as a way to build these kind of popups but deploy them through GTM.

Summary

All right, so there you have it! This is how you can trigger OptinMonster campaign popups  with the help of Google Tag Manager.

This approach gives you even more power over your OptinMonster campaigns. With a little bit of Google Tag Manager knowledge, you can fully customize your popup triggers even with a basic OptinMonster plan.

Are you ready to give this a try? I’d love to hear from you what you will use this for on your website. Leave me a comment down below and so we can learn from each other!

Julian Juenemann
About the author: Julian Juenemann

Julian started and grew venture-backed startups with his unique 'data first' approach to Online Marketing. He then founded MeasureSchool.com to help marketers, like him, the data-driven way of digital marketing.

guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Cheikh
Cheikh
1 month ago

Oh amazing tutorials thanks Julian