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.

Recent Features

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    MooTools Wall Plugin

    One of the more impressive MooTools plugins to hit the Forge recently was The Wall by Marco Dell'Anna.  The Wall creates an endless grid of elements which can be grabbed and dragged, fading in elements as they are encountered.  Let me show...

  • By
    Morphing Elements Using MooTools and CSS

    Morphing an element between CSS classes is another great trick the MooTools JavaScript library enables you to do. Morphing isn't the most practical use of MooTools, but it's still a trick at your disposal. Step 1: The XHTML The block of content that will change is...

Discussion

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

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

  3. 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. Thanks man.. I don not know the MooTool can do this.

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

  6. 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!