This guide explains how to use the Visual Selection tool to identify and track specific elements (such as forms, buttons, or text fields) directly on your website, without needing to know HTML code.
The Visual Selection tool loads your website inside a modal window, allowing you to point and click on the element you want to track.
Prerequisites
Before starting Visual Selection, make sure you have saved your Tracking project. If you are creating a new goal, you need to save the form at least once.
Step-by-Step Procedure
Visual Selection is available within the settings of specific Goals (such as "Form Submission" or "Click").
1. Access the Goal
1. Go to the editing section of your Tracking Project.
2. Click on the Goals tab.
3. Activate the desired goal (for example, "Form Submission" or "Click") by clicking the Activate button.
4. Scroll down to the configuration section of the newly activated goal.
2. Launch the Visual Selection Tool
Depending on the goal you are configuring, the tool can be started in two ways:
A. For selecting Forms or Buttons (Click):
1. Locate the field that requires a selector (e.g., "Form Selector" or "CSS Selector").
2. Under the guided input label, click the button:
- Search form on site (for forms)
- Visual Selection (for clicks)
B. For selecting specific fields (e.g., Price or Title):
1. Locate the input field that requires a selector (e.g., "Product Name" or "Product Price").
2. Click on the magic wand icon (<i class="fa fa-magic" aria-hidden="true"></i>) next to the field.
3. Interact with the Website
After clicking on the selection button, a new window (modal) will open loading your website:
1. Wait for the page to fully load. If the iframe shows "Loading...", wait a few seconds. If loading fails, ensure that the Integration code is installed on your site and that the project has been saved.
2. In the website window, locate the element (form, button, field) you want to track.
3. To select the element:
- Right-click on it,
- or press and hold the left mouse button for more than 1 second.
4. Confirm Your Selection
1. After selection, a small dialog box will appear showing the automatically generated CSS selector.
2. Click on the Confirm button.
The CSS selector will be automatically inserted into the corresponding input field in your tracking goal.
> Tip: If you are configuring multiple consecutive fields (like "Content Title" and "Content Value"), the tool will try to guide you automatically to select the next field after confirming the first one.
