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

Google+Tweet about this on TwitterShare on FacebookShare on LinkedIn

In my previous post on the subject matter I explained how I would use GTM to track pop-up impressions in Google Analytics. I also tried to show how you can configure your pop-up’s code according to your needs (delay, impression on click). So, as it’s been promised, in this post I will try to demonstrate how to track pop-up conversions in Google Analytics via Google Tag Manager. But before we go into details, let us first settle upon what is exactly meant here under the term conversion.

track-pop-up-conversions-in-google-analytics-via-google-tag-manager-banner-min

Pop-up conversions

Naturally, since the desired user action you would want to track as a goal is absolutely dependent on the type of your pop-up, there are several events that can be treated as conversions. For instance, here are four simple events that could be a subject for a conversion tracking:

  1. Clicks
  2. Form Submissions
  3. Subscriptions (single and double opt-in)
  4. Pop-up impression duration

In this article I will try to describe possible methods for tracking each of the above events via Google Tag Manager.

IMPORTANT: Before reading further, please mind that any of the solutions here requires at least basic knowledge of CSS and Javascript/jQuery.

So, let’s see how to track pop-up conversions in Google Analytics via Google Tag Manager.

The post is divided into the following chapters:

  1. Track pop-up/modal dialog clicks
  2. Track pop-up/modal dialog form submissions
  3. Track double opt-in subscriptions
  4. Track pop-up/modal dialog impression duration
  5. Summary

Track pop-up/modal dialog clicks

This one is easy. Suppose, you have a sliding modal window/dialog box that looks like this:

And you want to have an event pushed to GA each time someone clicks on ‘yes’, ‘no’ or ‘close’ button. In this case, you would simply need to create a trigger like this:

track pop-up conversions in google analytics via google tag manager trigger 1

Using matches CSS selector condition, we can easily track clicks on each <button> element. Besides that, by setting the Click Classes variable as the event’s label, we can acquire accurate data on the ratio of users who have clicked on the specific button to those who have seen the pop-up. For instance, here’s a simple metric for pop-up bounce rate:

Where CN is the number of unique click events for ‘no’ button, CCl is the number of unique click events for ‘close’ button and PPI is the number of unique banner impressions.

If <button> elements had no class attributes, things would get a bit more complicated. In this case, we could create a custom variable to derive the value of the data-modal-action attribute.

Thus, this function would return a string with the value contaning either confirm, cancel, close (in case all three conditions are true) or not set (if any condition returns false). We could then use it as the event’s label in our UA Event tag.

Track pop-up/modal dialog form submissions

Though this task requires quite a similar approach, there is an important note that you need to keep in mind.

As it has been already mentioned multiple times in several articles dedicated to GTM form tracking, if you want to have the Form Trigger working correctly, there are two indispensable conditions that have to be considered.

  1. A submit browser event must be dispatched
  2. The submission itself must not be blocked form propagating to the document node

The violation of these seemingly simple conditions can prevent your tags that use form submission events as triggers from firing. In this instance, the best solution would be to tell your developers that you need a standard browser’s submit event to track the form submission. In case that can’t be done, you would ask them to add window.dataLayer.push() to the callback function that is invoked when the form is successfully submitted.

To get more information on the subject matter, check this post written by Simo Ahava.

Taking into consideration the above tip, you would need to have either a standard gtm.formSubmission event or a custom event pushed to dataLayer each time a form is submitted. Suppose, you have a subscription form in your modal box/pop-up that looks like this:

And for some reason you don’t have a gtm.formSubmission event, so you can’t use a standard GTM form trigger

In this case, you should first ask your developers to add window.dataLayer.push() snippet to the callback function of the form and then create a trigger that uses a custom event that is pushed to dataLayer on a successful form submission.

The snippet could be something like this:

And the trigger would be like this:

track-pop-up-conversions-in-google-analytics-via-google-tag-manager-trigger-2-min

 

You can use this trigger for firing your UA Event Tag. Thus, you would track pop-up/modal box form submissions in Google Analytics via Google Tag Manager. Additionally, for a basic enrichment of your analysis data, you can use dataLayer variables (for instance, eventLabel and formId) for the event label field of your UA event.

To do that, you would first need to create four variables (formId, eventCategory, eventAction, eventLabel). Then create a UA Event tag and attach the above trigger to it. The event label field of the tag could look like this:

track-pop-up-conversions-in-google-analytics-via-google-tag-manager-tag-1-min

As a result, you would have an accurate understanding which form generated the majority of subscription events. Not only that, you would also see which content performs best in the context of gaining regular customers/readers.

