Tagging and viewing Features in Adopt

Last Updated: July 03, 2023 19:16

Features are managed in the Analytics page of the UI, which you can find in the left-side navigation. Tag Features to uncover usage patterns in your application and to position guides.

Feature tagging rules

Pendo creates Feature tags (a process that's 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 with 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 Pages and Features.

To tag Features, you first enter Target Mode, which tells you what elements you’re selecting for tagging with a red 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.

To tag Features in Pendo, navigate to Analytics > Features and then:

In the top-right corner of the page, select Tag Features.
Enter the URL of the target Page of your application
Select Launch Visual Design Studio. This loads the Visual Design Studio over the page in your application.
In the Features tab, select Tag Feature.
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.
Choose the Create New Feature option at the top.
Enter a descriptive name that’s in line with your company naming convention so that others will know what you're referring to.
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.
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).
Select Save to add the Feature to your Features list.

Tip: Choose Sitewide for navigation buttons because it doesn'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 for creating rules.
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 more 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) 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).

Note: The DOM tree is a hierarchical representation of the page's HTML, created by the browser to define all elements, attributes, and text on a page as objects in a hierarchy.

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.

As you build your rule with the Rule Builder, the Visual Design Studio shows you the number of 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 just under Selection while you’re building your rule.

The colors of items in the Rule Builder represent to 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>`, `<button>`, `<a>`, `<p>`
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.

Custom CSS

To create a rule using the Custom CSS option for Feature Element Matching:

1. In 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.

Good Feature Rules

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”`

Dealing with dynamic CSS selectors

Typically, you should look for the most specific CSS selector for the UI element you’re trying to tag. If the HTML attribute you’re trying to use is dynamic, you must find a balance between specificity and flexibility to capture only the part of the CSS selector that remains consistent.

Many applications rely on dynamically generated CSS selectors. Because CSS selectors affect how you tag Features and target Guides, it’s important to ensure that the CSS selector you’re tagging is a stable identifier that’s unlikely to change over time.

A dynamic CSS selector is typically a Class name or element ID that’s likely to change due to activity in the application, such as a text heading that changes color when a user passes a mouse over it, or a new version of the application.

You can identify dynamic CSS selectors by looking for a seemingly random string of characters in the CSS selector. When you find dynamic CSS selectors, you can instead:

Tag Features in Pendo using rules starts-with (^), ends-with ($), and contains (*) rule to ignore the dynamic parts of the CSS selector. This ensures Pendo is only matching to the part of the attribute that’s consistent. For more information, see Advanced Feature Tagging.
Add static Classes and IDs to elements in your application to make your code more stable for Feature tagging and Guide targeting.
Use custom HTML elements to provide static selectors for use by Pendo.

View tagged Features

There are two ways to view tagged Features in Pendo:

In the Pendo UI by navigating to the Features list in Analytics > Features.
In the Visual Design Studio Heatmap while tagging another Feature.

The Features list in Analytics

To view tagged Features, navigate to Analytics and open the Features tab at the top.

There are three filters at the top of the page. These filters modify the list of Features in the table view:

Filter	Description
Segment	The default is Everyone. Use the dropdown to select either a predefined segment or a Custom Segment. To create a new custom segment, select + Custom Segment at the bottom of the dropdown menu.
Date range	Use the dropdown to choose from predefined values, or chose a Custom Range specific time period.
Application	Use the dropdown to choose to view all your Pages, or choose to view Pages by 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.

Column	Description
Feature Name	The title given to the Feature. This can be edited when you select the Feature's name.
Type	The type of Feature. This can be Custom (created by you or your team), Inherited (from Pendo or from a parent account), or Inactive (inherited with some analytics not being collected but the Feature can still be used for guides).
Application	The application that the Feature is assigned to.
Number of Visitors	The number of unique visitors that have clicked on 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.
Page Name	The Page assigned to the Feature or "All Pages" if the Feature is sitewide.
Rules	The rules behind the Feature tag.

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

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 Visual Design Studio

The Heatmap in 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:

In Pendo, navigate to Analytics > Features.
Select Tag Feature in the top-right corner.
Select Launch Visual Design Studio.
Toggle on the Heatmap at the bottom of the designer.
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.

View and edit Feature details

There are two ways to view and edit the details of a tagged Feature:

Using the Details sidebar.
In the Visual Design Studio.

Details sidebar

You can view and edit basic information about Features from the details sidebar, without having to open the Visual Design Studio. Navigate to Analytics > Features and then select the Feature you want to view or edit. This opens the sidebar, where you can:

Update the name of the Feature.
View, edit, add, and remove Feature rules. A Feature must have at least one rule.
See who created a rule or recently updated it, and when.
Add or edit Pages that a Feature is on.
Delete the Feature.

Visual Design Studio

To edit the name and rules of a Page from the Visual Design Studio, navigate to Analytics > Features and then:

In the top-right corner of the page, select Tag Features.
Enter the URL of the target page of your application into the text field.
Select Launch Visual Design Studio. This loads the Visual Design Studio over the page in your application.
In the Features tab, hover over the Feature you want to edit and select the edit icon that appears.
Select Edit Feature in the bottom-right corner.
Edit the feature as required and then 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 Trash icon at the end of the row. Alternatively, you can delete the Feature using the trash icon in the Details sidebar.

Download a CSV of file of Features

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