Click Tracking with Google Analytics

I had enabled Google Analytics last September but, until recently, kept WordPress Statistics running as well. One reason was its terribly addictive up-to-the-minute stats view, but more importantly WP tracks outbound clicks and GA doesn’t. Until you write some code, that is.

Google Analytics can record hyperlink clicks (and all kinds of other stuff) using its event tracking mechanism. That’s conceptually simple: you just make a ga('send', 'event', …) call for any HTML event you want to record. The problem is that you’d have to annotate every single outbound hyperlink with an onclick handler, and I certainly didn’t want to do that.

A web search for better alternatives came up strangely empty. People seem to either actually use manual annotation, or else go whole hog for a heavyweight jQuery solution. But as it turns out, it’s extremely easy to automatically and efficiently annotate links with just a few lines of JavaScript code. Here’s everything I appended to my original Google Analytics code snippet:

// track clicks on outbound links
function trackOutbound(e) {
  if (!e) var e = window.event;

  var target = e.target;
  if (!target || target.tagName != 'A') return;
  var href = target.href;
  if (!href || href.indexOf('kynosarges') >= 0) return;

  ga('send', 'event', {
    'eventCategory': 'outbound',
    'eventAction': 'click',
    'eventLabel': href    
  });
}

// attach global event listener
if (window.addEventListener)
  window.addEventListener("mousedown", trackOutbound, false);
else if (window.attachEvent)
  window.attachEvent("onmousedown", trackOutbound);
else
  window.onmousedown = trackOutbound;

The first line in trackOutbound and the three if branches are for compatibility with old Internet Explorer versions. Those branches ask the top-level HTML window to call trackOutbound whenever any part of its surface gets clicked on. The mousedown event gets “bubbled up” to the top window as the first step in any link click, followed by mouseup and finally click. Tracking mousedown instead of click means our document is actually still present for the event handler – some developers found that early unloading can be a problem for click tracking. Inside trackOutbound, we check for a valid hyperlink request outside the Kynosarges domain, and if so send an event for the URL.

To use this code in another domain, simply replace the Kynosarges test with something more appropriate for you. Once I had added the code, outbound clicks appeared immediately in the real-time event view of my Google Analytics dashboard. This code works on both my static website and on the WordPress blog without any modifications, so it should work elsewhere too.

The beauty of this solution is that we never rewrite the actual HTML contents – neither manually nor with a time-consuming global DOM manipulation on page load. Code executes only if the user actually clicks somewhere, and then only for the specific clicked element. I’m not a JavaScript expert but this is likely the most efficient and least disruptive way to track clicks.

2017-03-08: Switched from “Classic Analytics” (script ga.js) to the current “Universal Analytics” (script analytics.js) which now works fine on my site.