Overview
Rather than inspecting elements of your web page with the developer tool to determine HTML IDs and Class Names of features, the Pendo Tagging Aid allows users to simply hover over any of your pages elements to see their attributes. Attributes of specific elements can be locked in the tool, and complex feature tags can be developed using a simple point-and-click system.
Requirements
-
Download the Pendo Tagging Aid from the Chrome Web Store.
Build Your Own Element
When feature element matching, Pendo's "Suggested Match" is not necessarily the most suitable choice. By default, Pendo provides the most unique selector, but for applications with dynamic selectors, the selector needs to be generic to tag the feature appropriately. The Pendo Tagging Aid, however, will show you all of the possible selectors you can use to build your own tag. Let's say, for example, you wanted to tag this "Trust Radius" (1) tile below to know who is clicking on this specific integration.
If we look at the tag (2), we'll find it's pretty messy - it has a contains rule with extra text we don't need. We can use the Pendo Tagging Aid to find a selector that is a bit better.
Select New Element
Begin by selecting the "Select New Element" (1) button.
Then click on anything within the feature (1) that you would like to click. You can use the arrows (2) to expand or contract based on the element you've clicked and you can read more about the specific feature you're looking at (3).
Testing Class Selection
Let's say we want to have a ".pendo-card" class. We can click the element (1) and then test the rule (2) to see where it appears on the page. Once we click "Test Rule", the places that the element appears will be highlighted in red. Next to the "Stop Testing" button (2), we can see there are 58 matches.
To be more specific, we can go ahead and add the ":contains" statement, but it still has plenty of extraneous text that we want to remove. To modify the text, click the "Settings" cog (1).
We can then modify (1) the text to ensure it contains a smaller subset of the original text.
Custom CSS field
One the text has been modified, copy (1) the selector into the Custom CSS field (2) in the Pendo Visual Designer.
When we do that, and close the Pendo Tagging Aid, we can see that it has now given us that the tag that we want (1) and the right element has been captured with a concise tag (2).
