Tracking User Engagement in Pop-Ups with Google Tag Manager

It’s possible to set up tracking for pop-ups in Google Analytics through Google Tag Manager, and it truly can be as easy as it is to set up any other event. However, due to the nature of pop-ups and their use of cookies, additional steps are required to test your event tracking before publishing. In this guide, we’ll cover some basic event tracking you may want to set up for your pop-up campaign, and tips to ensure your tracking is configured properly.

Before beginning, ensure you have Google Tag Manager implemented correctly throughout the site and check that pop-ups are not embedded in iframes.

With a pop-up campaign, you may want to set up tracking for the following events within pop-ups:

Track click events

Track form submissions

Track which message converted users

Skip to testing pop-up event tracking in GTM.

Track Click Events Within a Pop-Up

You may want to track click events to have visibility into which elements or links were clicked on within a pop-up and how many users exited out of pop-ups.

You can use the following tactics to identify click elements within a pop-up (or anywhere on the page) for event tracking in GTM:

Enter the DOM: Right-click the element you’d like to set up click tracking for (the ‘Contact Us’ button this in example) and select ‘Inspect’. The DOM will open up and highlight the exact element you selected for tracking.

From here, you have a few options to set up tracking for a click on this element:

• ‘Click - Just Links’ trigger: The element is embedded within a link tag, allowing you to use the ‘Click - Just Links’ trigger and set the event to fire when the ‘Click URL’ equals ‘#’ (the value of href= in your a tag).
• ‘Click - All Elements’ trigger: The element has a unique class and ID, both of which can be used as conditions for the ‘Click - All Elements’ trigger.

Use GTM Preview mode: Have your built-in click variables enabled in GTM and enter preview mode before navigating to your test page.

Click on the target element for event tracking and navigate to the event in the left pane under ‘Summary’. Open up ‘Variables’ in the top pane and this window will show you all variables that GTM associates with this click event:

Use these element variables to set up the same events as you would with the variables found in the DOM.

Track Form Submissions Within a Pop-Up

Sometimes, the same forms are embedded in the main window and within pop-ups. In these cases, it may be useful to set up form submission events that differentiate whether the form was submitted through a pop-up.

Set up form submission tracking with GTM’s built-in variables and triggers (Form Submission trigger using a Form ID or Form Class variable) and customize your Event Labels to specify whether the form was submitted through a pop-up window:

1. Highlight the pop-up modal, right-click the element, and select ‘Inspect’ to see details in the DOM.
2. Find the element within the DOM that highlights the entire modal, as shown in the screenshot to the right.
3. Right-click the element in the DOM and copy the CSS Selector.
4. Create a Custom Variable in GTM as an Element Visibility variable.
5. Select ‘CSS Selector’ and paste the copied CSS selector.
6. This Element Visibility variable will return “true” if the specified CSS Selector is visible within the main viewport upon the event trigger and “false,” if not.

Edit your “true” and “false” values under Format Values to values that make sense for your analysis reports.

You should see similar event details to the ones below once you’ve set up your form submission trigger and dynamic Event Label variable.

Track Which Messages Converted Users

This type of event tracking is useful when you have the same form embedded with different CTAs on pop-ups throughout your site. You can set up your form submission or click events to include the CTA message in your Event Label.

This setup is very similar to the methods you’d use in setting up click events through a pop-up:

1. Highlight the text that should be pulled in as your Event Label, right-click it, and select ‘Inspect’, to get element details in the DOM.
2. Right-click the element in the DOM and copy the CSS selector.
3. Create a new DOM Element variable in GTM, select ‘CSS Selector’, and paste the CSS selector you copied from the page.
4. Add the DOM Element variable as a {{Dynamic Variable}} as the Event Label in your event tag.
5. Test in preview mode to check that the correct text is being pulled in as the label.

Testing Pop-Up Event Tracking in GTM

Typically, pop-ups are configured to only show once per session, browser, user, etc. Additionally, these windows can be set to load on certain events—upon navigating to exit a page, after X seconds on a page, after X% of a scroll down a page, etc. It’s possible for sites to limit the visibility of pop-up windows within these parameters through the use of cookies. Although it’s necessary to avoid repetitive interference of users’ browsing sessions, it can make event tracking configurations a bit more cumbersome.

Despite the frustration you may endure from having to constantly reload the page to view the pop-up, there are two surefire methods to viewing the pop-up window upon every page load.

Empty Cache and Hard Reload

With your DOM open, right-click the refresh button and select ‘Empty Cache and Hard Reload’.

Clear Storage

Sometimes, emptying your cache won’t be enough of a reset to allow you to view the pop-up window. You’ll need to clear your cookies in between reloading and testing events within your pop-up. This also requires the use of the DOM.

To clear your cookies, enter the DOM and navigate to ‘Application’ in the top panel. Find and click the ‘Clear site data’ button under ‘Clear storage’.

This will clear your cookies within your website under both local and session storages. This should clear your browsing history and cookies enough to enable the pop-ups to appear.

These steps should get you started on setting up tracking pop-ups in Google Analytics through Google Tag Manager. Comment below and let us know what other types of event tracking you think could be useful for pop-ups!