Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Track Outbound Clicks With Google Analytics And jQuery

DZone's Guide to

Track Outbound Clicks With Google Analytics And jQuery

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Sometimes, you may want to know what outbound links a user is clickingon -- say, if you're linking to an affiliate's site and want to be ableto count the clicks you're sending. Google Analytics offers this bit of code to accomplish this:

<a href="http://www.example.com"
onClick="javascript: pageTracker._trackPageview('/outgoing/example.com');">

and says:

 

Google Analytics provides an easy way to track clicks onlinks that lead away from your site. Because these links do not lead toa page on your site containing the UTM JavaScript, you will need to tagthe link itself. This piece of JavaScript assigns a pageview to anyclick on a link - the pageview is attributed to the filename youspecify.

Two problems here: one, it's Javascript in an onclick tag, which isugly and bad; two, you've got to add that to every link you want totrack. No fun.

Progressive enhancement says you should use Javascript to add behaviors that will only work with Javascript. I wanted to add this tracking ability to my blog, to see which outbound links people were clicking on. jQuery to the rescue:

$('a').each(function() {
var $a = $(this);
var href = $a.attr('href');

// see if the link is external
if ( (href.match(/^http/)) && (! href.match(document.domain)) ) {

// if so, add the GA tracking code
$a.click(function() {
pageTracker._trackPageview('/outgoing/' + href);
});
}

});

In my case, I wanted to track the post title (if there was one), in addition to the outgoing link's href. So:

$('a').each(function() {
var $a = $(this);
var href = $a.attr('href');

if ( (href.match(/^http/)) && (! href.match(document.domain)) ) {
$a.click(function() {
// get the post title if there is one
// and add it to the string for tracking
var postTitle = $a.parents('div.post').find('h2:first');
href = href.replace('http://',''); // cleanup for nice GA reports
href = (postTitle.length > 0) ? postTitle.text() + '/' + href : href;

pageTracker._trackPageview('/outgoing/' + href);
});
}

});

You can use the same method to unobtrusively add tracking code to file downloads:

var fileTypes = ['doc','xls','pdf','mp3'];

$('a').each(function() {
var $a = $(this);
var href = $a.attr('href');
var hrefArray = href.split('.');
var extension = hrefArray[href.length - 1];

if ($.inArray(extension,fileTypes) != -1) {
$a.click(function() {
// get the post title if there is one
// and add it to the string for tracking
pageTracker._trackPageview('/documents/' + href);
});
}

});

See Google's help page for more information. Notethat this example assumes you're using the new tracking code; you'llhave to adjust accordingly if you're using the old tracking code. If you're using the new tracking code, it will look like this:

var pageTracker = _gat._getTracker("UA-XXXXXX-X");
pageTracker._initData();
pageTracker._trackPageview();

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Rebecca Murphy. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}