GTM Solutions Corner #2: How to track clicks on an iframe using GTM

This is part 2 of a semi-regular series, dedicated to reusable GTM solutions for scenarios or issues we’ve encountered more than once. Last time we looked at how to fire Google Analytics event to keep track of your Google Optimize experiments in GA, and this time we’re looking at tracking clicks on iframes. We have encountered, several times, the situation of a client wanting to track clicks on an iframe. While we can’t do much about interactions with stuff within the iframe without having GTM available on it, we can, with a bit of cunning, set up a solution that detects clicks on the iframe.

Here, we’ve got a bit of code that you’ll want to set up as a custom HTML tag (don’t forget to add the open-and-close script tags to the top and bottom!) to fire on DOM Ready on all pages (or whatever pages are appropriate). It sets up a few variables to keep track of things and select iframes, adds a listener to the window for the ‘blur’ event (when the window loses ‘focus’) and listeners for ‘mouseover’ and ‘mouseout’ events on iframe elements on the page. Taken together, the solution checks when a user is hovering over an iframe and if the window loses focus it fires a data layer event. Since we can’t track clicks directly, using the loss of focus as a proxy is a clever workaround!

We begin by creating a function:

(function() {Code language: JavaScript (javascript)

Then we set up the myConfObj object, which stores the user’s current “state”—whether they’re hovering over an iframe or not, and the iframe’s ID.

var myConfObj = {
iframeMouseOver: false,
iframeID: 'not found'
}Code language: JavaScript (javascript)

Then we select all iframes on the page to be tracked. You will probably want to choose a more specific selector!

var frames = document.querySelectorAll('iframe');Code language: JavaScript (javascript)

Here, we set up the listener for the window losing focus, firing a data layer push with optional info, when the window loses focus but only if the user was hovering over the iframe at the time.

window.addEventListener('blur', function() {
if (myConfObj.iframeMouseOver) {
dataLayer.push({
event: 'ga-event',
eventCategory: '', //YOUR CATEGORY HERE
eventAction: '', // YOUR ACTION HERE
eventLabel: '', // YOUR LABEL HERE
eventValue: '' // YOUR VALUE HERE
});
}
});Code language: PHP (php)

Then we need to determine whether the user was hovering over the iframe or not, so we loop through all the iframes on the page (again, your selector may differ)…

frames.forEach(function(element) {Code language: PHP (php)

and listen out for mouseover on them. When it’s detected we set the value of the myConfObj iframeMouseOver property to be ‘true’, and the iframeID property to the iframe’s ID. You could always change it to something else if it’s more appropriate.

element.addEventListener("mouseover", function(event) {
myConfObj.iframeMouseOver = true;
myConfObj.iframeID = element.id; //OR WHATEVER VARIABLE IS APPROPRIATE
});Code language: JavaScript (javascript)

Then to make sure we catch the user leaving as well, we add a listener for mouseout. Then we close all the brackets and call the function.

element.addEventListener("mouseout", function(event) {
myConfObj.iframeMouseOver = false;
 });
 });
}())Code language: JavaScript (javascript)

Once you’ve added that, you’ll need to configure a GA tag to fire on the data layer push—then you’re done!  This solution is also available on Github, for those of you who don’t want to copy it out of this blog post in little bits! The Github solution also includes commented-out lines which can be used to debug the solution if you’re having trouble getting it working. Please leave a comment if you’ve got any questions or ideas for improvement!