Using MooTools to Instruct Google Analytics to Track Outbound Links

Written by David Walsh on Tuesday, October 14, 2008

This article may feature code that is no longer best practice in MooTools.
Click here to learn what has changed to make your code framework-compatible.

Google Analytics provides a wealth of information about who’s coming to your website. One of the most important statistics the service provides is the referrer statistic — you’ve gotta know who’s sending people to your website, right? What about where you send others though? Using MooTools 1.2, you can direct Google Analytics’ pageTracker to track outbound link clicks.

The MooTools 1.2 Javascript

//google analytics code
var pageTracker = _gat._getTracker("UA-#######-#");
pageTracker._trackPageview();

//moo code
window.addEvent('load', function() {
	if(pageTracker) {
		$$('a[href^=http]').each(function(el) {
			el.addEvent('click',function() {
				var dd = '/outgoing/' + el.get('href').replace('http://','');
				pageTracker._trackPageview(dd);
			}.bind(this));
		});
	}
});

Here’s what you would see on your “Top Exit Pages” within Google Analytics:

Excellent! Who knew it would be so easy?

Download PDF

Follow via RSS Epic Discussion

October 14 / #

Keven Bouchard says:

Really nice men ! Thanks for the tip , I’ll use that when I’ll rebuild my blog for this winter :)

October 14 / #

Daniel says:

Ahh, very cool! Thanks for sharing, David.

October 14 / #

Evan says:

I use event delegation and classes on my anchors. It’s not automatic like your solution you have to remember to add the classes to your outgoing links but you can use it to do a bunch of different things like tracking files and outgoing links.

track to /outgoing/
track to /files/

October 15 / #

A2daK says:

Evan:
Can this be used to track how many times a video has been watched? I presume that putting the path to the individual file could monitor this? Is there anything else Mootools can do with analytics?

David Walsh:
Thanks for this tutorial and others. I have been dropping in for a while now but 1st comment.

Cheers, Adam

October 15 / #

Henrik says:

And here is the jQuery version: http://www.prodevtips.com/2008/08/19/tracking-clicks-with-jquery-and-google-analytics/

Note that I wrote that one before David, just so you guys know, I didn’t just copy the MooTools code and jQuerify it, probably the opposite ;)

October 15 / #

david says:

@Henrik: There would have been nothing wrong with porting over my script.

October 18 / #

bram says:

Wouldn’t it be better to use domready instead of load?

and how do I avoid internal links with http:// getting tracked ?

December 27 / #

Crispijn says:

Bram:
When you specify the element selector you can use it on specified links. For example for your advertisements:

$$(‘advertisement’).each(function(el) {

Hope that this helped you with your problem!

April 09 / #

Victor says:

I am not entirely sure how to implement this. the typical google analytics tracking code is shown below. do i jsut modify this to include the entire code above? Also, do i need to install the mootools framework in my wordpress blog before this will work? i feel i am close but without any knowledge of mootools, it looks very confusing. help!

June 18 / #

dem says:

This post it’s really cool. I like it a lot.

There’s a “but”! … But, you’re counting pageviews… i’ll recommend you to use eventTracker… cause’ here you are counting pageviews and that will increase the total pageviews of your site. And even more, those pageviews you’re counting have 100% bounce so your bounce rate will suffer a lot!

Even so i will try to adapt this code for using it with eventTracker… :)

David, it will be nice to have you on my twitter @dmanzur. i’ll follow you :)