Popup Tracking with Google Tag Manager – The Tutorial

Last Modified on March 22, 2024

Wouldn’t it be great if you could track the interactions on your popups?

With the Element Visibility trigger in Google Tag Manager, we can easily track popup views on our website—and get some more insights into our website interactions.

In this guide, we’ll learn how to set up a trigger for tracking popups, and how to link this trigger to an event Tag in Google Analytics.

Popup tracking is comprised of just two simple steps:

1. Setting up an element visibility trigger
2. Creating an event tag

So let’s dive in!

Set Up Element Visibility Trigger

We’ll start with our Google Tag Manager account by creating a new trigger. To do this, click on Triggers → New.

Using the Element Visibility trigger, we can detect whether something is visible on the viewer’s screen. So let’s select that.

Next, we need to give Google Tag Manager an identifier in the code (a CSS selector) of the element that we want to track.

A basic understanding of CSS and HTML will be helpful to complete this part of the configuration. But I’ll guide you step by step to make it easier for you.

Inspect the Elements that Are Visible in the Site

First, we need to inspect the element that is visible to us.

To do this, let’s go to the product page and open the popup that we’re tracking. Then, right-click on the popup window and choose Inspect.

This will open a panel on the right half of your screen. The Elements panel will be filled with different nodes on each line.

Try to go as high up on the panel as possible, then choose the node that allows you to inspect the popup.

💡 Top Tip: You can also try finding this node experimentally. Close and re-open the popup on the website. The node that changes in the console is the one that we want to inspect.

Some nodes might not have an ID in their code. In such cases, we’ll need to use the CSS selector for our popup tracking.

Selecting CSS Selector

First, we’ll find the node for the popup screen and copy its CSS Selector.  We can use the Document.querySelectorAll() command to find the element from the Document Object Model (DOM) tree.

You might need to check for a few classes before you find a class that returns just one element. Sometimes a class returns multiple elements. Using such a class might result in an error, so be careful!

Example 1 in the image shows several returned elements, while Example 2 in the image shows just one. This is what you should be looking for.

You can also close and re-open the popup to make sure that the class changes with the change in the element. If so, we can use it as a trigger to detect any changes in the popup and fire an event.

Once you have the correct element, copy the CSS Selector. This will be the text between the double quotes from the div class that returned your single popup element.

Then, paste this CSS selector to our new trigger.

In our trigger configuration, we’ll choose when to fire the trigger. Since we can have multiple elements on the same page, we’ll fire the event Every time an element appears on the page.

You’ll also select the percent visibility of the element required to fire your trigger. 50 percent is usually optimal for popups (at least half the popup must be visible for the trigger to fire), but this can vary according to your website’s needs.

There is also an option to Observe the DOM changes. These are the changes that happen on the website’s DOM tree.

When you click on this, you will be alerted with a warning that monitoring these elements might result in diminished site performance.

This doesn’t affect the loading speed of the website, but it will take some time for Google Tag Manager to monitor these triggers if multiple triggers fire at the same time.

So as long as we don’t have a lot of triggers running on our website, we are good to go with the Observe the DOM changes option.

You can also filter this trigger to fire only on certain elements, pages, or products. But for our example, we want to track all popups, so we won’t need to filter them.

After you have set up the information, give a name to your trigger and Save it.

Testing Your Trigger

Once the trigger is configured, we can test it out!

In GTM’s preview and debug mode, open a popup on your website. If you configured the trigger correctly, you’ll see an API call event appear in the preview console on the left side.

This data gets fired every time a popup appears on the screen.

All we need to do now is attach a Tag to this trigger so that we can send the data to a tracking tool. Let’s see how!

Creating an Event Tag

Go to Tags → New to create a new Tag, then select the Universal Analytics Tag type.

For this Tag, I recommend event parameters that will help describe the popup or campaign that you are tracking. In this case, I selected Event for the Track Type. For the Category I used Quickview, and for the Action, I used opened.

The Label of the Tag, however, can be any customized name that helps you track your campaign. For instance, you can use the name of the product for which the popup appears.

You’ll need to fetch the product name from the Data Layer to track it. This is a little more complicated, so we have a separate guide for Data Layer Variables if you want to do this.

Next, you’ll need to fill in your Tracking ID. You can find it in your Google Analytics account under the Tracking Info menu of the Admin section.

Finally, attach the element visibility trigger you created earlier. With this, our event Tag is ready to track popups.

Testing Pop-Up Event Tracking in GTM

Once you’ve set up popup tracking in Google Tag Manager (GTM), it’s essential to test it thoroughly to ensure accuracy.

Here’s a step-by-step guide:

1. Enable Preview Mode in GTM: This allows you to see in real time which tags are firing as you interact with your website.
2. Visit Your Website: Navigate to the page where the popup should appear.
3. Interact with the Popup: Whether it’s simply viewing the popup, clicking a link within it, or submitting a form, perform the desired action.
4. Check GTM Preview Pane: The bottom pane will show which tags have fired. Ensure that your popup tracking tag is listed.
5. Challenges in Testing: Some popups are set to appear only once or under specific conditions. If you’re not seeing the popup again:
   • Use “Empty Cache and Hard Reload” in your browser.
   • Clear cookies or use an incognito/private browsing window.
   • Check any conditions or triggers set for the popup to ensure they’re not preventing its display.
6. Verify in Google Analytics: If you’re sending popup tracking data to Google Analytics, ensure that the events are correctly registered in the real-time events report.

FAQ

Summary

So that’s it! This is how you can track popups on your website using Google Tag Manager.

This is a great way to track user engagement on your website. If you have an eCommerce website, it’s especially good for telling you which products are viewed most frequently. You can also gain insight into which products are bought after getting viewed.

After you track your data on Google Tag Manager, you can also analyze this data on Google Sheets!

Do you use popups on your website? How do you track popup views and other interactions? Let us know in the comments below!