Event picker and CSS selector
Set up events with the event picker and CSS selector
You can also set up your events using the event picker or by copying your element's CSS selector. CSS selectors can target specific elements in your project. This can be useful if you have multiple language versions of your website, or if you have buttons with no text. You can just select the CSS of the button itself to trigger your event.
Creating events with the event picker
To create events using the event picker:
- Go to Events in the Smartlook app.
- Click Choose event on website.
- In Page URL on the Event picker panel, enter the URL of the page you want the event.
- Click Go to page.
- On your website, you see the event picker. To enable the picker, click Picker off or Pick element.

- Choose the element. As you move your cursor around the page, elements are highlighted in red.
- Enter a name for your event and click Save. You can adjust the precision of the element with the slider.

Your event is now available on your Events page.
Copying and pasting an element CSS selector manually
How to find the CSS selector when using Google Chrome
To find the CSS selector using Google Chrome:
- Hover your cursor over the element you want and right-click it.
- Select Inspect. Chrome DevTools opens with the element highlighted.
- Right-click the highlighted element, click Copy, and then Copy selector.

- In your Smartlook on the Events page, click + New event.
- Select Clicked-on CSS selector.
- Choose the operator and enter your CSS selector. You can add multiple CSS selectors. For more information on how to enter your CSS selector, see Enter CSS selector id or class.
- Click Continue.
- Enter an Event name.
- (Optional) Add additional definitions, or enable Monitor anomalies.
- When finished creating your event, click Save and apply.
Enter CSS selector id
or class
?
id
or class
?When selecting an element, you can choose either the id
or the class
.
In the example above you see the id
and class
. When entering the CSS selector in Smartlook:
- before
id
, add#
- before a
class
, add.
HTML attribute | From example above | What to paste in Smartlook |
---|---|---|
ID | action-component-signup | # action-component-signup |
Class | button button--primary | .button.button--primary |
Enter
id
orclass
in SmartlookBecause the
id
s of elements are generally unique, it is ideal to enter theid
of the element in your event.
class
can be recurring in your project. This could mean that your event is triggered on other elements that you do not want to track.
Updated 6 months ago