Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Track File Downloads in Google Analytics Using MooTools

By  on  

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.

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • By
    I&#8217;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...

Incredible Demos

  • By
    HTML5 Input Types Alternative

    As you may know, HTML5 has introduced several new input types: number, date, color, range, etc. The question is: should you start using these controls or not? As much as I want to say "Yes", I think they are not yet ready for any real life...

  • By
    CSS Ellipsis Beginning of String

    I was incredibly happy when CSS text-overflow: ellipsis (married with fixed width and overflow: hidden was introduced to the CSS spec and browsers; the feature allowed us to stop trying to marry JavaScript width calculation with string width calculation and truncation.  CSS ellipsis was also very friendly to...

Discussion

  1. Clinton Montague

    Wow, didn’t know that this was possible, this is a great trick! Thanks!

  2. Staicu Ionut

    Thanks man! Even i’m not a big fan of Moo, i will surely use this with jquery :P
    Thanks again ;)

  3. Jason Huck

    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.

  4. Joomlapanel

    Thanks man.. I don not know the MooTool can do this.

  5. garaj kapısı

    Thanks David :) everyday i learn different things from you. Thanks lot.

  6. TVD

    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.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!