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.
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
<a> element, the request to Google Analytics will therefore be aborted
before the request is completed. This results in incomplete statistics in your
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.
You have to load the script and instantiate a new Tracker object. You provide
the tracker with a selector to find all
<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.
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="firstname.lastname@example.org" <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