Tracking an Event

Setting up an Event in Smartlook is a simple process. The main reason for this is all the Events are automatically tracked in the Smartlook recording sessions. So really - you're just indexing the data which you already have and making it more easy to find and segment for later.

Tracking an Event

Start by going to the Events tab and creating a new event:

Visited URL events

With clicked-on events, you will know the number of clicks on a specific button, link, or element of your website. You can now define a new event by its visited URL.

With these two types of events, you can compare, for example, the number of people that visited your product page (page views) with the number of people that clicked the “Save” button (clicked-on) to add products to their favorites list.

The setup is really easy. All you need to do is to paste the URL of the page, and Smartlook gives you the numbers. Later in this lesson, you will learn how to compare events.

Clicked-on text events

You can get data on specific user actions that do not generate changes in URL, such as clicks on some buttons or interactions with upsell windows.

Let’s say you just introduced a new feature — a heart button that users can click to save a product to their favorites list (a bit like saving apartments on Airbnb).

Since clicking this button does not redirect the user to another page, it is impossible to track the usage of this button via page tracking. You need to be able to track clicks on this button, but how?

You have introduced this “Save” button and you want to track every click across your whole website. Do this by setting up an event for when users click on the element that contains the textSave”.

If you have more buttons on your website with the same text and you want to track a specific one, there is another way to set up clicked-on events via the element’s CSS selector. Read more about it in the next lesson.

Typed text events

In addition to tracking clicks and page views, you can also track your users’ text inputs. Of course, sensitive information, such as passwords and credit card details, are automatically blocked, meaning they are not tracked.

Let’s say you have a search engine on your site that your visitors can use to search for specific products or brands. You can track text entries to find out how many of your visitors search for Adidas products.

This can give you insights into your audience’s interests. Are there any specific search terms being searched more frequently? Keep an eye on your audience’s searches by tracking specific text inputs (typed text).

After saving the event, you will see your data straight away!

Setting up events using the Event Picker

Use our Event Picker to detect the CSS selector of the element on which you wish to track the click activity.

On the event manager, click the “Pick event On Page” button.

Insert the URL of the page you will be picking the event from.

On the page, you will see a pop up where you can click, to enable the picker.

Pick the element you want to track and set up the event on the go.

You can adjust the precision of the selector. This way you can capture clicks on elements with common CSS attributes.

Manually pasting the element’s CSS selector

How to get a CSS Selector of an element

If you use Google Chrome as your browser, all you need to do is right-click on the button or element (1) and select Inspect (2).

This will open your browser’s Developer Tools with the specific element highlighted. Right-click on that element (#) and select Copy, then Copy selector.

What part should I select? HTML Attributes: ID or CLASS?

When Selecting an element, you can choose either a class or id

An ID should always be unique and therefore be the ideal choice to track your event.

HTML Attribute:

In browser above example

Paste to Smartlook example

ID (unique)

action-component-signup

#action-component-signup

Class (possibly recurring)

button button--primary

.button.button--primary

As seen in the above example, an id copied from your website into smartlook should include the hastag (#) marker in front of the text. A class copied into Smartlook should include a fullstop (.) in front of the text and between any separated text.


If you track events using a class it may happen that the data in Smartlook includes interactions you don't want to include. In this case, you can add id's to the elements in your website or app, or you can add custom events. Both options require the assistance of a developer and cannot be done from the Smartlook dashboard.


The CSS Selector of the button is now copied to your clipboard. You can paste it into Smartlook similarly to the ID in the example below:

Click Continue and then simply categorize and name the event however you wish. The example below gives a long and specific name for clarity. The click save and apply.

Here's the great new - You don't have to wait to see new data. Smartlook displays the event for the entire data range which your account has recordings. The standard is 30 days, however this can be extended.

Can’t track your events using CSS selector?

Sometimes, the button you want to track has a repeated selector or you need to track a modal popup-window. In this case, set up your own custom events using our API.

Events directly from the player:

The Event feed shows every interaction in the session. All events are clickable items..

The Events can also be viewed in the action sidebar:

You can double-click on any event, as seen below with the example of the "View Cart" button. This will allow you to see all the visitors who completed the save event.

This will allow you to see the total amount of visitors who complete an action.

Event statistics

Now let’s take a look at the data you can see.

After you set up an event, you will see a graph with the number of events throughout time, depending on from when you want data — the last day, week, month, or a specific date range (1). Adjust the graph according to your needs. You can also see the total number of times the specified event was triggered or the number of unique users that triggered the event (2). Even adjust the horizontal units of the graph: see the daily, weekly, or monthly evolution (3).

Get weekly reporting E-mails about important events

If there's a very specific event which you need to stay on top of, you can activate Weekly Event Reporting.

Simply choose the date of the week which you link to receive the email (1), the email recipient (2) and Enable this report (3). Then you will be kept up to date on your important event even when you're not on the Smartlook dashboard.

Compare and watch recordings of your events

You can (1) view up to four events in charts. The total number of (2) unique visitors who complete an event is listed under the chart. It is possible to jump to the moment in the moment in the recording where the event occurred by (3) clicking the play button. To add additional events to the chart for comparison, simply (4) click the plus button or alternatively use CTRL/CMD + left click on an event in the action sidebar.

Merging 2 or more events (Composite events)

Often it's not only necessary to compare events, but to also combine the total events. This can be useful to see complete metrics, but also to use as a starting point when building a funnel. To merge events click "Create new event" and continue..

Select two more events to create the composite event. In this case, we'll use two separate buttons which perform the save action (Create an account).

You can also create a composite event directly from the event chart when two or more events are actively selected:

Watching recordings of the events

Once you click the “play” button, you are redirected to the recordings view of the dashboard. However, the recordings you see are filtered (see below), so the selection you see contains only recordings in which this specific event occurs.

You can also save the event filter as a segment and easily get a feed of recordings, for example, for your visitors that search for Adidas products.

Event drop-in

When you play a recording, the filtered event will appear on the timeline tagged with a flag. The recording will start playing 5 seconds before the moment the event occurs, so you don’t need to search through the recording — Smartlook will 'drop you into' the recording where the event occurred.

This is a huge time saver when you're looking for a specific moment in a recording. If you discover something worth sharing with a colleague, it only takes a few clicks. See how here.

Did this answer your question?