Table of Contents

This article covers another approach for setting up a funnel that can be used to analyse a user's behaviour as they interact with your webpage. Extracting the CSS selector from an element on your webpage is an effective method to efficiently create a funnel for your website's 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 includes the webpage's structural elements such as 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. 


1) Website Elements

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


2) Website CSS Selectors

body > div.section.product-hero.wf-section > div > div > div.column.desk-6.tab-8.mob-12 > div > a

Guide

Below is a step-by-step tutorial on how to use CSS selectors to create funnels directly from your website: 

  1. Navigate to the dashboard → funnel → create new funnel on the Insightech platform to open up a funnel builder

  2. Open up your webpage in a new tab. Determine the type of content that you are looking to track that's apart of your business's purchase 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


  3. Highlight the piece of content on your webpage before proceeding with a right-click → inspect element. Here, 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.

     
  4. 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. NoteThe CSS selector is not the same as the code that is displayed.

    Example CSS selector: 
    body > div.section.product-hero.wf-section > div > div > div.column.desk-6.tab-8.mob-12 > div > a


  5. Fill in the details on the funnel creation page. Choose CSS selector and paste the copied CSS selector code for that element.



  6. Repeat this process for each subsequent element that you are looking to track in your purchase to fill out the rest of your funnel. Note: Inputting Page URLs into the funnel steps when there are different pages in your purchase flow is also crucial to an effective funnel. Read more about this here



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.