Custom Feature Tagging

We use the Visual Design Studio to tag Features. The Visual Design Studio is Pendo Adopt’s interface for styling guides, as well as tagging Pages and Features.

To tag Features, you first enter tagging mode, which tells you what elements you’re selecting for tagging with a red, dotted box that follows your mouse in the application. You can then refine this selection with Feature Element Matching options in the Visual Design Studio. When you've selected a UI element to tag as a Feature, the dotted red line turns to a solid red line. Features bounded in a solid purple box are already tagged.

To tag Features in Pendo Adopt, navigate to Analytics > Features and then select Tag Features in the top-right corner.

1. Enter the URL of the target page of your application.
2. Select Launch Designer. This loads the Visual Design Studio.
3. In the Features tab of the Visual Design Studio, select Tag Feature.
4. Hover over and select the area of the page you want to tag. To tag a dropdown menu item, select ALT (for Windows) or Option (for Mac) while opening the dropdown menu to expand it.
5. Choose Create New Feature at the top of the Visual Design Studio.
   
   
    
6. Create a descriptive name that aligns with your company's naming convention for Pendo Features.
7. Add a description, up to 280 characters, so that others know what element you're referring to in your app.
8. Under Feature Element Matching, choose one of the following methods for creating a rule: Suggested Match, Rule Builder, or Custom CSS. For guidance, see Feature element matching in this article.
9. Under Page Location, choose whether you want to track the Feature across the entire application (Sitewide) or on the specific Page (Only on this page).
   
   
    
10. Optionally, open the Settings section to manage dynamic filtering during rule generation. Pendo defines “dynamic” as attribute values that look auto-generated or unlikely to remain stable across sessions (for example, values with mostly numbers or symbols, unusual letter combinations, or no vowels). The following settings work together to prevent unstable rules; turn them off if your target element relies on values that change between loads:
    • Filter dynamic custom HTML attribute values. Filters out dynamic-looking values for the custom attributes your subscription admin defined under Collect custom HTML attributes in your application settings.
    • Filter other dynamic elements on selection. Filters out dynamic-looking values for standard HTML attributes Pendo collects (for example, id and class).
11. Select Save to add the Feature to your Features list.

Tip: Choose Sitewide for navigation buttons because tagging a navigation element on every possible Page variation won't add value.

Match Feature elements

When tagging a Feature in the Visual Design Studio, you have the following options for creating rules under Feature Element Matching:

• Suggested Match. This is the automatic rule created by Pendo, which is based on the element you select on the page. You can use the up and down arrows to adjust your selection to include a larger or smaller area in the Feature rule. If this doesn’t ideally capture what you need it to, isn’t a unique match on the page, or isn’t static, you have the following additional options.
• Rule Builder. This shows you the HTML elements and attributes available in the area that you’ve selected for tagging. You can use these items to create a specific Feature rule that works for your selected area of the application.
• Custom CSS. If you’re comfortable with using Inspect in Google Chrome to investigate the HTML and CSS of your application, this option allows you to add a custom Feature rule based on the elements and attributes available in the area you selected.

Tip: You can use Suggested Match as a starting point and then select either Rule Builder or Custom CSS to refine the rule further. You can also use the Rule Builder as a starting point for defining the CSS syntax that Pendo uses to tag your Features, and switch over to Custom CSS for more control over editing the rule.

Suggested match

When you select an element on a page, Pendo provides a rule and data to help you tag the appropriate element.

Use the arrows in the top-right to adjust your selection by navigating up and down the HTML Document Object Model (DOM) tree of the page.

Use the up arrow to choose a larger clickable area (the relative parent element) and the down arrow to choose a smaller clickable area (the relative child element). For example, you might select the text in a button and want to include the container that the text comes in. You can use the up arrow to navigate up the DOM tree to select the next largest item in the DOM for tagging.

Rule builder

Use the rule builder to create Feature rules based on your application's code without navigating away from the Visual Design Studio. The rule builder allows you to view, add, and remove rule options, with automatic rule formatting to ensure accuracy.

Use the toggle at the bottom of your selection to see unused nodes. A node is an element in the DOM tree, which is a hierarchical representation of a webpage's structure, style, and content. Each gray row represents a node (level) in the DOM tree based on the element you've selected.

Viewing unused nodes is valuable when the nodes that are currently visible in the rule builder aren't sufficient for creating an accurate Feature rule.

Choosing a node that's higher up the DOM tree selects a larger clickable area than choosing a node that's lower down the DOM tree.

As you build your rule with the rule builder, the Visual Design Studio shows you the number of element matches and highlights the tagged area. The Visual Design Studio also shows you the rule as it would be if you created it with the Custom CSS option. You can find this under Selection while you’re building your rule.

The colors of items in the rule builder represent the following:

