Getting started with event tracking

This guide will help you to get started with event tracking.

• What are events and why should I track them?
• Setting up event tracking
• Tracking events

What are events and why should I track them?

Events are user interactions on your website that don’t necessarily load a new page.

Web analytics are based on page views, so every time a page is loaded in the user‘s browser a small piece of code on the page makes sure that the page view is counted. But what if the user presses play on a video embedded on the page, or clicks on a link that hides or reveals information on the page without reloading it? Since these interactions (events) don’t load a new page, they don’t, by default, get tracked.

This is where event tracking comes in handy. With event tracking, you are able to add tracking to individual elements on a page, so that when users interact with them, that interaction is recorded.

You should use event tracking if you wish to have a new level of insight into user behavior. Such as seeing how visitors to your site interact with elements, which makes it a lot easier for you to optimize your pages, so users do what you want them to.

It is also important to add that tracking events on pages will have no effect on the page view figures of your site.

Setting up event tracking

Getting event tracking set up on your website requires the following:

1. Identify what to track.
2. Add the event tracking code.

Choosing what to track

Events can be anything a user clicks on, on your website, but because clicks that result in loading a new page are already tracked, setting up event tracking on these doesn’t really make sense.

Optimally, the events you want to track will be clicks that don't load a new page, but where it would be valuable for you to know that a visitor has made a click. Here are some of the typical events to track:

• Clicks on play, pause or stop on embedded audio or video.
• Clicks that open a lightbox or pop-up, such as image galleries.
• Clicks that reveal or hide content on the page.
• Clicks that submit forms without loading a new page.

For each element that you wish to track events for you must choose a category, an action, and optionally a label.

At this stage, it is also important to consider consistency in the categories and actions you choose. 

• Do you want all videos to have the same category (Video) or do you want to distinguish the types of video you have on your site?
• What terms do you want to use in regards to hidden content? Is the action you want to use "reveal", "open", "expand"..

Consistency at the start can result in cleaner data that you can actively use, with clear historical development.

Category (required): 

Typically, the category details what type of element the event was actioned on, such as;  video, audio, image, form or content. It offers a way to group the different types of events you are tracking.

The same category name is commonly used across multiple events, as it represents a base reference ("Audio").

onclick="_sz.push(['event', 'Audio', 'Play', 'Launch speech']);"
onclick="_sz.push(['event', 'Audio', 'Pause', 'Launch speech']);" 
onclick="_sz.push(['event', 'Audio', 'Play', 'Mayors speech']);"

You can always choose to evolve some standard categories so they are more specific ("Audio-long", "Audio-short") - just remember to do it at the beginning in relation to consistency of data!

Action (required):

The action matches the interaction that was performed e.g. play, pause, open, submit, and so on.

It is best, again, to think about what actions you want to track in relation to the categories you have selected, and whether it is ok to have general actions that are used across multiple categories or whether you want to select specific actions for each category.

In an example from the Siteimprove website, the User Feedback tab has two actions that are interesting in tracking. When the user opens the tab and when a user completes the feedback. So both events fall under the same category "Feedback", but have distinct actions noted in the script.

Label (optional):

If you have multiple events with the same category and action on the same page, you can add a label to each to distinguish them. Labels can also be used to improve the readability of your data.

A label can be the title of the video or the heading of a content section - anything that uniquely identifies which element the user interacted with.

In this example, the user wants to track tabs being clicked on the front page. The tabs all fall under the same category "Content" and the same action "tab", so the Label element in the script can be used to distinguish the tabs - "Apply", "Pay" and "Report".

Adding the tracking code

The code you need to add is:

onclick="_sz.push(['event', 'CATEGORY', 'ACTION']);"

or if you want it with the optional label on the event:

onclick="_sz.push(['event', 'CATEGORY', 'ACTION', 'LABEL']);"

All you have to do is replace  CATEGORY, ACTION, and LABEL with the ones you want to use.

Example 1:

If you want to track a link on a page that reveals some hidden text about enrolling, the original link might look like this:

<a href="...example.com#fulltext">Read the full text about enrolling</a>

Then you could change it to:

<a href="...example.com#fulltext" 
onclick="_sz.push(['event', 'Content', 'Show more', 'Enrolling']);">
Read the full text about enrolling</a>

The category is "Content", the action is "Show more" and the label (further detail) is "Enrolling".

Tracking events

Once you've identified the elements on which you want to track events, and the tracking code has been added accordingly, then you can follow these events within Event Tracking in Analytics.

The Event Tracking section provides an overview of events:

It is divided up into 4 sub-sections: Category, Action, Label and Pages.

Note: If you are unable to add code to your pages yourself, you can submit an event tracking request by filling in this Event Tracking Spreadsheet and emailing it to support@siteimprove.com. Please limit the number of events to five per form/request. A description of the information required is provided within the form in the article How to complete the Event Tracking spreadsheet.

Tracking YouTube Videos

To track YouTube videos the following conditions need to be met:

1. Video links should be embedded (i.e. not presented in a pop-up window)
2. Video links need to have the 'enablejsapi=1' parameter added to the video link.

For example: 

 <iframe .. src="//www.youtube.com/embed/XXX?enablejsapi=1

Note: There are limitations to what can be tracked and this is dependent on YouTube’s API. Detailed analytics are available within the YouTube studio interface.

Tracking Limitations

• iframes - We cannot usually track iframes as the Siteimprove script is not loaded on the page in the iframe. Tracking may work if you can add the Siteimprove script on the iframe page but typically this is not possible as it’s third-party content.
• HTML5 video in iframe – An HTML5 video in an iframe cannot be tracked.
• Vimeo videos - We cannot track usage on Vimeo videos.

Additional resources

• Event Tracking: Naming convention best practices