Google Analytics Asynchronous Snippet for the Head Element

Published 2010 February 19th, Last Modified 2010 March 25th

The below snippet worked with my test page where the current asynchronous snippet when placed in the head element would cause IE6 to stumble with “Operation Aborted”. The test page markup can be found at the bottom of the post.

The snippet:

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
  })();
</script>

Please, only use this snippet to test it. Use the one Google provides with instructions on their async page.

Feedback would be appreciated as the snippet has not been tested on a working site as of writing this post.

The problem I hoped to solve

Google Analytics guide people to insert the asynchronous snippet at the top of the body element:

“Insert the asynchronous snippet at the top of the <body> section of your pages.” –Asynchronous Tracking Installation Instructions 2010 02 19

The reason for this was that although the asynchronous snippet could go in the head element, there was a potential problem for IE6 users. The problem was given in the help forum post Async snippet causes IE6 to close with “operation aborted” where a fix was offered:

“The fix is to either make sure all your tags are closed (<base href=”…”>  becomes <base href=”…”></base>) or you can move your snippet to the top of the <BODY> section instead of putting it at the bottom of the <HEAD>.” – Brian Kuhn

And to keep it simple they opted for inserting the code at the top of the body section.

With Brian Kuhn’s answer in mind my snippet is probably not needed, but it worked on my test page so I posted it here.

Test page markup

IE6 stumbled over this one

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing</title>
<base href="http://www.thunderpants.org/" />

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
  })();

</script>
</head>
<body>
<h1>Testing</h1>
<p>asdiuh asdiuh asdiuh asdihu ausdiuhas diuahsd iasudh aisduh asdiuhasd</p>
<p>asdiuh asdiuh asdiuh asdihu ausdiuhas diuahsd iasudh aisduh asdiuhasd</p>
<p>asdiuh asdiuh asdiuh asdihu ausdiuhas diuahsd iasudh aisduh asdiuhasd</p>
<p>asdiuh asdiuh asdiuh asdihu ausdiuhas diuahsd iasudh aisduh asdiuhasd</p>
</body>
</html> 

IE6 seemed fine with this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing</title>
<base href="http://www.thunderpants.org/" />

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
  })();

</script>

</head>
<body>
<h1>Testing</h1>
<p>asdiuh asdiuh asdiuh asdihu ausdiuhas diuahsd iasudh aisduh asdiuhasd</p>
<p>asdiuh asdiuh asdiuh asdihu ausdiuhas diuahsd iasudh aisduh asdiuhasd</p>
<p>asdiuh asdiuh asdiuh asdihu ausdiuhas diuahsd iasudh aisduh asdiuhasd</p>
<p>asdiuh asdiuh asdiuh asdihu ausdiuhas diuahsd iasudh aisduh asdiuhasd</p>
</body>
</html>