Faster, Better, Stronger. The GA Async Tracking Code

You may have heard that Google will begin to use site speed when calculating web rankings. This generated a lot of buzz, but according to Matt Cutts,

fewer than 1% of search queries are affected by the site speed signal in our implementation and the signal for site speed only applies for visitors searching in English on Google.com at this point.”

This may be the beginning of Google’s use of site speed. It’s probably a good idea to think about speed when designing your site.

How GA can Slow Your Site

One thing that can potentially slow your site down is the Google Analytics tracking code. Specifically, the ga.js library and how the browser loads the file.

When a browser renders a page it literally starts starts to display the HTML from the top of the page and moves to the botton. When it hits a JavaScript file, like ga.js, it requests the file from the remote server.

Then it waits.

And waits.

And waits.

Once the file has been pulled into the browser it continues to process the HTML.

You can see the issue here, the browser could wait a long time for the JavaScript file depending on the visitors proximity to the server, the visitor’s bandwidth, and a bunch of other factors most of which you can’t control. Waiting for a page to render is a bad user experience. I know I don’t like to wait!

There’s a great example of how a remote file can make the browser slow down on the High Performance website blog.

Google tries to mitigate load-time issues by geo-loadbalancing ga.js, so the visitor’s browser will automatically contact the closest data center to load the ga.js faster.

It’s also best to place the ga.js at the bottom of your pages just in case there is an issue with the communication between the data center and the visitor’s browser. By placing the ga.js at the bottom of the page all of the content has already rendered, so the visitor won’t experience a blank or partially loaded pags.

While placing the GATC at the bottom of the page can mitigate some issues it can cause others.

First, it is possible for visitors to navigate away from the site before data is sent to Google Analytics. This leads to missing data.

Second, if you need to do any advanced tracking, like ecommerce or events, you may need to move the ga.js to the top of the page thus negating the benefit from putting it at the bottom of the page. This can also complicate your implementaiton because some pages may have the code at the top of the page and some might have the code at the bottom of the page which is a maintenance nightmare.

Using the new async code can help mitigate both of these problems.

How the Async Code Helps

First, The asyncronous version of the tracking code utilizes HTML 5 and the modern browser’s ability to load files asyncronously. This means that the browser can load files like ga.js while it continues to render the page for the visitor.

Second, the async code let’s us send data to Google Analytics before the ga.js has loaded in the browser. Technically we’re not sending the data to Google, but we are executing the commands that generate the data. The broser just holds the commands until the ga.js has completely loaded. Then the commands are executed (in the order in which they were added) and the data is sent to Google.

In the old days (like last year) we had to wait for ga.js to load before we could call any GA code. Not any more.

So the Async code is a good thing.

The big question is, should you use the async tracking code?

Well, if you’re concerned that Google Analytics is slowing down your site, and that it may be impacting your search rankings, then yes, use the async code. There are a number of free tools that you can use to test how long it takes ga.js to load on your site. (YSlow, Page Speed, etc.) Use them to determine if GA is slowing down your site.

If you decide to use the async version of the code there are a few things you should know.

Using the async code is slightly different than using the standard tracking code. Let’s look:


< script>
//
// This section creates the queue
//
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);

//
// This section calls the ga.js
//
(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);
})();




The async code can appear anywhere in a page. But it’s best to place it at the immediately after the opening BODY tag. This let’s you add commands to the queue as soon as the page starts to render.

Some of the GA documentaion states that you can place the code in the HEAD tag. But this can cause some JavaScript issues with IE6. If you have a lot of visitors that use IE6 don’t put the code in the HEAD tag.

If you’re still leary about putting the code at the top of the page you can split the tracking code into two sections. You can place the first part of the code at the top of the page and the second part, the calls the ga.js, at the bottom of the page.

While this let’s you add commands to the queue immediately it is still possible to miss some GA data becayse the ga.js will be the last thing the browser requests. But the choice is up to you.

How the Code Works

Digging into the code a bit more, the first thing you’ll notice is the call for the ga.js is the second part of the code. This is the opposite of the standard tracking code. The async tracking code begins by creating the queue to store commands. Then the tracking code calls Google’s servers for the ga.js file.

The great thing about the queue of commands is you can add things to the queue whenever you want, even if the ga.js has not finished loading. This is what makes it possible to add GA commands at the top of a page.

The second section of code is the request to Google’s servers for the ga.js. It’s the exact same ga.js that’s used in the standard tracking code, it’s just pulled into the browser in a different way. Notice the ga.async=true part of the code? That’s the part that tells the browser it should load the code asyncronously. The browser not execute any commands in the queue until after the ga.js has loaded.

If you’ve got a basic site then all you need to do is add the async code to your pages and you’re good to go. You don’t need to worry about adding items to the que, etc.

But if you’re doing any advanced tracking, like virtual pageviews, events or ecommerce you need to know how to add items to the queue.

How to Add Items to the Queue

Adding items to the queue can be done a number of different ways. The easiest way is to “push” things onto the queue. This is done with the push command, as shown below.


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


If you wanted to add an event to the click of a link you would push the command on to the queue like this:

< a href="onClick='_gaq.push(['cat','act','label']);'">go red sox< /a>


Or, to create a virtual pageview you could push the command onto the queue like this:

< a href="onClick='_gaq.push(['_trackPageview','/virtual/go-red-sox']);'">go red sox< /a>

You can also add mulitple commands to the queue at a time. But this is where things start to get technical, and I’m not going to go there :)

How you implement the code depends on your site, the commands you want to add and how much JS you know. To learn more about how to add commands check out the GA Code site.

Switching to the Async Code

The complexity of migrating to the async tracking code depends on your site. If you’re not using any of the advanced GA features then migration can be as simple as swapping the tags.

But, if you are using advanced features, you’ll need to update all of the GA code on your site. Remeber, all the standard Google Analytics functionality in the ga.js exists in the async code. You just need to replicate your existing code in the async format. You can find an overview of the async code (written in nerd) as well as code examples, on the Google Code site.

Obviously the migration effort depends on the complexity of your implementation. But if you take your time and document your existing GA code and test your implementaiton thoroughly everything should go smoothly.

Have you tried the new async code? Got an experience you want to share? Leave a comment!