Tag Resource Center elements as Features

Last updated:

Tagging Features is an essential method for gaining insights into user activity within your application. Beyond the main application, tracking user interactions within your Resource Center is also crucial.

This article explains how to tag modules and guide links within the guide list and onboarding modules of your Resource Center.

Tag a module within your Resource Center

  1. Access your product using the in-app designer as if you're tagging a Feature.
  2. Tag anything on the page within your app.
  3. Save the Feature tag, giving it a name that's easy to find.
  4. In Pendo, go to Products > Features, then select the newly created Feature tag.
  5. Manually edit the rule on the Feature details page by updating the placeholder text in the Rule field with the following code, where {someLongID} is the unique ID of the module in your Resource Center home view and {ModuleName} is the title of your module:
[id^="pendo-list-item-someLongID"]:contains('{ModuleName}')

 

rule_code.png

Note: The Visual Design Studio uses globally unique IDs for the list items in your Resource Center home view. The someLongID is unique to each view of your Resource Centers, and each module is distinguished by the {ModuleName} defining the specific module.  You can find these unique IDs by using the inspect tool of your browser's developer tools to look in the DOM

For example, if a module in the Resource Center displays as follows:

Screen_Shot_2020-01-02_at_1.13.50_PM.png

Add this to the CSS selector when tagging a Feature:

[id^="pendo-list-item-1d199427"]:contains('Announcements')

Tag a guide listed in an onboarding or guide list module

Note: Make sure to leave no space between the ID (#) and the class (.) in your CSS selector for guides in both the onboarding module and guide list module.

For the guides inside of the guide list module or onboarding module, you can use: 

[id^="pendo-list-item-{someLongId}"]:contains('{GuideName}')

For example, if a guide in your onboarding module displays as the following (with #pendo-list-item-29fce-0d7 as the ID and Tag a Feature as the module name):

Screen_Shot_2020-01-30_at_2.54.43_PM.png

You'd add this to your custom CSS selector when tagging a Feature:

[id^='pendo-list-item-29fce0d7']:contains('Tag a Feature')

Tag Resource Center home view or an open module 

The home view and the modules are all considered guides, so you can find the ID of each view of the Resource Center in the DOM

Each module view and home view have the following format: 

#pendo-g-{someLongId}
 

Screen_Shot_2020-01-22_at_5.13.28_PM.png

To tag the Resource Center home view or an open module, you'd use the same steps outlined earlier in this article and add this to your custom CSS selector after tagging the Feature:

#pendo-g-V0hM68eZXfGv8H1KGZwkQbQ3ons
Was this article helpful?
7 out of 16 found this helpful