You can add custom HTML attributes for Pendo to record in raw events, in addition to the default attributes that are already collected. This can include the custom attributes that you use for analytics or automation testing, such as specific information about visitors, accounts, or events that aren't captured by default.
Note: You can use custom HTML elements to target guides even if you don't have them configured in your application's Tagging and Guide Settings. However, Pendo won't know to suggest your app's custom HTML attributes for guide targeting unless they're specified in these settings. After custom HTML attributes are set up, they'll be suggested for both tagging and guide targeting.
Example
In the following example, the only attribute that we can use by default for Feature tagging is the class="block-list". That class might not be unique to the element across the entire page or app, and might not be specific enough to isolate that unique Feature.
<a class="block-list"
target="_blank"
data-id="1.0-Nav-Home.Dashboard">The example above includes an additional attribute called data-id that contains some helpful identifying content. Specifically that this <a> tag has the value 1.0-Nav-Home.Dashboard for data-id.
You can add custom HTML attributes in Pendo to track this information.
Add custom HTML attributes
Pendo admins with Pendo agent version 2.3.0 or greater can add custom HTML attributes in Pendo.
Using the example, you can start collecting the data-id attribute by tracking everything beginning with data- and including the wildcard (*) rule: data-*. This means that every attribute that starts with data- will be recorded. Alternatively, you could target the specific attribute of data-id.
To add custom HTML attributes:
-
Navigate to Settings > Subscription Settings.
-
Open the Applications tab.
-
Find and open the relevant app from your Applications list.
- Open the Tagging and Guide Settings tab at the top of the page.
- In the Collect custom HTML attributes section, enter an attribute that you'd like to add, then select + Add Attribute. Once added, you can use the attribute to manually tag Features in Visual Design Studio or set up automatic Feature tagging.
- Repeat steps 5 and 6 for each new attribute for this app.
- To add attributes for a different app, select < Back to Applications, then repeat steps 3 to 6.
Pendo starts collecting the attribute in raw events 15 to 30 minutes after saving the new custom attribute in your subscription settings. Any Features tagged with a custom attribute in the rule don't have retroactive analysis prior to when the custom attribute was added. Pendo doesn't capture custom attributes in your raw event data until you've identified them.
Note: You can also add custom HTML attributes from the Agent Settings tab if you prefer.
Custom HTML attributes and the Tagging Aid
The Pendo Tagging Aid is a Google Chrome Extension built and maintained by the Pendo Professional Services team to help you create a Feature tag that's more relevant to the HTML and attributes of the UI element you're trying to tag. For more information on creating Feature tags, see Tagging and viewing Features and Advanced Feature tagging.
When custom HTML attributes are grayed-out in the Pendo Tagging Aid, you can't use them in your tagging rule without some additional setup.
This is a two-step process. First, a Pendo admin must confirm that the custom HTML attribute was added to the Pendo subscription, as described in Add custom HTML attributes.
Second, every Tagging Aid user that wants to use custom HTML attributes must:
- In the Tagging Aid Chrome extension, open the Settings (gear) icon towards the bottom of the tool.
- Add the custom HTML attribute names added to the Pendo subscription by an admin. If you have multiple custom HTML attributes to add, you can either add them on separate lines or separate them with a comma.
- Select Save Attributes and then X to exit Settings.
This is necessary because the Tagging Aid extension can't communicate with your Pendo subscription to determine whether the custom HTML attributes added by the admin have been successfully configured.
Frequently asked questions
How do I start collecting custom HTML attributes if I self-host the agent?
The Pendo agent controls which elements are stored in raw events. Changes to Subscription and App Settings, including Install Settings, generally impact the way the agent functions. If the agent is self-hosted, you need to download and install the agent after changing any settings for the latest changes to take effect. If the agent isn't self-hosted, the agent that's downloaded when you initialize Pendo includes the current subscription settings automatically.
Why is Pendo not suggesting my custom HTML attributes?
It could be that the custom attribute you're trying to tag is being filtered out by Pendo's dynamic filtering algorithm. Dynamic filtering is on by default every time you open the Visual Design Studio. Turn off the dynamic filtering setting in the Visual Design Studio using the toggle under the collapsible Settings section at the bottom of the Visual Design Studio. You must actively turn off dynamic filtering each time you launch the designer. This helps avoid tagging dynamic selectors. For more information on dynamic selectors, see Tagging and viewing Features.