Event Tracking - Web Tracking (analytics.js)
This guide describes how to send events using analytics.jsOverview
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 thega function
the send command with the event hit typega('send', 'event', 'button', 'click', 'nav buttons', 4);Where:
buttonis thecategoryclickis theactionnav buttonsis thelabel4is thevalue
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.
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 theevent 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'); });
