Tagging and viewing Features

Last updated:

Tag Features to uncover usage patterns in your application and to target guides. Features are managed in Product > Features, which you can find in the left-side navigation.

Feature tagging rules

Pendo creates Feature tags (also known as "tagging Features") based on rules. Rules define the HTML and CSS that Pendo interprets to tag your Features. 

HTML and CSS are two of the basic building blocks of a Website. HTML is the Markup language used to provide the content and structure for a Website. CSS is the Markup language used to apply styling to HTML elements. CSS syntax is used for Feature tagging and guide positioning in Pendo.

HTML is made up of element tags, which provide the context needed for the Web browser to display the site. Example HTML elements include <button>, <h1>, and <p>. HTML elements can also have attributes, commonly class and id.  The contents of these attributes, CSS selectors, identify and style specific elements of a Website. Pendo relies on these selectors to identify feature clicks and to target guides.

Both HTML elements and attributes are used heavily by CSS to provide styling to specific parts of your application. In the example below, the HTML element is <div>, the HTML attribute is class, and the contents of the attribute (the CSS selector) is d-sm-flex align-items-center.

<div class="d-sm-flex align-items-center">

Tag Features

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

To tag Features, you first enter Tag Mode, which tells you what elements you’re selecting for tagging with a red, dotted bounding 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, navigate to Product > Features and then select Tag Features in the top-right corner.

  1. Enter the URL of the target page of your application.
  2. Choose a tagging mode: Tag side-by-side or Tag in an overlay. For more information, see Tagging with the Visual Design Studio.
  3. Select Launch Designer. This loads the Visual Design Studio.
  4. In the Features tab of the Visual Design Studio, select Tag Feature.
  5. 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.
  6. Choose Create New Feature at the top of the Visual Design Studio.

    Adopt_VDS_TagFeature.png

  7. Create a descriptive name that aligns with your company's naming convention for Pendo Features.
  8. Add a description, up to 280 characters, so that others know what element you're referring to in your app.
  9. Assign a Product Area to the Feature using the dropdown menu.
  10. 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.
  11. 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).

    Feature_Element_Matching.png

  12. If you need to capture additional data when a visitor interacts with this Feature, open the Event Properties dropdown to add event properties. For more information, see Click Event properties.
  13. Optionally, open the Settings section to turn Filter Dynamic Elements on Selection on or off. If your Feature involves elements with dynamic identifiers (for example, an ID that changes with each page load), this setting controls whether Pendo attempts to filter those dynamic elements out of the rule generation process. We recommend keeping this setting turned on to enhance the accuracy of rule generation.
  14. Select Save to add the Feature to your Features list.

Tip: Choose Sitewide for navigation buttons because it won't bring value to tag a navigation element on every possible Page variation.

Feature Element Matching

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.

For more information about CSS selectors, see Using CSS selectors in Feature tagging.

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.

UpDown_Arrows.png

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.

Rule Builder – Show unused nodes.png    Show unused nodes.png

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.

Rule builder selection.png

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

Color

HTML elements and attributes

Example

Purple

HTML classes, usually a good selector, though multiple elements on the page can have the same class.

class=“align-center”

 

Green

HTML element types

div, p, button, a

Yellow

HTML attributes

href, src, alt

Light blue

HTML ID, usually the most unique selector on the page.

id=“myHeader”

Dark blue

HTML text "contains" statement. This is a Pendo-specific option that allows you to tag elements based on the text contained within them. Only available if the subscription setting Allow Text Capture in Web Applications is turned on.

contains('Set up')

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

VDS_RuleBuilder_Cog.png

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

  • For #id, options include DefaultStarts WithEnds With, and Contains.
  • For .class, options include Default and Contains.
  • For [attribute], options include DefaultAttribute ExistsStarts WithEnds 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 ExistsIdentifies 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.

As an 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.

For more information about the CSS for Feature tagging, see Using CSS selectors in Feature tagging.

Good Feature rules 

This section summarizes best practices for creating Feature rules. For more information about CSS selectors, see Using CSS selectors in Feature tagging. For more detailed guidance on creating good rules for Feature tagging, see Advanced Feature Tagging

Guidance

Example