Track double opt-in subscriptions

While single opt-in subscription events can be easily managed by using the described-above method, implementing a tracking set-up for double opt-in subscription events is a bit more complicated as this option requires that users actually confirm their intention to join your mailing list.

Ordinarily, users are asked to click on a specific link in the confirmation letter. In most cases, this link leads (or at least is should lead) to a particular thank-you page. Obviously, we may use that for tracking double opt-in subscriptions. But how do we collect the information like formId or form location in this case? Well, there is a solution thought it requires some additional coding.

The algorithm is as follows:

track-pop-up-conversions-in-google-analytics-via-google-tag-manager-logic-min

Not only would this allow you to manage double opt-in subscription, but also would prevent you from sending a repeat hit to GA. In other words, the event hit for a particular confirmation letter will be sent only <strong>once</strong> no matter how many times someone followed the “confirm” link.

Here’s a step-by-step guide for tracking double opt-in subscriptions in Google Analytics via Tag Manager.

What we’ll need:

  • 4 variables
  • 2 triggers
  • 2 tags

Variables

2 first party cookie variables and 2 custom js variables.

Tags and Triggers

1 tag and 1 trigger for subscription form submission, 1 tag and 1 trigger for confirmation page view.

Step 1

Add window.dataLayer.push() snippet (see prev. chapter) to the callback function that is invoked upon a successful submission of your subscription form.

Step 2

If you’ve done everything correctly, now you should have a unique event pushed to dataLayer when the form is submitted. With this event you should also have 4 dataLayer variables (formId, eventCategory, eventAction, eventLabel).

Now, you need to create a trigger that uses dataLayer event.

Step 3

Create a UA Event Tag, give it a descriptive name (something like ‘GA – Event – ppFormSuccess’) and attach the above trigger to it. You can use dataLayer variables to fill your event’s fields like it shown on picture in the previous chapter.

Now the event tag should fire each time the pop-up subscription form is submitted.

Step 4

Suppose, the url path of your thank-you page looks like this:

/add-subscriber.php

You need to create a page view trigger that fires the UA tag when users land on this page after clicking on the confirmation link.

track-pop-up-conversions-in-google-analytics-via-google-tag-manager-trigger-4-min

Step 5

Create a UA Event Tag and attach the above page view trigger to it. Now it should fire each time someone lands on this particular page.

If you have done everything right (including the set-up for tracking pop-up impressions), now you should have enough information for building a little conversion funnel.

track-pop-up-conversions-in-google-analytics-via-google-tag-manager-funnel-min

But this solution still lacks significant data. For example, we know nothing about which form has triggered the supscription event or where exactly on the site it has happened. Not only that, we would aslo need to prevent repeat event hits from being sent to GA.

So, let’s improve this solution!

Step 6

Create two 1st party cookie variables. Here’s an example.

track-pop-up-conversions-in-google-analytics-via-google-tag-manager-cookie-min

The first variable (in this case, subscriptionStatus) will come in handy for preventing repeat hits from being sent to Google Analytics while the second one (ppsFormDetails) will help determine all the details concerning the subscription form submission event.

Step 7

Let us create the first custom JS variables with the following content.

№1

Once a user confirms the subscription, this function will set a cookie with the name of ‘subscriptionStatus’ and the value of ‘confirmed’. So, now we can prevent repeat hits by checking if this cookie has a value of confirmed. All you need is to edit the trigger responsible for firing the UA tag that sends the event hit once the subscription is confirmed.

track-pop-up-conversions-in-google-analytics-via-google-tag-manager-trigger-5-min

So, the trigger will have two simple conditions. Page path equals /addsubscriber.php AND the subscriptionStatus cookie does NOT equal ‘confirmed’. Please note that you can change the cookie expiration time to whatever you want (in this case, I have an expiration time of 2 years).

You should also edit the UA tag itself by adding the hitcallback field to it. We will use the subscriptionStatus variable as its value.

track-pop-up-conversions-in-google-analytics-via-google-tag-manager-hitcallback-1-min

Step 8

Create the second custom JS variable like this:

№2

This piece of code is responsible for storing subscription form details. Once the form is submitted, a cookie is created containing all the information about where exactly on the site the event has taken place (page path variable) and which form has triggered the subscription (formId variable).

IMPORTANT: To track those users who have previously opted-in (those who already have the subscriptionStatus cookie) in case they want to add another e-mail address to your mailing list or re-subscribe, we need to erase the ‘subscriptionStatus’ cookie, so the UA event tag on the /addsubscriber.php page would have an opportunity to fire.

