Event tracking with Google Analytics

Published in

The JavaScript Collection

5 min readDec 3, 2014

With just a few lines of code you can get analytics about specific user interactions on your site. Cross reference successes, failures, and more, with all the great information Google Analytics already provides.

If you’ve built a website in the last 7–8 years you’ve probably copy pasted a Google Analytics (GA) snippet into your <head> and gotten some nice information about who’s visiting your site. Page views, bounce rates, and browser usage are all great, but what do you do when you want GA to track how people are interacting with your site? To no surprise GA has you covered, and I’ll elaborate on how I used this to get much more in-depth information about email signups on getpiggybank.com. With event tracking we’re now able to see what percentage of people who click signup get success responses, failures, or nothing at all, as well as information about their referring websites, and much more.

This article assumes you know a little bit about ajax and jQuery. Here’s what I was working with before:

$('.email-signup-form').on('submit', function (e) {
  var $form = $(this);  $.ajax({
    url: '/sendmail',
    type: 'POST',
    dataType: 'json',
    data: $form.serialize(),
    complete: function (data) {
      var json = data.responseJSON;
      if (json.status == 'error') {
        // show error message
      }
      else {
        // show success message
      }
    }
  });
});

I cut a lot of our actual code out, but the basic gist to take away is that when you submit the form, it sends the serialized form data to the backend, and based on the response, displays either an error message or a success message to the user.

Now lets incorporate some GA event tracking. We’re going to track 3 events, click, success, and error. The syntax to fire these events off to GA is very simple:

ga('send', 'event', 'category', 'action', 'label');

We can leave those ‘send’ and ‘event’ parameters alone. They simply tell our function to send an event. The ‘category’ param is a name to group the events by, and the ‘action’ param is whatever you want to name the event. That ‘label’ parameter is optional, but we’re going to use it to associate our event with the email submitted by the user. If it succeeds the email will be added to our database, so this is more useful to know if someone fails. If they are failing repeatedly, or if users from a certain referral are having issues, we can pinpoint the problem and hopefully fix it. Current docs on Analytics’ event tracking can be found here.

So our function calls will look something like this:

ga('send', 'event', 'email-signup', 'click', email);
ga('send', 'event', 'email-signup', 'error', email);
ga('send', 'event', 'email-signup', 'success', email);

They all have the same category — ‘email-signup’, and then whatever action they pertain to. The email variable being used for the label will need to be defined before being used of course. Alternatively, all of the parameters of the send command have their own field names, so you can send an event just by passing an object like so:

ga('send', {
  'hitType': 'event',              // Required.
  'eventCategory': 'email-signup', // Required.
  'eventAction': 'error',          // Required.
  'eventLabel': 'foo@bar.com',
  
  // Doing it this way you can use other field keys 
  // like hitCallback, should you need a callback to
  // fire after the data is saved in GA.
  'hitCallback': function () {
    console.log("Google Analytics — Error event sent");
  }
});

For more info, the Field reference can be found here.

After adding our events, our updated submit handler will look something like this:

// Again, simplified for the article

$('.email-signup-form').on('submit', function (e) {
  var $form = $(this);
  
  // grab the email from the form
  var email = $form.find('.email-input').val();
 
  // and send the initial click event to GA
  ga('send', 'event', 'email-signup', 'click', email);
 
  $.ajax({
    url: '/sendmail',
    type: 'POST',
    dataType: 'json',
    data: $form.serialize(),
    complete: function (data) {
      var json = data.responseJSON;
      if (json.status == ‘error’) {

        // show error message
        // after showing error message, send error event.
        ga('send', 'event', 'email-signup', 'error', email);

      }
      else {

        // show success message
        // after showing success message, send success event.
        ga('send', 'event', 'email-signup', 'success', email);

      }
    }
  });
});

After giving our email signup form some good and bad emails for testing, let’s login to Analytics and see what we can see. Once in GA you’ll go to Behavior > Events > Overview. Towards the bottom you will be able to sort by Category, Action, and Label. If you click ‘view full report’ in the bottom right corner you’ll be able to cross reference against other information. You can get more detailed info in this report, but events may take a few minutes to show up. However, you can also view them in real-time by going to Real-time > Events.

Below I’ve added the referral source (Full Referrer) as a secondary dimension, and we can see where our emails came from, as well as how their interaction with the page went.

The combinations really are endless, and of course, these GA events can be hooked up to whatever page event you want. If you want to know whenever someone hovers over your logo you can do that. Maybe you want to know whenever a bot inputs some text in a hidden input field trying to spam you, you can do that, and then find the source. Or maybe you want to see just how many times people are triggering your site’s easter egg. Creating specific events like this will give you GA’s detailed analysis on specific interactions, and can be an invaluable tool.

Event tracking with Google Analytics

Written by Adam Bickford