Muschamp Rd

Google Analytics + Multiple Domains + iFrames FTW

June 23rd, 2013
Google Analytics logo

I’ve spent a lot of time reading Google Analytics documentation both official and unofficial this week, so much so that I joked I should put “ninja” or “guru” on my resume as that is so much more professional than my middle name…

First if you have to do anything more than include the basic Google Analytics’ JavaScript inside the HTML head tag, download Google Chrome and then download the official plugin for debugging Google Analytics cookies. Any Google Analytics tutorial that doesn’t advise that as step one is going to result in you wasting time and effort.

If you want to track what goes on inside an iFrame when the content is hosted on a domain you don’t control, say in some 3rd party e-commerce widget there are three ways to do this with Google Analytics:

  1. The old way documented here in French.
  2. The asynchronous way which I document below.
  3. The analytics.js way which is the future of Google Analytics.

In order to track events and e-commerce purchases inside an iFrame it is better if you switch to using Google’s javascript asynchronously.  This is the best tutorial/explanation I found online prior to building my own proof of concept/test. What I did is based on previous official and unofficial examples, but I also made a point of including an e-commerce transaction and an event tracking push example inside my iFramed content.

Besides using the Google Analytics debugger plugins, my biggest piece of advice is make sure you use the same tracking code on both domains. Tracking codes look like this UA-XXXXXXX-X, with the X’s being digits.  It also helps if you have a development tracking code so your test isn’t overwhelmed by actual traffic. You also need two domains to properly test this.

primaryDomain.html

This is your domain, the one you care about and are using Google Analytics to monitor.  You need the Google Analytics JavaScript to look like this:

secondaryDomain.html

This is the iFramed content. You probably don’t have total control over this domain, but you need to use some content, feature, or widget they provide. In order for Google Analytics to work properly you need to do more than just include the default JavaScript snippet. You have to modify your primary domain HTML head tag content to ensure that 3rd party content is tracked properly. In addition to Google’s JavaScript you need a P3P meta tag to encourage Internet Explore to allow you to track with cookies in this manner.

This sample code works, it will fire off four tracking beacons, one for the parent, one for the iFramed content, one for the e-commerce transaction, and one for the item in the e-commerce transaction in this case two copies of “Brave New World”. If you click the link it will fire off another Google Analytics tracking event (the fifth of the session), this time it will record a play of a promotional video.

With this minimal working example hopefully you have to spend less time getting this to work in the real world.

Update

Here is another useful example on how to properly track subdomains with Google Analytics. I’m in the process of updating all my old static content which still used urchin.js to the asynchronous tracking method. I also planned to switch my previous WordPress Google Analytics plugin to Yoast’s but something has gone wrong with “authentication”. My blog is on a subdomain. I like subdomains but they make Google Analytics and Webmaster Tools a bit more complicated.


  • Pingback: 8 Years of Google Analytics – Muskblog()

  • slickorange

    Great tutorial thanks!

    I have very limited access to the secondary domain as I have to work through the third party shopping cart’s developer. Would it be possible to include the necessary Google GA code with Google Tag Manager? That way I can change the code by myself without needing assistance from the developer right?

  • The reason we had to develop this elaborate solution is because of 3rd party booking engine. We had to negotiate for them to implement their part of the solution too. We still have problems with this as not every 3rd Party Booking engine will modify their header, the other problem is when the booking engine switches subdomains inside the iFrame. Basically I am not a fan of iFrames. It is possible Universal Analytics might help, but I don’t think Tag Manager will help at all. I did a lot of research before I made the demo and wrote up this blog post.

    It is best to have complete control over your conversion funnel, but if that is not possible in your industry and on your budget, you have to jump through hoops or just live with inferior data. Google Analytics is free, it is basically supported by all the people who use AdWords, but the alternatives to it Omniture or whatever aren’t necessarily better. The big new thing is different ad networks like Facebook and PointRoll wanting there own conversion pixels and once again you have to go to a 3rd Party and get them to modify their headers.

    So you’re definitely better off not using an iFrame. You’re also better off controlling as much of your conversion funnel as possible, otherwise you have to do crazy edge case workarounds like I detailed above.

    Good Luck!

  • Pingback: 10 Year Blogiversary – Muskblog()

Posts on Muskblog © Andrew "Muskie" McKay comments not necessarily so...
CFA Institute does not endorse, promote or warrant the accuracy or quality of Muskblog. CFA® and Chartered Financial Analyst® are registered trademarks owned by CFA Institute.