Step 9

Now, to start tracking subscription details, you will firstly need to edit your UA event tag that fires when the subscription form is submitted by adding the hitcallback field to the “Fields to set” section.

And, yes, there’s another field you should also add to make the solution more sustainable. Use transport – beacon option.

track-pop-up-conversions-in-google-analytics-via-google-tag-manager-hitcallback-2-min

Since the volume of this article by this point has already overstepped all possible bounds, let me skip the detailed explanation of logic behind this option. To learn more about it, you can check this nice post by David Vallejo or read the official documentation concerning GA fields usage.

Step 10

Use the ppsFormDetails variable as the event’s label to track the details of the subscription form.

Hopefully, if you have gone through all the above steps correctly, you will have a clear understanding which form and content are responsible for attracting the majority of subscribers.

track-pop-up-conversions-in-google-analytics-via-google-tag-manager-event-label-min

Things to consider on this method

In some cases, attributable to your site’s internal logic, the best way to make sure you are actually creating a cookie that contains all necessary information concerning your form submission event is to add the function of the ppsFormDetails variable directly to the source code.

Probably, you would want to change or delete the subscriptionStatus cookie when users unsubscribe from your mailing list.

If you’re using MailChimp and want to track only form locations, there is no need in implementing the above solution. Here are simple guides: one and two.

Track pop-up impression duration

Finally, let’s see how we can use Google Tag Manager to track pop-up impression duration. Once we obtain this kind of information, we can draw a conclusion whether or not users actually pay attention to the content of the modal box/pop-up.

We will need:

  • 1 dataLayer variable and 1 custom JS variable
  • 1 trigger and 1 tag for tracking pop-up impressions (if you haven’t created these ones yet)
  • 1 trigger and 1 tag for tracking pop-up close events

The logic is simple. We just need to measure the time between two events: an impression event and a close event.

Step 1

First, create a dataLayer variable and name it like ppStartTime

Step 2

After that you need to edit your window.dataLayer.push() code snippet that is executed once the pop-up window is shown by adding the ppStartTime variable to it. If you have already implemented window.dataLayer.push() code snippet by following the guide in my previous post, simply add another variable.

Now we have the exact impression time of the pop-up.

Step 3

Next step is to implement click tracking for the close button of the modal window.

The following trigger will help track user clicks on this button.

track-pop-up-conversions-in-google-analytics-via-google-tag-manager-trigger-6-min

Step 4

And here’s a custom JS variable that returns the time interval between impression and close events. Let’s name it like ppImpressionDuration.

Step 5

Finally, we need to create a UA timing tag and attach the above trigger to fire it once someone clicks on the close button. The tag should look like this:

track-pop-up-conversions-in-google-analytics-via-google-tag-manager-timing-min

Thus, deducing an inference from this kind of data, we can conclude whether or not users actually read the content of the modal window/pop-up.

Things to consider on this method

Please note that the pop-up impression duration time is not a 100% reliable metric. To gain the most of this solution, you would also need to consider page visibility time.

There is another possible way to measure pop-up impression duration. You can hack GTM dataLayer. Check this post for detailed instuctions.

Summary

I hope this guide was helpful for those who want to track pop-up conversions in Google Analytics via Google Tag Manager. Though some of the above methods may seem to be complicated to those who have just started using Google Tag Manager, they can provide basic data on how users actually interact with your modal box or a pop-up. This especially considers the two latter tips. Let me state yet again that my JS code here is not impeccable. Any corrections/improvements/suggestions are welcome in the comment section below.

Obviously, a successful implementation of any solution listed here entirely depends on your site’s operation peculiarities. This especially concerns the two latter tips. Please do mind that before taking any actions.

Google+Tweet about this on TwitterShare on FacebookShare on LinkedIn
  • Omniaural

    Dmitri,

    I like these articles on tracking pop-ups in GTM and will be very useful for my work on other sites, but I’m specifically thinking about mailchimp atm.

    Can this level of modification be achieved with a Mailchimp pop-up? Unless I’ve missed something I can’t see where these changes can be made in this instance.

    Thanks for sharing your insight!

    • Dmitri Ilin

      Hi Omniaural,

      thanks for your comment. As far as I’m concerned this approach is definitely applicable to mailchimp pop-ups. You’d need to tweak the source code of the pop-up slightly. As you’ve probably noticed, my blog features mailchimp subscription form. I’m planning to add a pop-up soon, so as soon as I’m done with this, I believe I can share a guide on how to do this with MC pop-ups with you. Stay tuned!