Now that you can track your user events using Smartlook, it is easy to aggregate data on how your users are interacting with your product or website. But how about how many visitors are using your specific features? In this lesson, you will learn how to set up events selectively using the CSS selector of the elements on your website.
How to set up events by CSS selector?
You have two ways to set up events by CSS selector:
- Using our event Picker
- Manually pasting the element’s CSS selector
First of all, what is a CSS selector?
Your website is built using HTML, which makes the building blocks (HTML elements, such as images, text blocks, header texts, navigation bars, buttons, etc.). It’s also built with CSS, which defines the visual appearance of the page’s layout (styles).
In CSS, selectors are used to target the HTML elements on the pages that we want to style. In order to apply the styles, CSS selectors are set as attributes for the respective HTML elements. Here is what a CSS selector can look like:
#sign-up-panel > div > div.button-with-note > a
Why should you set up an event by CSS selector?
You can easily set up a clicked-on event for tracking clicks on a button or hyperlink with specific text. But if you have a multi-language website on which one button has different text because of translations, or you want to check events on elements where is no text (e.g., buttons with just an icon), then you need to use a CSS selector to choose any element on your page to be tracked.
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.
In browser above example
Paste to Smartlook example
Class (possibly recurring)
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.
In this lesson, you have learned how to:
- Track clicked events in a selective way with CSS selectors
- Set up an event using the event picker
- Get the CSS selector of an element on your page
- Set up an event in Smartlook by defining it via CSS selector
Now it’s up to you!
Make your event tracking more specific with CSS selectors.