How to Track Clicks on Element

Last updated

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.

Add Goals Using the Conversion Goals page

You can define the element you want to track the Conversion Goals page. If you are self-hosting JavaScript files on your server, make sure to update the VWO JavaScript library after making these changes.

  1. Select track clicks on element(s) goal option from the list.
  2. Next, add a valid CSS selector path in the field that displays. Please note that you cannot add XPath instead of CSS selector.
  3. 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

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

Find CSS Path of an Element

Google Chrome

  1. Right click on the element you want to track and select Inspect Element. The developer tool display with 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.
    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.

Contact Us / Login

Product
Resources Home