To further refine your Feature rule in the rule builder, select the cog icon next to the rule.

The availability of the cog and the configuration options vary depending on the type of attribute.

• For #id, options include Default, Starts With, Ends With, and Contains.
• For .class, options include Default and Contains.
• For [attribute], options include Default, Attribute Exists, Starts With, Ends With, and Contains.
• If we can't identify the element type, or the element is an attribute with no value (for example, h2, div, input, and so on), the Default rule applies and the cog isn't available for further configuration.

Each configuration option is defined as follows:

• Default. This is the CSS selector as it appears in the rule builder and isn't editable. It's the raw representation of the selector as initially captured, providing the most specific identification.
• Attribute Exists. Identifies element values that match the attribute without considering the attribute value (the text that follows the equals [=] sign). This option is useful when you want to target elements based on the presence of a specific attribute, regardless of its value.
• Starts With. Identifies element values that start with the entered text. This option is useful when you want to capture elements that share a common prefix in their attribute value.
• Ends With. Identifies element values that end with the entered text. This option is useful when you want to capture elements that share a common suffix in their attribute value.
• Contains. Identifies element values that contain the entered text. This option is useful when you want to capture elements that share a common substring in their attribute value.

Selecting one of these configuration options changes the rule to an attribute with a modifier, allowing you to select the text and adjust the specificity of the rule as needed.

For example, you might have a modal in your app that opens after a user adds an item to their online shopping cart. If you want to tag the "Add to cart" button, but the best selector for that button is randomly generated as id="product-id-1245628-add-to-cart", you'd want to refine your rule. To accurately capture each click of this Feature, you'd configure your rule using the option that best fits your needs:

• Starts With [id^=product-id].
• Ends With [id$=add-to-cart].
• Contains [id*=add-to].

Custom CSS

When you select the Custom CSS option, it pre-populates with the Suggested Match value. To create a rule using custom CSS for Feature element matching:

1. In Google Chrome, right-click an element you're trying to tag and select Inspect.
2. In the Elements tab, inspect the Document Object Model (DOM) tree, which contains the page data.
3. Look for a specific, human-readable class for the element you're inspecting.
4. In the Custom CSS text box, write . instead of class, and then copy the string exactly as it appears in the code, with periods instead of spaces, for example, class="sidebar-item js-sidebar-type-d would be written as .sidebar-item.js-sidebar-type-d in the text box.

Understand good Feature rules 

This section summarizes best practices for creating Feature rules. 

View tagged Features

There are a few ways to view and edit tagged Features in Pendo:

• In the Visual Design Studio heatmap while tagging another Feature.
• By choosing a Feature from the list in the Visual Design Studio when it launches.

In the heatmap in the Visual Design Studio

The heatmap in the Visual Design Studio generates a color-organized view of Features that have already been tagged while you’re tagging another Feature. 

Use the heatmap to get a view of Feature usage within the last 30 days. The “hotter” (closer to red) the Feature, the more it’s used. To view the heatmap:

1. Go to Analytics > Features in Pendo.
2. Select Tag Features in the top-right corner. 
3. Select Launch Designer. This opens the Visual Design Studio.
4. Turn on the Heatmap at the bottom of the modal.
   
   
    
5. If needed, expand the heatmap settings using the plus (+) icon to the right of the heatmap toggle. Here, you can update the heatmap to reflect usage of a specific Segment. By default, the segment is set to Everyone.

While the heatmap is turned on, you can also open an individual Feature from the list in the Visual Design Studio to view its mapping along a visual scale, from blue on the left to red on the right. This view provides additional metrics, including Total Clicks, Unique Visitor Clicks, and Accounts.

In the Visual Design Studio

1. Go to Analytics > Features > Tag Features in Pendo.
   
   
    
2. Enter the URL of the page of your application that the tagged UI element is on.
3. Select Launch Designer to open the Visual Design Studio.
4. In the Features tab, Tagged Features opens by default. Select the Feature you want to view or edit. The modal displays the name of the event, associated app, Page location, and the names of the users who created and last updated the tag.
5. To view recent metrics for this Feature, select Metrics at the bottom of the modal. Select a Segment to view metrics for a specific group of users.
6. To edit the Feature, select Edit Feature in the bottom-right corner.
   
   
    
7. Optionally:
   • Edit the name of the Feature.
   • Add a description for the Feature, or update the description if one already exists. The description must be 280 characters or less.
   • Re-target the UI element associated with the Feature.
   • Change the Page Location.
   • Add event properties.
   • Turn Filter dynamic custom HTML attribute values on or off to control dynamic-looking values for custom attributes defined in Collect custom HTML attributes, and use Filter other dynamic elements on selection to control dynamic-looking values for default attributes, such as id and class.
8. If you made changes, select Save Changes in the bottom-right corner.