Tracking Events in Google Analytics with Universal Analytics(analytics.js)

Lots of webmasters use Google Analytics but not many implement Event Tracking. Event tracking is a powerful tool that allows you to track anything from a simple click on a link on your site, to the time at which a video on your site was paused.

What exactly is Event Tracking and why is it important?

The basic Google Analytics code allows you to measure lots of top level data (traffic to your website, where people are going on your site, how long they spend on it, etc). So why bother with event tracking? Before we even begin let us define an event. Google defines an event as

a user’s interaction /activity with a webpage element like flash videos, gadgets, images, links etc.

So now we have the definition, lets address our previous question. For starters, the default Google Analytics code can’t track any event which does not generate a page view when it occurs. It can measure when users go from one page to another but things liek link clicks to external sites, or other interactions with webpage elements cannot be tracked. Implementing event tracking allows you to measure these events, allowing you to get even more granular with your data.

With a little bit of code, you can start to get data on events that can range from:

  • Downloading a file
  • Loading of Ajax, JavaScript or flash contents
  • Loading of pop-ups, light boxes
  • Loading of a flash video on a webpage
  • Viewing of a flash video
  • Viewing video footage of certain length
  • Clicking on a video’s play/pause/stop button
  • Interaction with a gadget
  • Clicking on an image or a link
  • Abandonment of a form
  • Log-ins
  • Sharing/printing a blog post, article, video or image

This means that now you can not only see that User A went from your about page to your contact page, but you can also track whether User A clicked the button on the sidebar to get there or read everything before clicking on the button at the bottom of the page.

How do I create the event tracking code?

So now you know what it is, how do you create the tracking code. The code is made up of 5 elements that you need to pass on to Google Analytics. These are Category, Action, Label, Value and NonInteraction.

Category is what you call the group of similar events you want to track. Things like ‘videos’ or ‘Button Clicks” or “Forms” etc. (mandatory)

Action is the name of the type event you want to track like ‘play’ ‘stop’ ‘pause’ etc. (mandatory)

Label allows you to add additional information about the element you want to track like the title of a video, or name of a downloadable file or location of a button. (optional)

Value is a numerical value assigned to the event based on its perceived value to your business. (optional)

Opt_noninteraction – This allows you to prevent event interactions from being included in your bounce rate calculations.(optional)

Google has now switched everyone over to Universal Analytics using a new tracking file called analytics.js as opposed to ga.js. so our tutorial will focus on analytics.js.

The code is structured as such

ga(‘send’,’event’,’Category’,’Action’,’Label’, Value, opt_noninteraction)

An Example

To help make it clearer here is an example. Let’s say you want to track clicks on a social media link to your Facebook page.
Your Category would be “Social
Your Action would be a “View
Label would be “Facebook
Value of 10 based on the perceived value to you.
opt_nonnteraction would be “{‘nonInteraction’: 1}” so the events here does not affect the bounce rate.

Your code would thus be

ga(‘send’,’event’,’Social’,’View’,’Facebook’, 10, {‘nonInteraction’: 1}

With this code the non interaction value is set, so that the tracked event will not impact the bounce rate calculations. Also in order for the Event to send data to Google when someone clicks on the link, we put the code inside the onClick function.

onclick="ga(‘send’,’event’,’Social’,’View’,’Facebook’, 10, {‘nonInteraction’: 1});"

How do you implement the code?

So once you have your code, how do you implement it? Take your event tracking code and place it in the link you want to track:

<a href=“” onclick="ga(‘send’,’event’,’Social’,’View’,’Facebook’, 10,  {‘nonInteraction’: 1});”>Facebook</a>



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: