You’d be forgiven for thinking that tracking popup form impressions is a simple task. The problem is that, to give your data any value, you need to understand how users are interacting with your popups. For instance, you need to know how long they are looking at a popup to know if they are paying any attention to it.
Element Visibility Trigger
Setting It Up
One option is to use the Element Visibility trigger. You can set this to fire whenever your popup appears in the browser’s viewpoint and is therefore visible to the user.
To set up the Element Visibility trigger, you can use element ID or CSS selector. If you opt for element ID, the trigger will use document.getElementById and will wait for the element (popup) with this specific ID attribute to appear in the viewpoint. If you use CSS selector, the trigger will wait for the elements that match the CSS selector string. This option is only worthwhile if you are tracking multiple elements.
Next, you need to decide when you want to fire the trigger. Your options are “once per element,” “once per page,” and “every time an element appears on-screen.”
After these settings, you have some advanced options to gain more meaning from your data. Some options are irrelevant to popups, but one you should consider is on-screen duration. For this, you define the total time in milliseconds that the popup should be visible before the trigger fires. You can use this to eliminate data from users who close your popup without viewing it.
Another setting to use is observe DOM changes. This allows you to track visibility of elements that may not exist when the page initially loads. It is essential for forms that are resilient to GTM’s Form Trigger. To include this, simply check the box next to “Observe DOM Changes.”
Variables
An event called gtm.elementVisibility is pushed into the data layer every time the visibility trigger fires. The object has a number of built-in variables that you can refer to. A few examples include:
- Click / Form Element for gtm.element — the element that became visible.
- Click / Form Classes for gtm.elementClasses — the class name string of the element that became visible.
- Click / Form ID for gtm.elementID — the ID value of the element that became visible.
Using dataLayer.push Fragment
An alternative method to the above is to use the dataLayer. You will need to add dataLayer.push fragment to your popup code to ensure that you track the right event. For instance, you could create a click trigger that fires your UA Event tag whenever a user clicks on a button that triggers a popup impression. It would be important in this case to track button clicks rather than banner impressions.
Now, let’s assume that the popup is for a Mailchimp signup form. You will need to edit the original code:
<script type=“text/javascript” src=“//s3.amazonaws.com/downloads.mailchip.com/js/signup-forms/popup/embed.js” data-dojo-config=“usePlainJson: true, isDebug: false”></script>
<script type=“text/javascript”>
require([“mojo/signup-forms/Loader”], function(L) {
L.start({
“baseUrl”:”mc.us12.list-manage.com”,
“uuid”:”YOUR_ID_HERE”,
“lid”:”YOUR_LID_HERE”
});
window.dataLayer.push({
“event”:”MCpopupshown”,
“pop-upType”:”subscription”
});
});
</script>
This will push a unique event to dataLayer each time the popup is shown. You will need a custom trigger event to listen for the event called “MCpopupshown” and attach the trigger to your UA Event tag.
Use this same method to track any popup impression simply by adding dataLayer.push() to the callback function invoked when the banner is displayed.
Whichever of these methods you use, you’ll gain a better picture of your popup forms performance.