Google Analytics is a fantastic, totally free,
web tracking service provided by
Google. It works by embedding a
Javascript include at the bottom of your page which loads Google’s tracking code. The code then passes all your tracking information to the
Analytics cloud where it is digested and returned in the
web-app.
The Problem
The code has to be included just before your closing body tag, this is because Google doesn’t want to hold up your page loading while it crunches this data, by placing it there it guarantees 99% of your page has finished loading. This works perfectly in almost all cases but there have been exceptions. The only time i have come across a problem was when i was testing a site on
Internet Explorer 6. I kept receiving this error:
'_gat' is undefined
This can only be created when the code tries to call the
Analytics code before it is launched. Basically, it’s is trying to call the function _gat too soon. Google have tried to fix this by adding a
Javascript ‘try’ function.
<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("UX-XXXXXX-X");
pageTracker._trackPageview();
} catch(err) {}
</script>
This helps as the code ‘tries’ to run the function and if it can’t then it runs the catch command. This works because it doesn’t create any other errors and the site will continue operating normally. The only problem is no tracking information will be passed.
Fixing it with Mootools
Firstly, more and more websites are using
Javascript to provide better
interactivity and
functionality so there is a good chance you are already using a
library in your site. Secondly they provide
core functions which can detect when the page’s DOM is ready and when the page itself has actually finished loading. There a couple of things that can improved by converting this code to use a popular
Javascript framework such as
Mootools. Page load speed should be improved as we try to insert the tracking code after the page has completely finished loading and has been initiated. As a result we can also hope to improve the code performance by making sure the code has been downloaded before trying to run it.
Using
Mootools we simply add a new
Javascript assets into the page using the ‘addEvent’ function and then run the
analyitics function calls when it has loaded.
window.addEvent('load', function() {
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
new Asset.javascript(gaJsHost + "google-analytics.com/ga.js", {
onload: function() {
try {
var pageTracker = _gat._getTracker("UX-XXXXXX-X");
pageTracker._trackPageview();
} catch(err) {}
}
});
});
As you can see, I have left the try function in, this is to protect against the same problem we faced initially. Only this time the chance of it happening has greatly reduced. Another benefit of using this method is that you can remove the tracking code from your HTML template or masterpage. Now it is simply added into your
Javascript include instead. If you use
analytics to track your
AJAX calls then it helps that all your code is in the same place!
I hope you find this useful, please leave a comment if you know of any improvements or think you know a better method.
Tags:
analytics,
google,
ie,
mootools