How to Track Clicks on Element in VWO?

The Track Clicks on Element(s) goal is typically used to collect visitor data and clicks on buttons and elements present on your website. To know more about this goal, refer to the Track Clicks on Element(s). In VWO, you can define your testing goals in two ways:

1. Adding goals from the Visual Editor UI. 
2. Add goals using the Goals page during the test creation. 

Adding Goals From the Visual Editor UI

On the visual editor, select the element you want to track and choose the option Track Clicks. 

If you are selecting a button, the editor opens a widget with a pref-filled goal name. You can modify the goal name per your requirements and click DONE. Post this, a new goal to track clicks on an element appears on the goals page. 

Ensure 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.

To learn more, refer to How to Add Goals Using Visual Editor.

Add Goals Using the Goals Page During the Test Creation

You can define the element you want to track on the Goals setup page.

Procedure

1. Login to your VWO account.
2. Go to Testing > A/B, or you can select any other testing type per your requirements.
   A/B Testing dashboard appears.
3. In the dashboard, click CREATE.
4. In the Enter URL of the page you want to test field, enter the URL of the webpage you want to test.
   
   NOTE: To include or exclude URLs from the campaign, click the ADVANCED tab present next to the URL field. Using this tab, you can also define advanced pattern-matching options to either include a broad URL with wildcard entries or a specific URL. To learn about using different URL patterns, refer to Using URL Patterns in VWO.
5. From the What hypothesis are you testing? dropdown, select a hypothesis you want to work with. This is an optional step.
   NOTE: If you do not have a hypothesis yet or wish to create a new one, you can do so by clicking on the Create a New Hypothesis option present at the bottom of the hypothesis dropdown. To learn more about the hypothesis, refer to Hypothesis in VWO.
6. In the Variations step, click Next.
7. In the Goals step, click the edit icon present next to the New Goal and enter the name for your goal.
8. From the Goals Type dropdown, select the option tracks clicks on element(s).
9. Next, add a valid CSS selector path in the field that displays. To learn how to find the CSS path, click here.
   
   NOTE: You cannot add XPath in place of a CSS selector.
10. 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 a hash(#)) or the associated class (preceded by a dot(.)).
    
    INFO: To track multiple elements under the same goal, enter their respective CSS selector paths separated by a comma in between.
    
    NOTE: VWO will not track any conversions if the element has a dynamic CSS selector path. Ensure that you use static CSS classes to specify the path in goal settings.
    For example, in the screenshot below, #VWO-test-container-1 is the CSS path for the control version, and #VWO-test-container-2 is the CSS path for the Variation.
11. For a Split URL test, make sure that control and variation have the same CSS selector path for any click on the element goals. However, if the CSS selector path is different for control and variations, add the selector paths for every element separated by a comma. 
12. For example, in the screenshot below, #VWO-test-container-1 is the CSS path for the control version, and #VWO-test-container-2 is the CSS path for the Variation version. To know more, refer to How to Create a Goal in VWO Testing?
    

How to Find the CSS Path of an Element?

Google Chrome

1. Right-click on the element you want to track and select Inspect Element. The developer tool displays the element properties.
2. Right-click on the element property and select Copy and then click Copy Selector.
3. Paste the CSS path in the Goals field.

Mozilla Firefox

1. Right-click on the element you want to track and select Inspect Element.

2. On the Developer tool, right-click on the element property and click Copy and CSS Selector.

3. Paste the CSS path in the Goals field.

If the element ID is dynamic, then you have to manually find the shortest CSS path. It is calculated from the nearest element ID by default. To know more about CSS selectors, click here.