Tagging Resource Center Elements as Features

Overview

Tagging features is a helpful way to understand user activity. Additionally, you may also want to track activity within your own Resource Center. We will review how to tag Modules and guide links within Guide List and Onboarding Modules.

Tag a Module within your Resource Center

  1. Go into your product through the In-App Designer; like you would if you were tagging a feature.
  2. Tag anything on the page within your app.
  3. Label the feature.
  4. Drop the below into the custom CSS Tag based on the type of Guide.
Note: Following the custom CSS Tagging steps, you will see a "No matches found" error — this is expected as the guide will not be present in the Feature designer when adding the custom CSS tag. 
[id^="pendo-list-item-{someLongId}"]:contains({ModuleName})
  • {someLongID} = This will be the unique ID of the module in your Resource Center home view. 
  • {ModuleName} = This would be 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 will be unique to each view of your Resource Center and then each module will be 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 I see a module in my Resource Center as the following:

Screen_Shot_2020-01-02_at_1.13.50_PM.png

I would add this to my 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