Using element class or ID instead of an xPath

If you're setting up Goals or Waterfalls to track clicks on specific elements or interactions with forms, typically you would add the element’s XPath to an event. This article explores a slightly more advanced technique: using the element’s class or ID to configure Click or Forms events.

Why you may want to use the element's class instead of an XPath

There could be several situations where using the element's class or ID can save you time:

1. Tracking clicks on elements with identical functions but different XPaths.

A common example is an “Add to cart” button, which may appear in various locations on a website: on a product page, category page, or in various sections all over the website. Each type of page will likely have a unique XPath for this type of button, even if visually they look the same. Moreover, on product category pages, the XPath may vary slightly from one product box to another, potentially resulting in numerous XPaths corresponding to the number of products on the page. While building a complex regular expression is an option, it requires more advanced knowledge. It's often simpler to set an event to one consistent value for all such elements – in this case, the element’s class or a portion of it.

Example:

If every “Add to cart” button has class="add_to_cart_button ajax_add_to_cart" you can either use full value between " " or simply copy only class add_to_cart_button if it is unique for the element.

2. Tracking clicks on a specific element sharing the same XPath as other elements.

Although less common, consider a scenario with multiple snack bars on your website. Depending on the user's prior actions, these snack bars may contain different buttons like “Undo,” “Confirm,” or “Learn More.” If these buttons share the same XPath due to the website's HTML structure, you won’t be able to track clicks on each specific button. In such cases, assigning a unique identifier to each button based on its function becomes necessary.

Example: 

If your buttons have unique IDs corresponding to their functions, such as id="undobutton" or id="learnmorebutton” - you can use it to track clicks only on specific types of buttons.

What sets this feature apart as an advanced

So, why don’t we recommend making this option the primary choice over an XPath? This option may seem straightforward at first glance, but it demands a deeper understanding of your website and often requires closer collaboration with developers. Here are several reasons why we consider using element class or ID as an advanced feature:

• Uniqueness. The class or ID must be unique for the elements you intend to track interactions with. For example, using the class "button" to track clicks on the “Add to Cart” might be too general, as it could include clicks on other buttons on the website with the same class.
• Consistency. Every element you wish to track must share the same class. If an “Add to Cart” button on some pages lacks the designated class for any reason, you won’t be able to track clicks on it.
• Considerations for IDs: it's important to follow best practices and recommendations. IDs should be unique attributes that accurately describe the purpose of HTML elements, avoiding generic names and special characters.

How to set a Goal or Waterfall using the element’s class

You can use the element’s class or ID in every event that requires an XPath. It could either be Click or any of the Form events (Focus in, Changed, Focus out, Submit)

To set up a Goal or Waterfall using the element's class or ID:

1. Choose the proper event;
2. Type the Name of the Step (optionally);
3. Instead of the XPath insert the class or ID of the element (or group of elements) you want to track.
4. Save the event.