How to set up events for tracking user behaviour - Mapping Matomo and code

As product managers / instance managers we would like to get a detailed understanding of how users are interacting with the product and more specifically with certain features.

Aside from tracking visits on specific pages, Matomo allows us also to track clickable elements (buttons, links) as well as errors occurring to understand how users are using the features and detect possible flaws in UX.

Setting up events can be tricky though, as defining an event on an element (like a button or an input field) can be dependent on how it has been coded, which differs across the product due to the lack of a styleguide (which is in progress :)).

Using the example of the implementing analytics for the new checkout process, this article explains how we are working to build a resuable methodology for Matomo.

1. Matomo Setup

First, let´s have a look on how events are reported in Matomo. There are 3 hierarchies:

• Events Category

• Event Action

• Event Name

For example under the category alert we can differentiate between the event actions success and error.

The next sub-level are event names, where we can for example see the specific buttons that have been clicked during the checkout process.

2. How to create an event

In order to track these interactions, both a trigger and a tag need to be defined within the tag manager.

A tag is a snippet of code which can be executed on your site, as soon as the condition of a connected trigger is met.

To create an functioning trigger on an element it is important to know how the element has been defined in the code. Along the work of the new checkout process we started creating a wiki on which element to be tracked how. See more details in this issue.

Element	Code	Matomo
Primary Button	<input type="submit" name="commit" value="Next - Payment method" class="button primary" data-disable-with="Next - Payment method">	ClickClass contains button
Secondary Button	<a class="button cancel" href="/cart"> Back to Edit basket </a>	ClickClass contains button
ClickableTab	<div class="columns three text-center checkout-tab success">...</div>	ClickClass contains checkout-tab
Global Error		ClickClass contains alert-box
Form Error	<span class="formError standalone">Select a payment method</span>	ClickClass contains formError
Link	<a class="summary-edit" href="/checkout/details">Edit your details</a>	Click element equals a

NOTE: This will only work, if elemnts have been coded in the same way!

So for example, to track all button clicks along the checkout process, we define the trigger in the following way (under Matomo>Tag Manager>Trigger):

• Page Path contains checkout

• Click Class contains button

Then, a tag (or event) can be set up (under Matomo>Tag Manager>Tags)

where in the bottom we select the previously created trigger that will execute the tag:

Note: Once Triggers and Tags are defined, do not forget to publish the new version of Matomo tracking, otherwise the edits won´t go live.