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.
![CSS 3D Folding Animation]()
Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...
![Facebook Open Graph META Tags]()
It's no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook "Like" and "Recommend" widgets on every website. One...
![Web Audio API]()
The Web Audio API allows developers to load and decode audio on demand using JavaScript. The more I evaluate awesome games for Firefox OS TVs, the more I get to learn about these APIs that I normally wouldn't touch. The following is a very basic introduction to the WebAudio API...
![CSS Custom Cursors]()
Remember the Web 1.0 days where you had to customize your site in every way possible? You abused the scrollbars in Internet Explorer, of course, but the most popular external service I can remember was CometCursor. CometCursor let you create and use loads of custom cursors for...
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.