How to track custom click/touch events in Google Universal Analytics

In this simple tutorial I’m going to share how I track custom events like clicks/touches in the new Universal Google Analytics. In addition to looking at single inline usage, I’ll share the jQuery code I use to group my functions together for tracking multiple events in one easy place.

When I first switched over to the new Universal Analytics tracking code last year, I unfortunately didn’t realise just how different it was. Universal Analytics sources a new tracking file called analytics.js which is very different from the classic ga.js tracking script.

Tracking custom events in the old Classic Analytics

Before Universal Analytics was launched last year, you could track custom events using the _gaq Global Object like this…

<a href="tel:01234567890" onclick="_gaq.push(['_trackEvent','Click-to-Call','Header','01234567890']);">01234 567890</a>

When paired with the older Classic tracking code, the above example would track how many clicks/touches the phone number received.

Goodbye _gaq and hello ga

Using _gaq however no longer works with Universal Analytics. The same custom event can be tracked in Universal Analytics, but you need to use the new method. If you’d like to read more about Event Tracking in Universal Analytics and what each of the parameters means, i’d recommend checking out this page over on Google Developers. In the meantime though, here’s the how to track the same event but with the new ga function:

<a href="tel:01234567890" onclick="ga('send', 'event', 'link', 'click', 'Phone Number Clicks/Touches');">01234 567890</a>

In order to send an event you need to pass the send command and the event hit type as the first two parameters within the function. The third parameter is the category (i.e link or button could be used), the fourth is the action (i.e. click or touch) and the fifth is an optional label for your reference.

Tracking multiple events via jQuery

If you’re using the popular jQuery library on your website, it’s really simple to send events to GA and manage them in a simple group like in this example:

Here I’m using jQuery to track clicks across 3 different ID’s. Personally I find it much easier to manage my individual Custom Event Tracking together within a single Document Ready Listener.

Once implemented, you can check your events are tracking correctly after 24 hours by visiting the Behaviour > Events tab within Google Analytics:

Custom Events in the Google Analytics Dashboard

In the example above, you can see how I’m tracking how many users click on a Quick-Quote button.

And that’s it!