Use Google’s Asynchronous Tracking
We all need some kind of analytics for our web projects otherwise it’s like selling a product and not knowing how much profit you’re making.
Google Analytics suits most people as it has a huge range of features and, of course, it’s free.
The issue that has plagued Google Analytics is how (or more specifically where) you placed its tracking code into your html. In a similar way to Twitter, if you use Twitter’s own method of displaying your Tweets on your web page, the two required javascript files that you need to include in your html are always recommended to be placed at the bottom of your markup, just above the closing </body> tag. This is done so that your site can render everything properly and then loads your Tweets last. It makes perfect sense as if there’s an issue with the Twitter feed, it doesn’t hinder your site’s loading time.
The same principle applies to the Google tracking code. As it needs to load a javascript file (ga.js) and sync with Google, this could have an impact on your load time.
Google has a new(ish) code snippet that optimises how browsers load the ga.js file. The syntax is different but the tracking customisations are exactly the same. It allows the code to be placed within your head tags along with any other javascript file links and starts running in the background as soon as the page starts to load. The other obvious advantage is that Google’s tracking beacon will be sent a lot sooner before the user leaves the page.
Overall its a more efficient and semantically better way of using the Google tracking code in your markup. Let’s take a look at how to set it up.
Step 1
Remove the current tracking code from your page (if you have any customisations then copy it to a text file first to be safe).
Step 2
Go and grab the new code snippet: http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html and paste into the bottom of your <head> section. Then get your unique web property ID (this is shown when you first log into your analytics account and is a code which looks like “UA-1234567-1”) and paste it in place of “UA-XXXXXXX-X”.
Step 3
Place any customisations back in using the asynchronous syntax (check the usage guide here: http://code.google.com/apis/analytics/docs/tracking/asyncUsageGuide.html) and you’re good to go!
Migrating to the new tracking code is quick and easy and will provide another tool in increasing your site’s load time and also pushing your analytics accuracy up a notch.
