Track File Downloads in Google Analytics Using MooTools
A while back I wrote an article detailing how you can use forced downloads via PHP to track downloads. What if you could get that same data into Google Analytics? Using some simple MooTools and advanced Google Analytics tactics, now you can.
The HTML
<a href="/media/video.wmv" class="download">Download This Video!</a>
<a href="/media/document.pdf" class="download">Download This PDF!</a>
<a href="/media/document.doc" class="download">Download This Document!</a>
<a href="/media/archive.zip" class="download">Download This Zip File!</a>
Any download I want tracked, I add the "download" CSS class to.
The MooTools 1.2
window.addEvent('load', function() {
if(pageTracker) {
$$('.download').addEvent('click',function() {
pageTracker._trackPageview('/downloads/' + this.get('href').replace('http://',''));
});
}
});
Just like tracking AJAX clicks and outbound links, we direct Google Analytics to record the event.
Now you get download counts and it gets lumped in with the rest of your Google Analytics stats.
![I’m an Impostor]()
This is the hardest thing I've ever had to write, much less admit to myself. I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life. All of those feelings were very...
![Conquering Impostor Syndrome]()
Two years ago I documented my struggles with Imposter Syndrome and the response was immense. I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions. I've even caught myself reading the post...
![Create Custom Events in MooTools 1.2]()
Javascript has a number of native events like "mouseover," "mouseout", "click", and so on. What if you want to create your own events though? Creating events using MooTools is as easy as it gets.
The MooTools JavaScript
What's great about creating custom events in MooTools is...
![Duplicate the jQuery Homepage Tooltips]()
The jQuery homepage has a pretty suave tooltip-like effect as seen below:
The amount of jQuery required to duplicate this effect is next to nothing; in fact, there's more CSS than there is jQuery code! Let's explore how we can duplicate jQuery's tooltip effect.
The HTML
The overall...
Wow, didn’t know that this was possible, this is a great trick! Thanks!
Thanks man! Even i’m not a big fan of Moo, i will surely use this with jquery :P
Thanks again ;)
A while back, I wrote a jQuery plugin that automatically adds tracking for external links, downloads, and mailto’s:
http://devblog.jasonhuck.com/2007/11/19/google-analytics-integration-with-jquery/
Rather than adding specific classes for each of these items, I based the tracking on the characteristics of the URL.
Thanks man.. I don not know the MooTool can do this.
Thanks David :) everyday i learn different things from you. Thanks lot.
Recently, I extended Google Analytics to add download tracking for Google’s new Asynchronous Google Analytics Model. I call the extension Entourage.js:
http://techoctave.com/c7/posts/58-entourage-js-automatic-download-tracking-for-asynchronous-google-analytics
One of my goals was a small footprint, so it’s narrowly scoped to track file downloads only – no mailto or external links. Also, it’s framework agnostic. I wanted developers to have the freedom to use the extension and still use whatever JavaScript framework they want.
I love jQuery, but I’ve always had much respect for the MooTools and Prototype.js community too.