Extracting classes for Waterfall events
So far, as you know, we used XPath to track events like clicks on the website (see: Extracting xPath for Waterfall events). To discover the page element XPath, you needed to tell CUX which HTML element you have in mind. Now, instead of the ID that’s part of the HTML attributes you want to track, you can type in the element class.
Tracking events using classes
From now on, if all items you want to examine have the same class (e.g. <button class=”accept”>), you can track them in CUX using this class.
To extract class for Waterfall events:
- Navigate to the page on your site.
- Find the element you want to track in your Waterfall.
- Right-click the element.
- Use the “Inspect” or “Inspect element” function. This opens the developer tools window or pane. In the developer tools window, a part of the HTML code that represents the chosen element is selected.
- Copy the element class (e.g. <button class=”accept”>).
- Paste the copied value in the Class field of the Waterfall creator.
Track clicks using xPaths or classes in CUX
Two ways of writing down classes:
- accept – CUX will focus on all elements that have the “accept” class and on those which have the “accept” class and any other classes,
- “accept” – CUX will focus only on elements that have the “accept” class.
Why track events using classes?
xPath is information about a specific element on the page, which means that you can precisely target a specific element, e.g. a button, thanks to which we will be able to measure clicks. But what if we want to measure a click on any of the many buttons? For example, if you have 100 buttons like this on your page?
If all these elements have the same class, e.g. accept, you can measure them using classes.
NOTE: If you use classes for the Click event – always select “Contains (regexp)” in the Comparison tab. If you use XPaths, choose “Matches”.