Event Tracking - Web Tracking (analytics.js)

 

Event Tracking - Web Tracking (analytics.js)

This guide describes how to send events using analytics.js

The analytics.js snippet is part of Universal Analytics. If you're using Classic Analytics (ga.js) visit the Upgrade center to learn how to migrate your property to analytics.js.

Overview Implementation Examples Cross Browser Event Tracking Using jQuery

Overview

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)

Implementation

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);

Where:

• 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.

Note: If you use this syntax, keep in mind that the required parameters for an event are the same as if you pass them to the ga function directly.

Examples

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');
});