You can add track clicks on element(s) goals to collect visitor data and clicks on buttons and elements in your website page. You can define your goal right from the Visual Editor screen where you are making changes to the website, or through the Add Conversion Goals screen of the test creation process.
Add Goals Using Visual Editor
On the visual editor, select the element you want to track and select Track Clicks.
If you are selecting a linked button, the editor opens a widget with pre-filled reference (href) of the link. You can modify the link to a valid URL pattern. All anchor elements which match the URL pattern are tracked under the goal. You can also create a new goal to only to track clicks on an element or add a goal to another existing goal.
Please note that the element you want to track will display for both control and variations and also have the same CSS selector path. However, if you have added the ‘element to track’ via Goals page and the element is only available on one version (either control or variations), VWO will only track data for the relevant variation.
Please make sure to add every element for tracking if the CSS selector path is different. Select “In an existing goal” to track the variations in a single goal.
Add Goals Using the Conversion Goals page
- Select track clicks on element(s) goal option from the list.
- Next, add a valid CSS selector path in the field that displays. Please note that you cannot add XPath instead of CSS selector.
- Make sure that the CSS selector path of the element to track is specified correctly. You can either specify the CSS selector path using the ID of the element, preceded by hash(#)) or the associated class (preceded by dot(.). If you want to track multiple elements under the same goal, specify the CSS selector path for all the elements using comma. For example: #submit-goal1, #submit-goal2
For a split URL test, make sure that control and variation have the same CSS selector path for any “click on the elements” goal. If however, the CSS selector path is different for control and variations, add the selector paths for every element. You can add multiple CSS paths using comma separated value.
For example, in the screenshot below, #VWO-test-container-1 is the CSS path for the control version and #VWO-test-container-2 is CSS path for the Variation version
Find CSS Path of an Element
- Right click on the element you want to track and select Inspect Element. The developer tool display with the element properties.
- Right click on the element property and select Copy and then click Copy Selector.
- Paste the CSS path in the Goals field.
- Right click on the element you want to track and select Inspect Element.
- On the Developer tool, right click on the element property and click Copy and CSS Selector.
- Paste the CSS path in the Goals field. ATTENTION Note: If the element ID is dynamic, then you will have to manually find the shortest CSS path. CSS selector path is calculated from the nearest element ID by default. Click here to know more about CSS selectors.