What is an iframe? Here is a definition from TechTerms.com – An iframe (Short for inline frame) is an HTML element that allows an external webpage to be embedded in an HTML document. Unlike traditional frames, which were used to create the structure of a webpage, iframes for can be inserted anywhere within a webpage layout. Here is an eXample of an iframe:

<iframe src="http://sharpened.com/example.php" 
width="728" height="90">
</iframe>

Iframes are quite popular and handy because of technology providers like Facebook and YouTube that use iFrames to allow users to easily add content, apps, videos, and more, with essentially only one line of code on the user’s website. Quite handy, right?
However, when it comes to tracking and analytics – as you probably have already connected the dots and see where I am going with this – iframes SUX.

Let me explain why.

Having an iframe on your site is like having a website within your website. The iframe is served through a different domain, and the contents of the “inner website” are elsewhere. That means that if you want to add any tracking on the iframe, you are facing an issue – unless you own the serving source, which sits on the same domain as your site, and you can’t place tracking code on it. When it comes to web tracking, you would most likely use Google Tag Manager, so in that case, you need to place the same container you have on your site on the iframe. The problem is that in most of the times that is not going to be the case.

Recently, I had to come up with a solution to track interactions on an iframe – clicks on a video player in particular. I was faced with the issue that there was no way to place the GTM container on the iframe and “listening for clicks” was not an option since the clicks on the iframe were not detected by the GTM container on the website. The solution I came up with was to count interactions on the basis of mouse hover, with some conditions that would identify that the user “interacted” with the video in the iframe, and not just accidentally hovered over. So to get that extra bit of interaction insight, the next few lines go over the setup.

The setup is done in Google Tag Manager and consists of
1)Custom HTML Tag
2)Custom JavaScript Variable
3)Custom Event
4)GA Event Tag.

Details can be found below:

//Custom HTML TAG in GTM - Fire on All Pages
<script>
var timer;
var delay = 1000;
//src can be changed to work with other video providers
iframe = $('iframe[src*="brightcove');
iframe.hover(function() {
    // on mouse in, start a timeout
    timer = setTimeout(function() {
       // execute dataLayer push here
        var videoLink = iframe.attr('src')
        window.dataLayer.push({
          'event': 'iframeActive',
          'videoLink': videoLink
       });
    }, delay);
}, function() {
    // on mouse out, cancel the timer
    clearTimeout(timer);
});
</script>

The code above listens for hovers over the specified elements, and if the mouse of the user stays on top of the element for more than 1 second would do a dataLayer push with “iframeActive” value that we would use with our trigger. Place the code in a Custom HTML Tag that fires on All Pages:

We would also need a custom javascript variable in GTM to add an additional condition for the trigger that we would use to send data to Google Analytics.

//Custom JavaScript variable to count datalayer pushes with "iframeActive"
function(){
dl = window.dataLayer;
var counter = 0;
for(i=0;i<dl.length;i++){
  if(dl[i].event === "iframeActive"){
    counter++;
  }
}
return counter;
}

The code above would count how many times a dataLayer push occurred (how many times the user hovered over for more than a second over the video) and return a value. Using the code, create a custom javascript variable in GTM:

Once we have that, the next piece of the puzzle is the trigger. Create the following custom event trigger:

As you can see in the conditions, having the value from the custom javascript variable, would make the trigger fire only in the once and avoid having multiple events due to hover in and out.

The trigger would be used for the following event tag event tag in GTM:

When you consider the obvious flaws and caveats, the solution above is a good ‘bodge’ to gather some insight that you otherwise lose. One of the elements that can be adjusted is the timer, based on which an “interaction” is recorded. One second seems like the sweet spot for this, but a experimenting with the value is encouraged.