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:

1. Go to Events in the Smartlook app.
2. Click Choose event on website.
   
3. In Page URL on the Event picker panel, enter the URL of the page you want the event.
4. Click Go to page.
5. On your website, you see the event picker. To enable the picker, click Picker off or Pick element.

6. Choose the element. As you move your cursor around the page, elements are highlighted in red.
7. 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:

1. Hover your cursor over the element you want and right-click it.
2. Select Inspect. Chrome DevTools opens with the element highlighted.
3. Right-click the highlighted element, click Copy, and then Copy selector.

4. In your Smartlook on the Events page, click + New event.
5. Select Clicked-on CSS selector.
6. 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.
7. Click Continue.
8. Enter an Event name.
9. (Optional) Add additional definitions, or enable Monitor anomalies.
10. When finished creating your event, click Save and apply.

Enter CSS selector 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 .

📘

Enter id or class in Smartlook

Because the ids of elements are generally unique, it is ideal to enter the id 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.