Wednesday, October 01, 2014

Event Tracking - Web Tracking (analytics.js)


Event Tracking - Web Tracking (analytics.js)

This guide describes how to send events using analytics.js

  1. Overview
  2. Implementation
  3. Examples
    1. Cross Browser Event Tracking
    2. Using jQuery


Event tracking allows you to measure how users interact with the content of your website. For example, you might want to measure how many times a button was pressed, or how many times a particular item was used in a web game.
An event consists of four values that you can use to describe a user's interaction:
Value Type Required Description
Category String Yes Typically the object that was interacted with (e.g. button)
Action String Yes The type of interaction (e.g. click)
Label String No Useful for categorizing events (e.g. nav buttons)
Value Number No Values must be non-negative. Useful to pass counts (e.g. 4 times)


To send an event, you pass the ga function the send command with the event hit type
ga('send', 'event', 'button', 'click', 'nav buttons', 4);
  • button is the category
  • click is the action
  • nav buttons is the label
  • 4 is the value
You can also send events using the following convenience commands. In each command, the optional parameters have been removed.
ga('send', 'event', 'category', 'action');
ga('send', 'event', 'category', 'action', 'label');
ga('send', 'event', 'category', 'action', 'label', 
    value);  // value is a number.
The send command also accepts an optional field object as the last parameter for any of these commands. The field object is a standard JavaScript object, but defines specific field names and values accepted by analytics.js.
For example, you might want to set the page field for a particular event. You do this using:
ga('send', 'event', 'category', 'action', {'page': '/my-new-page'});
Similarly, you might want to send an event, but not impact your bounce rate. This is easily solved by configuring the event to be a non-interaction event using the following code:
ga('send', 'event', 'category', 'action', {'nonInteraction': 1});
Finally, all the parameters of the send command have their own field names. So you can send an event by only passing a field object to the send command:
ga('send', {
  'hitType': 'event',          // Required.
  'eventCategory': 'button',   // Required.
  'eventAction': 'click',      // Required.
  'eventLabel': 'nav buttons',
  'eventValue': 4
Read the Field Reference document for a complete list of all the fields that can be used in the configuration field object.


You typically want to send an event to Google Analytics when a particular browser event occurs. To do this, you configure a browser event listener and from within that listener, call the event command.
Say you have a link to download a PDF on your page:
<button id="button">Please click</button>

Cross Browser Event Tracking

To track this with pure JavaScript across browsers you would use the following code:
var downloadLink = document.getElementById('button');
addListener(downloadLink, 'click', function() {
  ga('send', 'event', 'button', 'click', 'nav-buttons');

 * Utility to wrap the different behaviors between W3C-compliant browsers
 * and IE when adding event handlers.
 * @param {Object} element Object on which to attach the event listener.
 * @param {string} type A string representing the event type to listen for
 *     (e.g. load, click, etc.).
 * @param {function()} callback The function that receives the notification.
function addListener(element, type, callback) {
 if (element.addEventListener) element.addEventListener(type, callback);
 else if (element.attachEvent) element.attachEvent('on' + type, callback);
In this example, the addEventListener function is a utility to add event listeners across browsers. This function is used to add an event listener to the PDF download link to listen for the click event. When a click event occurs, the event is sent to Google Analytics.

Using jQuery

jQuery is a popular JavaScript library that handles a lot of the cross browser inconsistencies. If you are using jQuery, to send an event to Google Analytics when a user clicks the link above, you would use:
// Using jQuery Event API v1.3
$('#button').on('click', function() {
  ga('send', 'event', 'button', 'click', 'nav-buttons');