Popup Tracking with Google Tag Manager – The Tutorial

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. 

This process is comprised of just two simple steps: 

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 TriggersNew

Creating a new trigger in Google Tag Manager

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

Element Visibility trigger for Google Tag Manager

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

Inspecting the popup element on the demo eCommerce store

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.

Checking different classes with multiple elements to find a class returning one element

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.

Selecting a CSS selector for popup tracking in Google Tag Manager

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. 

Setting up element visibility trigger for tracking popups in Google Tag Manager

There is also an option to Observe the DOM changes. These are the changes that actually 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 actually 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. 

Checking Observe the DOM changes option in a new trigger for popup tracking

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. 

Element visibility fires data in the preview and debug console of Google Tag Manager

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 TagsNew to create a new Tag, then select the Universal Analytics Tag type. 

Creating a Universal Analytics event Tag for Google Tag Manager

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

Adding the event parameters Track Type, Category, and Action for a universal analytics Tag in Google Tag Manager

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. 

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. 

And 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! 

JOIN US!

Master Data & Analytics with Measuremasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Sophie Casey
Sophie Casey
12 days ago

Hi, this is great thanks!

I’ve tried it with a Kartra popup checkout box but it doesn’t work, I can’t find any way of tracking that – nothing appears at all in debug mode after clicking the button.

Is it because it loads as app.kartra.com and they make it private?

Is there any way at all to track Kartra enhanced e-commerce with GTM?

Thanks so much,

Sophie

Blog Categories

Join 30,000+ marketers getting exclusive resources and our latest content!

now it's time to

Start measuring like a master

Itching to jump into the world of MeasureMasters? This is what you have to look forward to.