Tracking clicks within iframes with Google Analytics and jQuery
06/09/2013 | Written by | Categories: Analytics Set-up

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:

  1. Using social sharing plugins like shareThis
  2. 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:

Conclusion

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?

11 responses to “Tracking clicks within iframes with Google Analytics and jQuery”

  1. Ulrik says:

    Hi there,

    Great post. Did you remember to load the google analytics script from within the frame, once the page loaded and appkly cross domain tracking to the frame? If not, you wikll create a new visit for a new visitor, once a new visitor clicks the button in the frame.

    If you add cross omain tracking to the frame, it will send the visitorID to the framed domain and remember the __utma cookie information, thus not breaking up the visit and counting two visits insead of one. This will enable you to connect behavior on your site to framed button clicking.

    Anyway, it might already work for you 🙂

    Best Ulrik, Copenhagen!

  2. Florian Giudicelli says:

    Hi Ulrik,

    Thanks for your comment, it’s nice to hear from Copenhagen! Indeed, iframe tracking can easily mess up your data. In this particular case, there is no problem with the count of visits: if you click on the second set of social media buttons (to send several events), you will notice that the last value of the __utma cookie doesn’t change.

    Cheers,

    Florian

  3. […] the same page. The actual code can be seen by viewing source on this webpage. I also came across an even more elaborate technique if the one I use doesn’t cut […]

  4. Jeff says:

    Hi Florian,

    Great article, I have used this method and it working like a charm, but I’m having an unexpected problem and I’m quite sure why. What’s happening is when I implement the first tag (enabling the plugin) via GTM, it’s displaying the code itself on the bottom of the page below all of the footer elements.

    Obviously something is wrong, but I don’t know what it might be. Any ideas?

    Thanks!

    • Florian Giudicelli says:

      Hi Jeff and thanks for your nice comment!

      Hard to find the right answer without diving into the code but I would suggest trying to first call the plugin outside GTM (below the jQuery library and above the tag container). If it does work, you might try to use this calling line as a custom tag (instead of copying the content of the script). Also please remember that it was more an experiment, I wouldn’t recommend this script to my clients without some proper QA by a dev team!

      Cheers,

      Florian

  5. Brendan says:

    I implemented your idea, and used the GA Debug extension in Chrome to confirm that the events are firing, but after 2 days I haven’t seen anything in GA reports.

    How would I go about debugging from here to see why that is? Have you seen a large lag before events begin showing up in your reports?

  6. Marcus says:

    Hi really good guide, but would need to assure myself of one thing before trying this out.
    Do you have any updated information on how well this works with different browsers like IE and Safari?

    Cheers Marcus

    • Florian Giudicelli says:

      Hi Marcus,

      Thanks for your question. Unfortunately, I never had the chance to test this jQuery plugin with other browsers than Firefox and Chrome. Have you encountered any issues trying this method with the mentioned two browsers?

      Best,

      Florian

  7. Karthik says:

    Hi Florian,

    Thanks for the great article. Can you please mention what firing rules did you use for the second GTM tag?

    Is it to fire when there is click on id/class?

Leave a Reply

Your email address will not be published. Required fields are marked *

Looking to improve your digital analytics or conversion rate optimisation?
Contact us today on +44 (0)20 7148 5970
info@leapthree.com

Alternatively, come visit us in London and we’ll buy the coffee!
Get in touch
CONTACT FORM
Leave us a message
Use the form below to leave us a message.



Close
Ayima
Lindsey Street
London
UK