Use CSS Selectors to Build your Conversion Funnel

Shivam Bhonsle Updated by Shivam Bhonsle

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 the CSS Selector?

An element represents any part of a website as a tag that gives out instructions to the website on how it should behave or what it might convey. This include the website's structure elements like their images, banners or chunks of text.

CSS selectors define the elements and showcase a path to these HTML website elements. At Insightech, the CSS selectors are used to construct funnels to analyse the behaviours of user's who interact with specific content.

Website Elements

<a href="/contact-us" class="button w-button">Let's Talk</a>

Website CSS Selectors

body > div.section.product-hero.wf-section > div > div

How to Build a Funnel with CSS Selectors?

  1. Navigate to the Dashboard → Funnel → Create New Funnel on the Insightech platform to open up a funnel builder

  1. Open your website in a new tab. Determine the type of content that you are looking to track in your conversion flow
Note - For most funnels, it's important to enter your webpage's URL as the first step to your funnel to ensure that data streams effectively into your websites
  1. Highlight the content on your website before proceeding with a right-click → inspect element.
    1. A pop-up would form that displays the HTML code that is involved in the website's construction. Most browsers will automatically find the specific element that was highlighted.

  1. Right-Click → Copy Selector for the specific line of code that relates to the element that you are tracking. On Chrome, this is the line of code highlighted in blue. 
Note - The CSS selector is not the same as the code that is displayed
  1. Select CSS selector in the funnel step dropdown

  1. Paste the copied CSS selector code for that element

  1. Repeat this process for each subsequent element that you are looking to track in your purchase to fill out the rest of your funnel
Recommendation - Input Page URL for for funnel steps that include a changes in website URLs. Use CSS Selectors for website elements like button and link clicks

Partial CSS Selectors

By copying the CSS selector, you are using the exact pathway for that specific element on the webpage. If you have multiple similar elements that you want to track, consider using part of the CSS selector for the in the funnel. 

Exact CSS Selector for a specific element:

body > div:nth-child(6) > div > div > a

CSS selector for all elements with this feature:

div:nth-child(6)

Note - When creating the funnel, you would would want to switch "is" to "contain" when you are prompted to fill out details for the funnel step.

How did we do?

Set Up Your Conversion Funnel

Funnel Folders

Contact