CSS Selectors Explained & How to Use Them

This article covers another approach for setting up a funnel that can be used to analyse user behaviour as they interact with your website. Extracting the CSS selector from an element on your website is an effective method to create a funnel for your customer purchase flow.

What is a CSS Selector?

A CSS selector is a pattern used to select one or more elements on a webpage based on their HTML structure, attributes, or position.

How Insightech Uses CSS Selectors

In traditional CSS, selectors are used to apply styles. In Insightech, selectors are used to identify which elements have been interacted with by your users, to map the data to those same elements in session replays and in the chrome extension, and are also used when customising your tracking settings.

All reports in Insightech use the Chrome Standard, and use the standard CSS Selector position.

What kinds of CSS Selectors are there?

CSS Selector Type

Explanation / HTML Example

How It Appears as a CSS Selector

Standard CSS Selectors

These define exactly where an element lives within a page.

These are like library book IDs that tell you which floor, section, row, and exact position a book a book must sit.

Here is an HTML example which we will show as a CSS Selector on the right:

<ul id="navigation-menu">

    <li class="nav-item">
        <div> Home </div>
        <div> About </div>
        <div>
            <a href="/pricing/">Pricing</a>
        </div>
    </li>
</ul>

Here is an example of a navigation menu link:

#navigation-menu > li.nav-item > div:nth-child(3) > a

Each section is also separated by a ">" to identify the next sub-element.

In the example above, the element lives directly under the Navigation Menu, a List Item, the 3rd DIV element

Element Tags

Targets all elements of a specific HTML type. For example:

<button>

<input>

<form>

Element tags will show up in your CSS as they are, without any additions. So our examples on the left will look like:

button

input

form

CSS Classes

Classes are like stickers that you apply to multiple elements to quickly identify them for bulk changes/updates.

They are most commonly used in website styling. For example, every button that you want to style with a blue colour, your HTML code might look something like this:

<button class="blue-button" >Click Me</button>

Classes will show up in your CSS with a "." before them.

For the Blue button example, you will see a class shown in the CSS selector like this:

.blue-button

Element IDs

IDs are unique, and there should only ever be 1 of each ID assigned across a webpage, however there can be multiple elements within that element.

For example, a navigation menu with an ID might have HTML that looks like this:

<button id="navigation-menu">Menu</button>

That same element may also have lots of sub-elements (e.g. sub-menus).

Element IDs are always led with a hash "#". So our navigation menu example will look like this:

#navigation-menu

Attributes

Attributes are often used when an element has a specific value assigned, or stored within it.

For example, an input element for a promo code might have HTML that looks like this:

#signup-form > div.field-group > input[promo-code="summer"]

Attributes are always surrounded in square parentheses [ ], and have the attribute, and any expected value after an equals "=".

[promo-code="summer"]

How do I use Selectors to find elements in Insightech Reports?

When Insightech stores activity and events for each element, it also captures the standard CSS Selector (position) to identify which element that behaviour or event happened with.

To use/find specific elements within Insightech, we need to use the standard CSS Selector to find them, as this is what is recorded against those elements.

Please see table above for examples

How can I find an element's CSS Selector?

Finding the CSS Selector in Insightech
  1. Open a Session Replay or Clickmap showing the specific element you want
  2. Click on the 'Analytics' Tab --> Inspect Elements
  3. Click on the element you want to select
  4. You will now see a pop up with element information
  5. Copy and paste the CSS Selector OR click 'View Performance' to build a report with this element

Finding the CSS Selector in your Chrome Browser (live website)
  1. Open Chrome, and navigate to the page you want
  2. Right-click the element you want to track
  3. Select Inspect (to open up developer tools)
  4. Right-click the highlighted HTML node
  5. Choose Copy → Copy selector
  6. Paste it into Insightech

Customising Tracking Settings in Insightech using CSS Selectors?

While Insightech reports require the standard CSS Selector to find elements, we can instead use ANY CSS class, ID, attribute, element, or path that exists on the live website to customise Insightech tracking settings.

Examples of Tracking Settings that Use CSS rules

  • Content Masking / Whitelisting Rules
  • Rage Rage Click Settings
  • Dead Click Settings
  • Error Message detection

When adding CSS classes, attributes or rules to tracking settings

  1. Add a CSS selector or CSS class to a new line, that matches the element/s you want to include/exclude from your the tracking settings. Each new CSS rule must be on a new line.
  2. Click Save Settings to save your new rules to your tracking settings

How did we do?

Point and Search with Insightech

Contact