Track outbound clicks with Google Analytics and jQuery

categories: analytics, howto, jquery

Sometimes, you may want to know what outbound links a user is clicking on -- say, if you're linking to an affiliate's site and want to be able to 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 on links that lead away from your site. Because these links do not lead to a page on your site containing the UTM JavaScript, you will need to tag the link itself. This piece of JavaScript assigns a pageview to any click on a link - the pageview is attributed to the filename you specify.

Two problems here: one, it's Javascript in an onclick tag, which is ugly and bad; two, you've got to add that to every link you want to track. 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. Note that this example assumes you're using the new tracking code; you'll have 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();
 

Related posts: analytics

Related posts: howto

Related posts: jquery

4 Responses to “Track outbound clicks with Google Analytics and jQuery”

  1. Jorge Cunha says:
    January 7th, 2008 at 9:03 am

    Very nice post, Greetings from Portugal

    http://ittechguys.blogspot.com

  2. Neil Watts says:
    January 11th, 2008 at 3:17 pm

    Hi Rebecca!
    Great work!
    I think this is something similar to what I need?
    I am trying to track how my viewers open up my animations to determine whether they use the ’save as’ link or click the thumbnail to open up a custom sized browser window to view the movies (and to track total downloads too)?

    I ‘think’ I’ve managed to install the code to track the direct download link, but I don’t have a clue how to track the javascript controlled popup window links?

    Any help would greatly appreciated.
    A confused animator! :D

  3. Automatic outbound link analytics with jQuery | Development Feeds says:
    April 13th, 2008 at 6:26 pm

    […] it looks like I wasn’t the first to do this. An article by Rebecca Murphey shows how to do something similar, while also adding the referring post title to the tracking code. […]

  4. rdmey | Track user clicks on certain links says:
    June 3rd, 2008 at 9:42 am

    […] to the server when a link is clicked. It was somewhat inspired by a post I wrote a while ago about tracking outbound links with Google Analytics and jQuery, but is actually even simpler. I’ve retooled my clicktrack script to work as a generic, 2.5k […]

Comment