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.
![Vibration API]()
Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. One of those simple APIs the Vibration API. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...
![7 Essential JavaScript Functions]()
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent. Times have changed but there are still a few functions each developer should...
![Redacted Font]()
Back when I created client websites, one of the many things that frustrated me was the initial design handoff. It would always go like this:
Work hard to incorporate client's ideas, dream up awesome design.
Create said design, using Lorem Ipsum text
Send initial design concept to the client...
![MooTools Zebra Tables Plugin]()
Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors.
The CSS
The above CSS is extremely basic.
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.