Google Analytics, iFrames, and Multiple Domain Setups

Wednesday, February 24^th 2010 no comments

Google’s FAQ and help pags do a horrible job explaining how to use the tag other than pasting it into your code. Tracking for cross-domain and frame/iframe scenarios are not explained. There is documentation on the Google Analytics javascript, though, and provisions for doing the complex tracking. Here I will try to explain a common scenario I’ve had to deal with recently:

The Scenario

You have a parent page with its own tracking code: UA-xxxxxx-x.
The parent page has an iframe in it with a child page.
The child page has its own tracking code as well: UA-yyyyyy-y.
You want to independently track both pages.

Parent Page

Because we are dealing with cross-domain cookies, your page needs to serve a P3P header or link to a P3P policy to create the correct cookies in Internet Explorer 7 and 8 (and possibly Safari).

P3P Policies

P3P is one of the W3C‘s ~~failed~~ web standards. It was implemented in Internet Explorer 7 and 8, (and possibly Safari,) and prevents browsers from creating cross-domain (third-party) cookies in the default (Medium) privacy setting (See Internet Explorer -> Internet Options -> Privacy Tab -> Settings).

To create a P3P policy in ASP.net, PHP, JSP, ColdFusion, or through Apache’s .htaccess, you only need to add some code to the top of your page. See Viral Patel’s page (and the comments) for the correct header for your pagetype. For IIS settings, see Microsoft’s support page or Scott Hanselman’s blog post. If you aren’t using IIS, Apache, or server-side scripting, you can create an XML policy file and include it into the <head> section of your page using the <link> tag. The proper code, and more information on P3P is available in the W3C’s documentation.

Parent Page Code

Following the P3P header, here is the code for the parent page (explanation is in the comments within).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Parent Page</title>
<!-- add your P3P <link> here if you aren't using server-side scripting to
	deliver a header -->
</head>
<body>
<h1>Parent Page</h1>

<!-- Here is the iframe, do not specify an src. You'll see why later. -->
<iframe height="300" width="400" id="childPage">
	<p>Your browser does not support inline frames.</p>
</iframe>

<!-- As usual, insert ga.js and run pageTracker before the end of BODY. -->
<script type="text/javascript">

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"));

</script>
<script type="text/javascript">

/* We are renaming pageTracker to parentPageTracker for clarity. */
try {
	var parentPageTracker = _gat._getTracker("UA-xxxxxx-x"); 

	/* The parent domain is the only one setting a cookie, so we have to define
		the cookie parameters here: */
	/* Don't include "www" or "subdomain" -- the period in front means the
		cookie will apply to them as well. */
	parentPageTracker._setDomainName(".PARENTDOMAIN.COM");
	/* Enable the linker, which is used to pass cookie information to another
		domain  */
	parentPageTracker._setAllowLinker(true);
	parentPageTracker._setAllowHash(false);

	/* Run the tracker: */
	parentPageTracker._trackPageview();
}
catch (err) {
}

/* The url of the child page (iframe src) is on a different domain.
	We have to let google analytics know about this so the src must be inserted
	with javascript. We're using the linker we enabled above: */
var iframe = document.getElementById("childPage");
iframe.src = parentPageTracker._getLinkerUrl("http://MY.CHILDPAGEURL.COM/");  

/* Now we add a second pageTracker for the child, called childPageTracker */
try {
	var childPageTracker = _gat._getTracker("UA-yyyyyy-y");

	/* Setting the domain to none allows us to track across different
		domains. */
	childPageTracker._setDomainName("none");

	/* Allow the linker again, in case the iframe has an iframe that wants to
		be tracked as well: */
	childPageTracker._setAllowLinker(true);
	childPageTracker._setAllowHash(false);
	childPageTracker._trackPageview();
}
catch (err) {
}

/* You can continue adding if you have more analytics codes to track-- e.g.
try {
	var thirdPageTracker = _gat._getTracker("UA-zzzzzz-z");
	thirdPageTracker._setDomainName("none");
	thirdPageTracker._setAllowLinker(true);
	thirdPageTracker._setAllowHash(false);
	thirdPageTracker._trackPageview();
}
catch (err) {
}
*/

</script>
</body>
</html>

Child Page(s)

The child page should contain the standard Google Analytics code. No modifications need to be made for the child page (iframe contents). Lucky you.

Conclusion

Hopefully this will soon be outdated with the adoption of the more optimized Asynchronous Tracking code and a better help document.

hokuten.net