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