Use CSS Elements to Build your Conversion Funnel
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.
<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?
- Navigate to the dashboard → funnel → create new funnel on the Insightech platform to open up a funnel builder
- Open your website in a new tab. Determine the type of content that you are looking to track in your conversion flow
- Highlight the content on your website before proceeding with a right-click → inspect element.
- 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.
- 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.
- Select CSS selector in the funnel step dropdown
- Paste the copied CSS selector code for that element
- Repeat this process for each subsequent element that you are looking to track in your purchase to fill out the rest of your funnel
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: