Back to Blog

Event Picker & CSS Selectors | LESSON #6

March 23, 2018 | Alex Castro | | Smartlook School

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:

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 (1) and select Copy (2), then Copy selector (3).

The CSS selector of the button is now copied to your clipboard. You can now paste it in the event setup form (1), name the event (2), and even categorize it (3). Finish by saving the event (4), and you’re good to go!

What’s even better is you’ll see your data straight away!

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. What kind of events do you track through their CSS selector? Tell us in the comments.

Funnels for Qualitative Analytics | Lesson #7

Discussion