Google Analytics Tracking With iFramed Content On A Different Domain

Recently a client asked for some help with their Google Analytics tracking. They have been trying to get it working on and off for the last year without much success.  They have a website that contains a booking engine that is provided by a third party. This is hosted on a different domain from their main website. They wanted to be able to track a visitor all the way through the booking process. So, being able to see where they were referred from (Google Search, Adword etc.), what pages they visited on the main website, which pages on the booking engine they visited, and finally the value of any booking they made.

Without this information they found it pretty impossible to gauge the ROI from any marketing campaigns they ran.

Liking a challenge I said I’d help them out.

I like to think I know my way around Google Analytics, having had some excellent training from iVantage last year, and being able to put that into practice on all of my clients site without issue. However I’d not really worked with tracking content within iframes before.

Now let me start with being open and honest, a lot of my help came from this great website (here). Via Google Translate I was able to work through the examples and get my head around it. However I thought I’d rewrite it here in English as I did come across a couple of gotchas that might help someone else.

Why can’t I just put the Google Analytics tracking code on the main website and on the iframe site?

If we take the following code as an example:

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

try {

var pageTracker = _gat._getTracker('UA-XXXXXX-X');

pageTracker._setDomainName('www.yourmainwebsite.com');

pageTracker._setAllowHash(false);

pageTracker._setAllowLinker(true);

pageTracker._trackPageview();

} catch(err) {}

If you put this on the main website, and the iframe site – the tracking will work. You’ll see hits appear in Google Analytics for each of the pages. However, as the visitor browses between the main website, and the iframe content they will not be counted a one single visit. Instead, when they hit the iframed content they will marked as a brand new visitor with a referrer of your main website (and not the original Google search for example). So pretty useless really.

Why does this happen?

Google Analytics does not share cookie information between different domains (for the obvious privacy reasons!). When you visit www.yourmainwebsite.com it creates a cookie on your computer tied to that domain name that contains information about where you came from (i.e. Google search), the keyphrase you entered etc. This is what it uses to feed back to Google Analytics. When you load the iframed content it creates a brand new cookie for that domain name (www.iframedwebsite.com) without being able to access the cookie from the parent website. So it is impossible for Google Analytics to know that you want the referrer information (i.e the original Google search performed) to be used.

Ok, what is the fix?

You need to load the iframe content in a way that tells Google Analytics to pass the cookie information from the parent (www.yourmainwebsite.com) to the iframe domain (www.iframedwebsite.com).

This is done through a bit of Javascript

function loadPage(){

document.getElementById('myiframe').contentWindow.document.location.href = pageTracker._getLinkerUrl('http://www.iframedwebsite.com');

}

Then to call this script you just need to add it to the body tag.

What this does is tell Google Analytics to load the iframe and pass across the contents on the parents website Google Analytics cookie to it.

The code you need to install on the iframed website is pretty much identical to the main website.

var gaJsHost = (("https:" == document.location.protocol) ?

"https://ssl." : "http://www.");

document.write(unescape("%3Cscript src='" + gaJsHost +

"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

try {

var pageTracker = _gat._getTracker('UA-XXXXXX-X');

pageTracker._setDomainName('none');

pageTracker._setAllowHash(false);

pageTracker._setAllowLinker(true);

pageTracker._trackPageview();

} catch(err) {}

You just need to change the SetDomainName to ‘none’ as it will use the information passed across from the main website.

What are the gotchas you mentioned earlier then?

Page 1 of 2 | Next page