Google Analytics + Multiple Domains + iFrames FTW

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 iFrame 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.

Another Technique

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.

If you have thoughts on Google Analytics and iFrames you can leave them below.

This entry was originaly posted on June 23rd, 2013, it was last edited on March 5th, 2019 and is filed under: Technology and tagged: Google Analytics, HTML, JavaScript.