Wednesday, January 11, 2006

Previously I blogged about possible solutions for tracking downloads with Google Analytics.  The solution I am going to experiment with first is to dynamically add the tracking code to my download links via JavaScript.  I spent quite a bit of time on my script to make it cross-browser compatible and so that it would handle proper timing of execution based on the loading of the links.  I also used a regular expression to limit the tracking to specific link types.  Hopefully those match most cases.  If all goes well I will probably wrap all of this into a simple ASP.NET control that can be added to an page you want tracked. 

First off you need the standard Google tracking scripts:

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-XXXXXX-X";
urchinTracker();
</script>

Second is my new download tracking script.  I have placed it in a separate file for browser caching and easy updating.  Also it has the defer="defer" attribute so that IE will not load the script until the content has finished loading.  XHTML compliance required me to include a value for the attribute.  Please let me know if you come up with any improvements to the script or if you find any errors.  Thanks to quirksmode for info on the dynamic event models and dean edwards for info on deferred script execution.

<script type="text/javascript" src="downloadtracker.js" defer="defer"></script>

Here is the actual downloadtracker.js code

// We dont want the try adding the tracking code until the page links are loaded
if (document.addEventListener) {
document.addEventListener(
"DOMContentLoaded", addEvents, null); // Firefox
} else {
addEvents();
// IE : Call the function immediately because the script is referenced with the defer attribute supported by IE
}

function addEvents()
{
// quit if this function has already been called
if (arguments.callee.done) return;
// flag this function so we don't do the same thing twice
arguments.callee.done = true;
for (i=0; i <document.links.length; i++)
{
var x = document.links[i];
// Only attach tracking code to specific file types
var extensions = new RegExp(".+\.(zip|pdf|xls|doc|csv|txt|ppt|xml|rtf)$");
var doc = x.href.toLowerCase().match(extensions);
if (doc)
{
if (x.attachEvent)
{
x.attachEvent(
'onclick', function () {TrackIt(window.event.srcElement)}); // IE
} else {
x.addEventListener(
'click', function () {TrackIt(this)}, false); // Firefox
}
}
}
}

function TrackIt(link)
{
// Remove the conversion to Lowercase if you are on a Case sensitive web server
urchinTracker(link.href.toLowerCase());
}

12/5/2006 8:32:44 AM (Mountain Standard Time, UTC-07:00)
Nice solution. I'm also working on dynamic solutions to loading and using Google Analytics:

http://www.datadriven.com.au/2006/12/05/dynamically-loading-google-analytics/

Might be cool to combine both our solutions... particularly if you have any ideas on how to dynamically detect if IE has loaded the script.
Marcos
Name
E-mail
Home page

Comment (HTML not allowed)  

Enter the code shown (prevents robots):