Event Tracking

Event tracking refers to the registration, documentation and presentation of events. Events are defined as special forms of user interaction - interactions with elements of a website such as menus, buttons, downloads, search boxes, videos or external links.

Every interaction independent of the website loading can be tracked, classified and tagged in event tracking to get an overall picture of the user behavior on the respective website. In most cases, the use of event tracking is usually for elements of a website realized with JavaScript, Flash or Ajax. The reports can be called up in Google Analytics.

General information

Traditional tracking methods are based on the communication between server and client. However, if a user looks at a website that provides videos or downloads, these contents can be accessed without the website having to reload. Event tracking makes it possible to track these interactions by implementing a JavaScript interface that registers such clicks on website elements. Event tracking provides information on how users interact with the content of a website and which types of content generate a particularly high level of engagement.

This type of tracking requires a Google Analytics account and the events that should be tracked need to be disclosed with a labelling. This can be done with the instructions available from analytics.js (Universal Analytics) or ga.js (Google Analytics) - depending on which library is used. Google recommends the newer version of Universal Analytics.

Practical Use

To track events, the selected elements of a website must be labelled with instructions in the source code. Each event can be described in more detail with four values. The first two commands are mandatory.

• Category: Describes the element with which you interact (for example, a button).
• Action: Describes the type of interaction, for example a click.
• Label: This is a more detailed description of the category to classify all elements from the category. One use would be the labelling of all navigation elements of the menu.
• Value: Passes values to Analytics, such as the number of clicks.

The ga function is used to send an event to the system with the send command. The information describes the event as follows: Button is the category. Click is the type of interaction. Nav buttons is the label and 4 the value.

ga('send', 'event', 'button', 'click', 'nav buttons', 4);

It is usual to track events that take place in the user's browser. However, you can use different browsers. Therefore, a so-called browser listener is configured to send events, even if they take place in different browsers. Here is an example of a download link that is treated as an event.

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

The integration of the JavaScript code requires a lot of effort. Google therefore provides the Tag Manager. It can be used to select and automatically capture website elements. However, the use is limited to certain types of events.

Relevance for Web Analysis

Event tracking captures interactions that are not detected by a log file analysis or conventional web tracking. It is particularly useful for special elements of websites that should encourage user engagement. All elements that have a call-to-action character can be tracked in this way.

Event tracking offers many different possibilities - one important one is being able to improve the user friendliness of a website. With the data collected from the interactions, the design of the website can be adapted to the needs of the user. Events can then used to continuously optimize the website and the elements contained therein. This can refer to banal aspects such as the position of a buy-now button and the psychological and cognitive placement of content when mouse movements are detected via hover effects, for example.

Also worth mentioning is the recording of specially defined events, so-called custom events. They can be used for special widgets such as price queries or weather queries and provide insight into interaction with website elements that provide additional functionality but are not an integral part of the HTML file. Event tracking is therefore essential for a comprehensive picture of user interaction and a user-friendly design of the website.

Web Links

• Event Tracking explained
• Event Tracking with Examples
• Guide for using Google Tag Manager