Tags should consist of a CSS ID (#char) that is specific and static.

#saveMessageButton

Tags should be included in a CSS Class that uniquely identifies the object.

.emailSettingsSubmit

Tags should include text that contains a string that uniquely identifies the element.

A:contains("Log Out")

Tags shouldn’t be too specific or change session-to-session or user-to-user.

Don’t use: 

A:contains(You have 16 new messages)

Use: 

A:contains(message)

Tags shouldn’t include dynamically changing elements, often indicated by the inclusion of a seemingly random string of characters in the CSS selector. 

Don’t use: 

<div class=“sc-element-6gY8Tkk”

Use the ^ symbol to capture only the start: 

<div class^=“sc-element”>

View tagged Features

There are two ways to view tagged Features in Pendo:

  • In the Pendo UI by navigating to Product > Features.
  • In the Visual Design Studio Heatmap while tagging another Feature.

The Features list in the Pendo UI

To view a list of tagged Features, navigate to Pendo > Features from the left-side menu. There are filters above the Features list that you can use to modify the table view:

Filter Description
Segment

The default is Everyone. Use the dropdown to select either a segment or select + Create New Segment at the bottom of the menu.

Date range Use the dropdown to choose from predefined values, or choose a Custom Range for a specific time period.
Accounts Use the dropdown to choose to view all your Features regardless of account, or choose to view Features by account.
Apps Use the dropdown to choose to view all your Features regardless of application, or choose to view Features by application.
Type Use this dropdown to filter your Features based on whether the tag was created manually (Custom), automatically by Pendo based on custom HTML attributes (Automatic), or, for Pendo Launcher customers, from pre-tagged Features in the extension app (Inherited). If you're no longer using a pre-tagged Feature, it can instead be labeled as Inactive. This filter option doesn't display if you only have one type of Feature in the table.
Star icon Use the star icon next to the four main filters to only show Features that you've favorited. 
Product Areas Use the pick list below the four main filters to only show Features that belong to specific product areas in your application.

The Features list provides an overview of your tagged Features in a table view. In this list, you can see all tagged Features and the following information about these Features depending on the columns you choose for the table.

  • Name. The Feature name. You can edit this in the Visual Design Studio or by opening the Feature details from the Features list and selecting the name at the top of the page.
  • Description. The Feature description. You can edit this in the Visual Design Studio or by opening the Feature details from the Features list and selecting the description (or Add a description if no description exists) at the top of the page.
  • Core Event. If the Feature has been selected as a Core Event, the label "Core" displays here. For more information about Core Events, see Set up Core Events.
  • App. The application that the Feature is assigned to. You can't edit this.
  • Product Area. The Product Area that the Feature is assigned to, or “No Product Area” if none was assigned. You can edit this in the Visual Design Studio or by opening the Feature details from the Features list and selecting the Product Area dropdown at the top of the page.
  • Created Time. The date and time that the Feature was originally tagged.
  • Created By. The Pendo user who originally tagged the Feature.
  • Last Updated Time. The date and time the Feature rules were last updated. Any modification to the Feature rules revises the last updated time.
  • Last Updated By. The Pendo user that last updated the Feature.
  • Page. The Page tag assigned to the feature or "All Pages" if the Feature is sitewide.
  • Rules. The rules behind the Feature tag. You can edit this in the Visual Design Studio or by opening the Feature details from the Features list in the Details section at the top of the page.
  • Number of Accounts. The number of unique accounts that have used the Feature within the segment and date range specified at the top of the page. For example, if two unique visitors from a single unique account use the Feature, the total number of accounts would be 1.
  • Number of Visitors. The number of unique visitors who have used the Feature within the segment and date range specified at the top of the page.
  • Number of Clicks. The total number of clicks of the Feature from all visitors within the segment and date range specified at the top of the page.
  • % of Feature Clicks. The percentage of visitors within the segment and date range specified at the top of the page who used the Feature.
  • Average % of Daily Feature Clicks. The average percentage per day of visitors within the segment and date range specified at the top of the page who used the Feature.
  • Number of Event Properties Setup. The number of Feature Click Event properties set up for this Feature (the maximum is five). For more information, see Click Event properties.
  • Feature ID. The unique identification value for a specific Feature, useful for API, Data Sync, and bulk update or delete requests.
  • Type. How the tag for the Feature was created. Custom refers to tags that you've created, Automatic refers to tags that were automatically created by Pendo based on custom HTML attributesInherited refers to tags that were pre-defined by the application (extension apps like Salesforce), and Inactive refers to inherited (pre-defined) tags that you no longer want to use.

Search the table by name, description, and rules.

To customize your columns, select the Manage columns icon in the top-right corner of the table. In the window that opens, you can add, remove, and reorder columns in the table.

Features_ManageColumns.png

Tip: Add the Page column to your table view to see if the Features you’ve tagged are Page-specific without having to open the details of each tagged Feature.

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. For more information, see Feature heatmap (Visual Design Studio).

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. In Pendo, navigate to Product > Features.
  2. Select Tag Features in the top-right corner. 
  3. Select Launch Designer. This opens the Visual Design Studio.
  4. Toggle on the Heatmap.
  5. Set the Segment that you’re interested in.

While Heatmap is toggled 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.

Favorite Features

You can favorite Features and then use the star icon in the filter section to show a list of your favorite Features. Your favorite Features list is only visible to you and only you can edit it.

To favorite a Feature, select the star icon next to a Feature in the table view of Features.

Features_Favorite.png

You can also favorite a Feature from within the Feature's details page. Open the Feature from the table view and select the star icon at the top of the details page, next to the Clone Feature icon.

FeatureDetails_Favorite.png

Manage tagged Features

There are two ways to view and edit existing Features in Pendo.

In the Feature details

  1. Navigate to Product > Features.
  2. Find and select the relevant Feature name in the table. This opens the Feature Details page, which includes details and usage data.
  3. The Feature's name, app, assigned Product Area, and description display in the top section of the page. Optionally:
    • Select the Feature name to modify the name.
    • Assign a new Product Area by selecting the dropdown arrow next to the Product Area name. 
    • Add a description or update an existing description by selecting the text that appears below the app and Product Area. The description must be 280 characters or less.
  4. On the far-right of the top-section, there are several additional actions:
    • Delete the Feature by selecting the trash icon.
    • Clone the Feature by selecting the Clone Page icon.
    • Favorite the Feature by selecting the star icon.
    • Watch visitors interacting with this Feature by selecting Watch replays. (Session Replay add-on required.)
    • Create an ongoing or timebound usage goal by selecting Create Goal. For more information, see Goals.
  5. Select the Details component to minimize and expand this section. In this section, you can edit the location in your app and CSS targeting rules, and view other details as needed.

FeatureDetails.png

In the Visual Design Studio

  1. Navigate to Product > Features > Tag Features.
  2. Enter the URL of the page of your application that the tagged UI element is on.
  3. Choose a tagging mode: Tag side-by-side or Tag in an overlay. For more information, see Tagging with the Visual Design Studio.
  4. Select Launch Designer to open the Visual Design Studio.
  5. In the Features tab, select Tagged Features and open the Feature you want to view or edit. This shows name of the event, associated app, Product Area, Page location, and the names of the users who created and last updated the tag.
  6. 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.
  7. To edit the Feature, select Edit Feature in the bottom-right corner.
  8. 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.
    • Change the Product Area that the Feature is assigned to.  
    • Re-target the UI element associated with the Feature.
    • Change the Page Location.
    • Add event properties.
    • Turn Filter Dynamic Elements on Selection on or off.
  9. If you made changes, select Save Changes in the bottom-right corner.

Delete a tagged Feature

To remove a tagged Feature, hover over the row of the Feature you'd like to delete and select the Delete icon at the end of the row.

Features_Delete.png

You can also delete a Feature from within the Feature's details page. Open the Feature from the table view and select the Delete Feature icon at the top of the details page, next to the Clone Feature icon.

FeatureDetails_DeleteFeature.png

Download a CSV file of Features

To download a comma-separated values (CSV) file of the data in your table of Features, navigate to Product > Features, and select the Download CSV icon in the top-right corner of the table. This automatically downloads a CSV file of your Features.

Features_DownloadCSV.png

Was this article helpful?
6 out of 18 found this helpful