Monday, March 13, 2006

Google Analytics Solutions (Part 2)

Following on from my earlier post: Google Analytics Woes And Solutions; with how my favourite champagne site seems to deal with the unresposiveness of the tracking part of analytics...

In the first post I covered how they deal with loading the urchin.js file when the server was unresposive. Here I cover how they manage keeping the page rendering fast when the tracking is unresponsive. Rather than the regular:

<script type="text/javascript">
_uacct = "UA-xxxxxx-x";
urchinTracker();
</script>

Which contacts Google with the tracking information, they take the execution of the tracking outside of the page rendering, so the page will display and any onload functions will run un­in­flu­enced by any delays in the tracking, as show below.

<script type="text/javascript">
_uacct = "UA-xxxxxx-x";
setTimeout("try{urchinTracker();}catch (e){}",10);
</script>

What they do is fire it off in a timeout or background thread, so the page finishes loading fast, the body's onload fires and all that kind of good stuff happens. (Obviously the UA-xxxxxx-x in the line _uacct = "UA-xxxxxx-x"; would have to be set to your unique code or you won't record anything)

What are the possible downsides with doing this?

  • You aren't using it the way Google suggests you should be using it

  • It might not work in every browser, works on IE and Firefox, but I don't have a Mac to test Safari and be sure about that.

  • If people leave the page too quickly the timeout might not have fired so they won't be tracked; on the other hand if they wait 2 mins for the page to load they are probablly going to leave anyway, not be tracked and possibly not come back...


I'll have to think on this more but this seems to work nicely...

Update
I took the plunge and have been trying this since Saturday. I am getting tracking for Internet Explorer, Firefox, Safari, Netscape and Opera; so it seems to work with most major browsers.

Reminder
If you do do this remember to keep your urchin.js file fresh with the one from Google as I doubt they'll say when its changed. You should have some leway as they will have to cope with a little lag from proxies caching the file. (see: First post:Google Analytics Woes And Solutions)

3 Comments:

Anonymous Anonymous said...

I've tweaked your idea for my own purposes and I'll be interested to see how it goes...

Here's what I came up with (I can't use PRE tags so it's gunno look ugly - sorry):

function createElement(element){
if (typeof document.createElementNS != 'undefined')
return document.createElementNS('http://www.w3.org/1999/xhtml', element);
if (typeof document.createElement != 'undefined') return document.createElement(element);
return false;
}

function loadGoogleAnalytics() {
var head = document.getElementsByTagName('head').item(0);
script = document.createElement('script');
script.src = "http://www.google-analytics.com/urchin.js";
script.type = 'text/javascript';
script.id = 'googleAnalytics';
void(head.appendChild(script));
}

function pingGoogleAnalytics(){
if(typeof(_uacct) == "undefined") setTimeout("pingGoogleAnalytics()", 100);
else {
_uacct = "UA-XXXXXX-X";
urchinTracker();
}
}

The first function is a better solution than document.createElement (Google it if unfamiliar).

The last two functions are added as the last function calls of an onload function, ideally, and in that order:

loadGoogleAnalytics();
pingGoogleAnalytics();

This code uses a proper DOM technique to add the external urchin.js file into the head of the page (and will fail if there is no head... as if!).

The last function keeps checking the value of the _uacct variable, until it is no longer undefined. This is a means of knowing that the urchin.js file has loaded, and the wait is over. I use a delay of 100 milliseconds, but do as you please. The danger is if you take too long to poll, the user might have left the page already, and you've lost a stat!

I prefer to do this than to try calling the urchinTracker function, because to be correct we need to wait for the variable to be set (in the JS file) before changing its value to UA-XXXXXX-X.

So this is the best I can come up with.

It now means you can totally handle Google Analytics from an external JS file... nothing on the page!

Let me know please, if there are issues identified with my approach, and thanks for getting the ball rolling on this :)

I have this running now on www.dlook.com.au, by the way.

- Alister

4:01 am, April 24, 2006  
Anonymous Anonymous said...

Excellent - very helpful thanks.
I started investigating why our sites were so slow and initially blamed GA. In fact it was because the W3C site is offline so we were waiting for their WAI stuff to timeout!
Cheers
John

12:02 pm, August 03, 2006  
Blogger David Hulbert said...

With JQuery, I'm doing:

$(document).ready(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "http://www.google-analytics.com/urchin.js";
$('head').append(script);
});

function tryGA(){
if(typeof(urchinTracker) == "undefined") {
setTimeout("tryGA()", 100);
}
else {
_uacct = "UA-xxxxxxx-x";
urchinTracker();
//alert ("added GA");
}
}
tryGA();
Seems to work well, not blocking the page or other JS. Works in IE6/7, FF, Opera, Safari.

12:35 pm, June 08, 2007  

Post a Comment

<< Home