Detecting the right element
To ensure that you're uniquely identifying the element and tracking the activity of the right feature, you can further specify the element that you're attaching the feature to by enabling the 'Manual' option from the sidebar menu.
Once enabled, you'll be given the ability to utilize the use of CSS selectors for the tagged element in Userpilot.
What is a CSS selector?
Elements are simply boxes on the page identified by their HTML and CSS, Userpilot identifies the element you have selected using CSS Selectors: these are used to select and target the HTML content on your web app. There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style; CSS selectors select HTML elements according to their id, class, type, attribute, etc.
You can find the HTML content and related CSS selectors are used as a particular element by simply right-clicking and inspecting that element. We recommend asking your developers if you're missing information here.
When should I manually adjust the CSS selectors?
We recommend manually adjusting the CSS selectors only if your element is not unique. Some examples of these cases could be when:
- The element couldn't be properly detected on the page which happens in rare cases.
- The unique element couldn't be found due to the presence of too many similar elements on the page
How to manually adjust CSS selectors?
Once you have a more specific selector, go to the Event drop-down in the side menu. This option allows you to easily select and edit the individual selector to control how the element is selected.
