Infrequently Noted

Alex Russell on browsers, standards, and the process of progress.

Ending The ga.js Wait

Google Analytics is ubiquitous, not least of all because it's better at what it does than most of the alternatives. Also, it doesn't require any install or maintenance. And it's free. What's not to like?

Frankly, not much, but if I had to nit pick, I'd note that the worst part of Google Analytics is the ga.js script that does the actual tracking of content. It's not bad, in and of itself, but it tends to load slowly. There are several reasons for this:

So how to fix this? Dojo 1.3's dojox.analytics.Urchin to the rescue! Given that I was going to be including Dojo on the page to do other things anyway, I can use 1.3's new Urchin system to help amortize the cost of using Google Analytics. The code running on this blog now includes the following code (more or less):

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js">

</script>
<script type="text/javascript">
dojo.addOnLoad(function(){
setTimeout(function(){
dojo.require("dojox.analytics.Urchin");
dojo.addOnLoad(function(){
var tracker = new dojox.analytics.Urchin({
acct: "UA-XXXXXX-X" // your tracking # here
});
});
}, 100);
});
</script>

You can see the real thing by looking at the bottom of this page which pulls in custom.js which includes this logic. Pete Higgins blogged about how the module works when he first wrote it, and the strategy is to load Dojo from a CDN (since the page wanted it for other things) and wait until after the page has loaded to include ga.js. This delayed loading ensures that the page is responsive before we start doing anything related to tracking. The nested calls to dojo.addOnLoad show how we can wait for one set of modules to finish before kicking off another group, and in this case we also wait until after the page is responsive to load dojox.analytics.Urchin. This module further delays loading of ga.js, meaning that it doesn't matter how long it takes for things like DNS to resolve and for Google to serve ga.ja since it's not ever blocking the user.

Looking at the "before" and "after" shots in firebug gives you some idea of how this technique can really make a difference:

[caption id="attachment_940" align="aligncenter" width="300" caption="onload waits for ga.js"]onload waits for ga.js[/caption]

[caption id="attachment_941" align="aligncenter" width="300" caption="using dojox.analytics.Urchin, we can get a responsive page and then track usage"]using dojox.analytics.Urchin, we can get a responsive page and *then* track usage[/caption]

We get page tracking and the user gets an interactive page faster. Rad.