How to track traffic exiting your site

Thanks to the great work Google have been putting in, we can now gather an enormous amount of information about our site visitors for free using Google Analytics. One of the metrics that I have always been curious about is the 'Exit Page'. Sadly, all visitors do eventually leave our sites and this metric shows what was the last page they viewed before leaving. Even more sadly, that's as far as we can get with a basic Google Analytics deployment. Wouldn't it be great if we could see where our visitors went after leaving our site?

Well, with a little bit of javascript magic we can.

What you'll need on your site

• Google Analytics (I'm using the new Asynchronous Tracking code but with a little modification it'll work with the standard tracking code)
• jQuery (again with some modification this can be done without, but you're all using jQuery anyway right?)

How do we do it

We're going to be using the Event Tracking functionality of Google Analytics to track whenever someone follows an external link on our site. Firstly we need a way of determining which links are actually external. We could add additional classes to any links you want to track or we can use a little jQuery tickery to determine that automatically.

Haven't used jQuery before? Don't know what on earth the $() function is? Check out the getting started guide, you'll thank me later

$.expr[':'].external = function(obj){
  return !obj.href.match(/^mailto:/)
    && (obj.hostname != document.location.hostname);
};

This adds the :external filter allowing us to use $('a:external') to select external links.

All we need to do now is to use this selector to track events when these links are clicked. The documentation shows that the _trackEvent() method takes four parameters; Category, Action, Label and Value. Of these four, only the Category and Action are mandatory. We'll be using the optional Label parameter to pass the URL of the external site back to Google Analytics.

$('a:external').click(function(){
  _gaq.push(['_trackEvent','Outbound','Link',$(this).attr('href')]);
});

Taking it further

We're using a Category of 'Outbound', as these events are all related to off-site events, and an Action of 'Link' as we're looking at links. We can expand on this using a little more jQuery to change this Action based on some conditions, for example if the link is within another element, if it has a particular class or if the url contains a string.

$('a:external').click(function(){
  var link = $(this), type = 'Link';

  if ( link.closest('ul.comments').length == 1 ) type = 'Comment';
  if ( link.hasClass('amazon') ) type = 'Affiliate';
  if ( (/pastrami/i).test(link.attr('href') ) type = 'Tasty';

  _gaq.push(['_trackEvent','Outbound',type,link.attr('href')]);
});

You could also this technique for other similar events, that might not otherwise be tracked by Google Analytics, such as for downloads

// track downloads of Acrobat and ZIP files
$('a:not(:external)').filter(function() {
  return (/\.(pdf|zip)$/i).test($(this).attr('href'));
}).click(function() {
  var href = $(this).attr('href'),
      pos = href.lastIndexOf('.'),
      ext = href.substr(pos+1).toUpperCase();
  _gaq.push(['_trackEvent','Download',ext,href]);
});

Originally published on theparticlelab.com on 20th January 2010