Track Google Analytics events on outbound links

For a project we required tracking of events for various user interactions. The goal was to provide insights in user behaviour for certain sections of the site, but most of these interactions included “outbound links”: hyperlinks pointing to a URL. Simply tracking the events with an onClick handler will not work in this case, so I wrote a simple wrapper to solve this problem.

The problem

When a user clicks a link pointing to a new URL, a browser will perform a request to that resource. If you perform any asynchronous requests, all of these will be aborted (at least on most of the modern browsers, as far as I know).

If you want to track a click on a link and you place an onClick handler on this <a> element, the request to Google Analytics will therefore be aborted before the request is completed. This results in incomplete statistics in your tracker.

The solution

Since the release of the universal tracking code (also “analytics.js” in contradiction to the old “ga.js”) Google provides a callback for all requests send to Google Analytics. The so-called hitCallback is fired directly after the tracker request has been completed.

When you want to track clicks on outbound links (and also, form submits for instance) you need to use this callback. You cancel the default behaviour of the click, so the browser will not request the new page. Then you quickly send the event tracking request and when this is completed (using the callback), redirect the user to the new resource.

The script

Obviously you will not repeat this over and over again for every link you need to track. Some of the blog post point out this feature do this [1, 2] while others keep a fixed category, action and label of all clicks [3, 4, 5]. Therefore I created something myself, following the latest javascript module design pattern so hopefully it is reusable for others.

You have to load the script and instantiate a new Tracker object. You provide the tracker with a selector to find all <a> of <form> tags which need to be tracked. With data attributes you can supply the tag from specific event tracking data, so you can track different categories, actions, labels or values on one page.

You can find a .dist version here. I specifically appended the .dist extension, to prevent myself from becoming a CDN for all who want to load this. Please download it to your own server, minify it, merge it with other scripts you need and then serve it to your users. If you want to take a look at the code, a gist is provided on Github.

The example

If should be fairly trivial to follow the example and adjust it to your needs. A link as well as a form are provided. They both have different classes, but this doesn’t matter for the Tracker itself.

<a href="http://bob.com" class="track-click"
    data-track-category="Friends"
    data-track-action="Follow reference"
    data-track-value="Bob">
Follow my friend Bob!
</a>

<form action="/subscribe" class="track-submit" method="post"
    data-track-category="Newsletter"
    data-track-action="Subscribe">
  <input name="email" placeholder="email@example.com"
  <input type="submit" value="Subscribe">
</form>

<script src="tracker.min.js"></script>
<script>
var tracker = new Tracker('.track-click, .track-submit');
</script>

The Tracker uses both selectors, but internally it looks at the tag name of the matching elements. All links are redirected after the event tracking, all forms are submitted. For the event data, the data-track-* properties are used.

Improvements

I am by far not a javascript expert. If you have any improvements how this can help you in your project, just let me know! The gist on Github is forkable, so just provide your modifications and let me know.