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.
![Responsive and Infinitely Scalable JS Animations]()
Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...
![9 Mind-Blowing Canvas Demos]()
The <canvas> element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that...
![MooTools’ AutoCompleter Plugin]()
One of the famous MooTools plugins is Harald Kirschner's AutoCompleter plugin. AutoCompleter takes a term input by the user and searches for matches -- an obviously help to the user. Here's how to make the most of Harald's great plugin.
The XHTML
All we...
![jQuery Chosen Plugin]()
Without a doubt, my least favorite form element is the SELECT element. The element is almost unstylable, looks different across platforms, has had inconsistent value access, and disaster that is the result of multiple=true is, well, a disaster. Needless to say, whenever a developer goes...
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.