Explaining Google Analytics async tracker

Question

I have a as to how google's async analytics tracker works. The following code is used to init a command array:

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

Now, this is a standard array that gets replaced once the GA's code is loaded and is used as a sort of queue that stores your clicks.

My confusion lies in wondering how these clicks could possibly be persisted if a user clicks a link that causes a reload (prior to the GA javascript being loaded). If the GA code hasn't captured that push on the the _gaq object, then the user clicks a link and goes to a new page, this array is just re initialized each time no?

Isn't it true that a javascript variable will not persist across requests that cause a refresh? If this is the case, haven't we then lost that original click that caused the page reload?

Any explanation is greatly appreciated.

Answer 1

Yes, you're right that if the user clicks away from the site before ga.js has loaded and has executed the __utm.gif request to Google's servers, then it will not track the _gaq array and that information is gone forever. But this version code still provides many benefits over the older synchronous code.

First, the loading of ga.js using this method is not blocking.

Cleverly, the loading of ga.js is injected indirectly via JavaScript, rather than through a hard-coded <script> tag. As per Google Code Blog,

The second half of the snippet provides the logic that loads the tracking code in parallel with other scripts on the page. It executes an anonymous function that dynamically creates a element and sets the source with the proper protocol. As a result, most browsers will load the tracking code in parallel with other scripts on the page, thus reducing the web page load time.

This means that the loading of ga.js occurs in a non-blocking way for most modern browsers (and as a benefit, the async="true" part, currently supported in FF 4+, IE10p2+, Chrome 12+, Safari 5.1+, formalizes this asynchronization). This mildly reduces load time, and mildly reduces the likelihood that clicks will occur before ga.js has loaded.

The benefit of queuing up the _gaq array in advance is to prevent race conditions; priorly, if you tried to make GA calls before ga.js loaded (say, Event Tracking a video play), it would throw an error and the Event call would be lost and never recoverable. This way, as long as the ga.js eventually loads, the _gaq array is ready to serve it all of the calls at load time.

Answer 2

Yep. Javascript contexts are thrown away on page reload, so if the user leaves the page before ga.js loads, those hits are lost. The advantage of the async version of GA is that it can be put higher in the page, which means it's much more likely to have ga.js load before the user leaves.