Track traffic exiting your site, without jQuery

A few years ago (well, over five years ago!) I published an article that showed you how to use Google Analytics to track traffic exiting your site with a little bit of jQuery. Now while jQuery is great, for smaller sites it’s usually overkill, especially if only included for this one use. Recently on one of these small sites I came up with a different way of doing it, without jQuery.

So how can we do this without jQuery? Well many of jQuery’s features are available in some form in most modern browsers. For example animation can be easily implemented with CSS3’s transition and/or animation features. Most importantly there is widespread support for querySelectorAll in browsers.

Did you know a large part of jQuery is a library called Sizzle which is just used for selecting elements with CSS selectors. This is exactly what querySelectorAll does.

With this knowledge let’s start this again without jQuery. Firstly, we’ll put something in the markup to indicate which links should be tracked. Last time, I used a custom jQuery filter to find all external links but by adding something to the markup we can be more explicit about what is tracked, as well as also tracking non-link elements (buttons and forms for example). I’m going to use a HTML5 custom data attribute for this.

<a href="http://google.com" data-ga-track>Let me google that for you</a>

That little data-ga-track is all we need. Now here’s the javascript, I’ll go through it all in a moment.

;(function(){
  if (!document.querySelectorAll) return;
  if (!Array.prototype.forEach) return;

  function track() {
    var href = this.getAttribute('data-ga-track') ||
               this.getAttribute('href');

    ga('send','pageview', '/out/'+href);
  };

  var trackables = document.querySelectorAll('[data-ga-track]');

  Array.prototype.forEach.call(trackables, function(el) {
    el.addEventListener('mousedown', track);
  });

})();

I’m using an immediately invoked function expression (IIFE) to keep the global scope clean and within the function, bailing quickly if the browser does not support a couple of key features. Obviously we need querySelectorAll and over 97% of browsers support this which is great, but IE8’s support is a little buggy. I’m also checking for the ES5 Array function forEach which is supported by over 95% of browsers. I’m using this later on as a simple way to iterate through the matching elements, but more importantly this is not supported by IE8 so that won’t run the rest of the code even though it does (partly) support querySelectorAll.

Next up there’s the function that actually logs to Google Analytics, which will look for either a value for the data-ga-track attribute or if there isn’t one, look for the href attribute. This value is then sent as a page view to Google Analytics prefixed with /out/. Last time we sent events to Google Analytics rather than a pageview but that’s just down to my current preference, you could easily change this to send an event instead.

I then use querySelectorAll to find all elements with the attribute data-ga-track and stash them away in a local variable (the IIFE keeps this variable local to the function and out of the global scope). Lastly we use the forEach function to iterate through each element and add an event handler for the mousedown event to call the track function defined earlier. I’m using mousedown here to ensure that the tracking happens before the browser starts navigating away.

The mousedown event also fires when a right click occurs on the element, some of these clicks could be someone trying to ‘open in a new tab’ but some won’t be. This will result in a few false positives.

And that’s it. There’s not much too it really. Do you think it can be made shorter, simpler, better? Or do you have any other neat little standalone javascript snippets? Let us know!