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 Images: The Ultimate Guide]()
Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...
![JavaScript Promise API]()
While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world...
![HTML5’s window.postMessage API]()
One of the little known HTML5 APIs is the window.postMessage API. window.postMessage allows for sending data messages between two windows/frames across domains. Essentially window.postMessage acts as cross-domain AJAX without the server shims. Let's take a look at how window.postMessage works and how you...
![CSS Circles]()
A while back I shared a clever technique for creating triangles with only CSS. Over the past year, I've found CSS triangles incredibly effective, especially when looking to create tooltips or design elements with a likewise pointer pattern. There's another common shape...
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.