Tag Resource Center elements as Features

Last Updated:

Tagging Features is a helpful way to understand user activity. Additionally, you may also want to track activity within your own Resource Center. This article details how to tag modules and guide links within the guide list and onboarding modules.

Tag a module within your Resource Center

  1. Access your product using the in-app designer as if you are tagging a feature.
  2. Tag anything on the page within your app.
  3. Save the feature tag giving it a name that is easy to find.
  4. In Pendo, go to Products > Features, select the newly created feature tag, and manually edit the rule via the Pendo UI.
  5. Add the following code into the CSS tab in the custom code block based on the type of guide.
[id^="pendo-list-item-{someLongId}"]:contains({ModuleName})
  • {someLongID} = This is the unique ID of the module in your Resource Center home view. 
  • {ModuleName} = This is the Title of your module
Note: The Visual Designer utilizes globally unique IDs for the list items in your Resource Center home view. The someLongID is unique to each view of your Resource Center and then each module is distinguished by the {ModuleName} defining the specific module.  You can find these unique IDs by looking in the DOM of your browser developer tools (F12). 

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 both onboarding module guides and guide list modules guides

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 I see a guide in my Resource Center Onboarding Module as the following:

Screen_Shot_2020-01-30_at_2.54.43_PM.png

I would add this to my 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 will have the following format: 

#pendo-g-{someLongId}
 

Screen_Shot_2020-01-22_at_5.13.28_PM.png

 I would add this to my custom CSS selector when tagging a feature:

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