track-clicks-thumbnail

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!

  • http://logoscda.com J.v.C

    thanks for sharing!

  • GuleMT

    Thank you for sharing this. If I want to use this to track contact form 7 submit button clicks, should I place the code in ‘additional settings’ section of the form ?
    I’ve read your other article about goal tracking contact form 7, but I prefer using this method because it doesn’t generate additional pageviews.

    • http://www.creare.co.uk/ James Bavington

      Hey, no problem at all. No you wouldn’t be able to add this within the additional settings. I’d recommend adding some inline jQuery onto the page containing the code above (tracking by jQuery), targeting that specific submit button by its’ class.

      • GuleMT

        Thank you for your answer. But where do I put that code in wordpress? In header.php in functions.php or ?

        • http://www.creare.co.uk/ James Bavington

          I’d add it within your footer.php file. Or you could add it just to that contact page specifically using a plugin like WP Headmaster.

          • GuleMT

            Hello James, I’ve placed the code on just that page(using Visual Composer – RAW JS element). But it doesn’t work, when I click the button I see this in the console:
            Uncaught ReferenceError: ga is not defined
            (anonymous function)
            n.event.dispatch
            r.handle

          • http://www.creare.co.uk/ James Bavington

            Might be easier for me to take a look, are you able to tweet me the URL?

          • GuleMT

            here it is: jongis.com/medical-free-trial/

          • http://www.creare.co.uk/ James Bavington

            Hey, just taken a look and it appears the inline tracking code you’ve added is for Universal Analytics whilst you’re tracking code is the Classic version. You either want to upgrade your tracking code to Universal Analytics, or use the classic code snippet from above under the heading ‘Tracking custom events in the old Classic Analytics’.

          • GuleMT

            But I’m using Universal Analytics tracking code. I have analytics.js in my tracking code in GA.
            Can the problem arise because I use ‘Google Analytics for WordPress’ plugin by Joost de Valk ?

          • http://www.creare.co.uk/ James Bavington

            Yes, even if you upgrade your account to Universal, the physical tracking code itself needs to be updated to the new one which sources analytics.js. Viewing your source code today, you’re still using ga.js which is the Classic Tracking Code. I don’t use Yoast’s plugin myself but I’m pretty sure his plugin only deploys the Classic tracking code. If you wanted to switch plugins I’d recommend using WP Headmaster which allows Universal tracking code compatibility amongst other features.

          • GuleMT

            Now I’ve seen in the source code that I’m using ga.js .
            I’ll remove the Yoast’s GA plugin and install the WP Headmaster.

            Thank you for your time James.

  • Lee Faulkner

    Thank you for sharing! What about if you have an in-text call to action on numerous pages, is there a way of using universal event tracking on the same cta but on different pages?

  • Lee Faulkner
  • http://www.olgish.se/ Olga Bj√∂rklund

    Good post. Thankz!

  • Neena

    Hi, I was trying to implement this.. but when i added the code, the content body is not loading. Could you advice how o make it work? and where to place the code?

  • Amy

    Hi James,
    Do you have to create Event Goals for ‘Tracking multiple events via jquery’? Or will these automatically be recorded in the Events report?
    Amy