A few days ago, I needed to implement Google Analytics click events within iframes. I was aware that “iframe tracking” often rhymes with “pain in the backside” but actually a few solutions do exist. One of my best finds was this great post from Doug Hall (Conversion Works):
It explains clearly why tracking iframe contents can be challenging. Social media buttons are a good example because most of them are pushed from a 3rd party domain. Two solutions are provided at the end:
- Using social sharing plugins like shareThis
- Using custom jQuery scripts like Goldon’s iframeTracker plugin
I tried the second one and I thought it could be interesting to share how to play around with this jQuery script using Google Tag Manager and Universal Analytics.
As a reminder, all credit from this post can be attributed to Doug Hall and Goldon – I have just applied here their recommendation.
The problem with tracking iframe contents
Let’s imagine I wanted to trigger Google Analytics events when visitors click on the following social media buttons:
(for information this is not a plugin, all buttons have manually been implemented, I’ve just used the standard source provided by each social media platform)
My first thought would be: “easy-peasy, a bit of jQuery within Google Tag Manager and it should work!”:
In reality, it’s a bit more intricate. If we try clicking on the above buttons and look at the result with a HTTP Header reader like HttpFox or Charles, we will notice that it works fine for Pinterest and LinkedIn but it doesn’t for the other ones (which are embedded through iframes):
All right, click tracking doesn’t work on the first three buttons because of lovely iframes but are we giving up? I’d rather “be more dog” like the last O2 TV ad and jump to grab the stick by trying other solutions like Goldon’s jQuery Plugin.
Using the jQuery Plugin iframeTracker
Instructions and technical details for this plugin can be found on GitHub. Basically, we just need to follow two steps to track clicks within iframes with Google Tag Manager and Universal Analytics:
1- Adding a first tag to enable the plugin
We create a first tag containing the source of the file jquery.iframetracker.js between <script></script> and we select a rule to fire this script only on pages containing the iframes we want to track:
2- Adding a second tag to enable the tracking
Then, to track clicks, we need to deploy another script with a jQuery selector calling the plugin. Here is the structure to use (more options are available on GitHub):
Let’s try to apply this on the previous example. You’ll find just below the same exact buttons, the only change is that I have added the class “iframetrack” on Twitter, Facebook and Google+ to select iframes I wanted to track more easily:
Here is for information the second tag I have set up within my Google Tag Manager container to enable the tracking:
If we now try to click on the below buttons and look at the information sent to Google Analytics, we will notice that this time all 5 social buttons are tracked:
It’s great to see that there are ways to track clicks within iframes. This solution might not be 100% perfect, I haven’t yet tried this plugin on many browsers but it looks to work fine on Firefox and Chrome. It implies using jQuery but it can be helpful to track clicks on elements embedded through iframes such as social buttons, video players, ads, etc.
Now your turn, what do you think about this plugin? Have you already tried it? Would you recommend other solutions to track interactions within iframes?