Track pop-up impressions in Google Analytics via Google Tag Manager

Google+Tweet about this on TwitterShare on FacebookShare on LinkedIn

At first glance, implementing a properly working set-up to track pop-up impressions in Google Analytics via Google Tag Manager may seem to be quiet an easy task, since all you have to do is to send an event/pageview hit to GA once the pop-up appears on the page. Simple as that.

But, obviously, that is not enough.

Not only should you track the impression details (for instance, pop-up type/content or current impression location), but you should also be able to get a full insight into how users actually interact with your content. That is half the battle. In the end, you need to have a complete data-based strategy for increasing the click/conversion rate of your pop-up or a grounded theory on how to improve its overall performance as the outcome of these actions.

track pop-up ipressions in google analytics via google tag manager: questions

 

For example, by calculating the time users spent viewing the banner, we can get a reasonably accurate understanding of whether or not they actually paid attention to it.

Since the attempt to cover the whole subject matter in a single article is clearly irrational, this post will only concern simple ways on how to use Google Tag Manager for adding the pop-up to your website, configuring its code and track its impressions in Google Analytics.

In the next article I will try to explain how I would use GTM to track interactions with the pop-up’s content. For instance, how to track subscriptions.

I thought it would be reasonable to use a signup form by Mailchimp as an example, because collecting users’ email addresses is one of the most common cases for using a pop-up.

The below content is divided into the following chapters.

  1. Implementation
  2. Configuration
  3. Track pop-up impressions via Google Tag Manager
  4. Summary

In case you are interested only in possible ways of tracking pop-up impressions, you can jump right to the respective chapter.

Implementation

First, here is a step-by-step guide on how to create a Mailchimp pop-up singup form for your website. After generating the form’s code, you will need to add it to your HTML. Since the optimal place to add the code entirely depends on the operating peculiarities of your site, the best plan to be followed is to reach out your developers in case you don’t positively know how to modify your HTML.

However, I would use a Custom HTML tag to add the code to my website. So, after consulting with your site developers, you can create a Custom HTML tag, paste the code and make it fire on all pages where you want to address your audience.

track pop-up impressions in Google Analytics via Google Tag Manager: mailchimp code

Configuration

Now, when we are done with the code’s implementation, let’s proceed to the next point and see how we can configure it according to our needs.

Configure Mailchimp pop-up delay

The most common thing people usually have problems with while using Mailchimp’s pop-up is setting the right delay time. Since Mailchimp offers only a five-minute delay as longest possible, many of users search for alternative solution to increase this parameter. With Google Tag Manager, you can easily trigger your Mailchimp pop-up impressions whenever you like. Here are two simple ways for this.

Use timer trigger

Let’s imagine you want to show your subscription pop-up only after someone spends 30 seconds on the page. All you have to do is to create a Custom HTML tag containing the code of your signup form and then attach a timer trigger to it.

track-pop-up-impressions-in-google-analytics-via-google-tag-manager-simple-timer

The logic is simple. The timer starts when Google Tag Manager is first loaded on the page. To use the trigger, you should first specify three fields: Event Name, Interval and Limit.

The first one lets you change the event name that is pushed to dataLayer. The second one is used to specify the time in milliseconds that should pass between firing events. The third one allows you to set the number of times you want the trigger to fire before it is stopped.

Next, the Enable When condition allows you to specify a certain range of pages where you want to use the trigger. Finally, in Fire On section you can set your own parameters to fire the trigger only when selected conditions are met.

For instance, here’s the timer I would use to trigger my subscription pop-up impression only when a certain user has spent 30 seconds on a page and only if the page is of single-post type.

track pop-up impressions in Google Analytics via Google Tag Manager: my-timer-trigger

Since I already have dataLayer variables for determining the page type, I can easily use them for configuring the firing rules.

Use setTimeout() method

You can also have recourse to JS methods, such as setTimeout(), to set the delay time for your pop-up. Here’s how I would edit the code of my Mailchimp sign-up form to perform this.

Again, as I want the tag to fire only on pages that are of single-post type, I would create a simple page view trigger to fire it. The trigger could be something like this:

Type: Page View

Fire On: DL – postType2 equals single-post

IMPORTANT: The function is only executed once. If you need to repeat execution, use the setInterval() method. You can use clearTimeout() method to prevent the function from running.

You can learn more about this method from here.

Make your pop-up appear on click

If you want your Mailchimp pop-up singup form appear on click, you can appeal to this method offered by Scott Magdalein. The logic behind Scott’s solution is simple. Suppose, you have a button with an id attribute like ‘open-popup’. Using the onclick event, you can make your singup form appear when users click on this button. In this case, all you have to do is to add the following code to your HTML.

Please make note of the 4th line of the code. To prevent the pop-up from being shown to those users who have already seen it, a cookie named ‘MCEvilPopupClosed’ is used. Thus, we have to delete this cookie prior to showing the pop-up to make sure users will see it.

I have also changed Scott’s original document.cookie line to ensure proper deletion of ‘MCEvilPopupClosed’ cookie.

IMPORTANT: Before taking any actions on this method, I would strongly recommend reaching out your site developers.

However…

Taking into consideration the fact that one of the most awesome features you have while using GTM is the possibility to elude the necessity of involving your developers in the process of creating a proper analytics ecosystem, I see no reason why we should not try to make most of it.

So, we can try to make Mailchimp singup form appear on click via Google Tag Manager. Create a click trigger and attach it to your Custom HTML tag that contains the form’s code.

In this case, the trigger for the above button should look like this.

track pop-up impressions in Google Analytics via Google Tag Manager" click-trigger

IMPORTANT: Don’t forget that you still have to edit the form’s code by adding the document.cookie line right after the second opening <script> tag.

Now, after we are done with configuration peculiarities, we can proceed to the chapter describing the way you can track pop-up impressions in Google Analytics via Google Tag Manager.

Track pop-up impressions in Google Analytics via Google Tag Manager

In my opinion, the most sustainable solution for tracking pop-up impressions via Google Tag Manager would be using dataLayer. By adding dataLayer.push fragment to your pop-up’s code, you may rest assured that you are tracking the right event.

Suppose, you have a button that triggers the pop-up impression when someone clicks on it. So, you might want to create a click trigger that fires your UA Event tag each time someone clicks on this button. In this case, you would track button clicks, not banner impressions since you can’t be 100% sure that the pop-up has been actually shown on the button click.

So, to track Mailchimp pop-up signup form impressions, first you will have to edit the original code like this:

Thus, you will have a unique event pushed to dataLayer each time the pop-up is being displayed. After that you should create a custom event trigger that listens for the event named “MCpopupshown”.

Finally, to track pop-up impressions, you should attach this trigger to your UA Event tag.

As you have probably guessed, this method can be applied for tracking almost any pop-up impressions. Just ask your developers to add dataLayer.push() to the callback function that is invoked once the banner is shown.

Summary

I hope this article will help you not only to learn how you can track pop-up impressions via Google Tag Manager, but also get a general idea on how you can use GTM for configuring some features of your pop-up’s functioning. Should questions concerning anything of the above arise, please ask them in the comment section below.

In the next article I will try to demonstrate the way I would use GTM to track interactions with my pop-up’s content.

Google+Tweet about this on TwitterShare on FacebookShare on LinkedIn