In late 2009 Google officially launched its asynchronous tracking code. The new snippet addresses 3 of the larger problem areas for the web analytics industry:
- Page load times
- Data collection & accuracy
- Error rates
As a general overview Google Analytics seem to have gotten it right – yey! Google Analytics never really had a problem with page load times but the new snippet improves the load times of even lightweight sites.
Data accuracy and error rates also seem to have improved…..when the code is implemented correctly – this brings me nicely to the purpose of this post. Despite a large level of information supplied by Google on how to migrate to the asynchronous code, web development departments still appear to be getting it wrong!
So here are some of the common problems I have witnessed and some simple code migration tips:
Common problem #1: Leaving the older code present
Although you might think it is silly, I have seen sites with the new asynchronous code implemented inside the HTML head and the older ga.js snippet implemented in the body.
Tip #1: Locate all ga.js code first
Get your site’s source code and use a decent search tool such as Notepad++ to scan each of your code files for “ga.js”, “UA-“ and “pageTracker”. This is a good way of quickly locating all the pages that contain your current Google Analytics code. Make a note of these pages as you WILL need to change them at some point. In the majority of cases you will be removing the code completely because the Google Analytics code moves from before the closing body tag to before the closing head tag. This leads me to:
Common problem #2: Incorrect code location
It’s amazing the number of different locations I have seen the asynchronous code located – I think my favourite was above the opening HTML tag
Sometimes it’s clear that web platforms have restricted the location of the code but where possible it should be placed in its correct location.
Tip #2: The async code should be place just before the closing HEAD tag
If you can’t get it in there get it as close to the opening body tag as possible.
Common Problem #3: Not using the migration guide
Ok this is a bit of a cop out, but on some sites it looks like developers just guessed what code needed to be present. Google provides the migration guide as a reference, you can look at what code you have on your current site and what the equivalent asynchronous version is. This leads me to:
Tip #3: Use the migration guide
The migration guide from Google is a great reference if you are unclear about what code should go where. The one area it doesn’t cover and our final common problem:
Common Problem #4: Incorrect snippet order
A standard ga.js snippet looks like:
<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”>
try {
var pageTracker = _gat._getTracker(“UA-XXXXXX-1″);
pageTracker._trackPageview();
} catch(err) {}</script>
It is essentially in 2 parts:
[TRACKING CODE] being:
<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>
[TRACKING ELEMENTS] being:
<script type=”text/javascript”>
try {
var pageTracker = _gat._getTracker(“UA-XXXXXX-1″);
pageTracker._trackPageview();
} catch(err) {}</script>
From an overview perspective the code is in the following order:
[TRACKING CODE]
[TRACKING ELEMENTS]
The same is NOT true of the asynchronous code. The async code is still essentially in 2 parts but the parts are in reverse order to that of the ga.js.
Tip #4: Ensure the code order is correct
The async code still has the same 2 parts:
[TRACKING ELEMENTS] being:
<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
[TRACKING CODE] being:
(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>
But the orders are reversed. The tracking elements are now in front of the tracking code.
The order of the tracking elements is also important with the _trackPageview call being the last tracking element on all basic installations and the majority of advanced ones. This brings me to my final tip:
Tip #5: Ensure tracking elements order is correct
Having an incorrect order for the tracking elements is a sure fire way to have inaccurate stats. As a general rule the _trackPageview call will be the last of the tracking elements and the _setAccount call will generally be the first.
If you are in doubt, unsure or just don’t know – ask a Google Analytics Certified Professional (GACP) for advice – most (including ourselves) will offer Google Analytics advice completely free.