Custom HTML attributes

Last updated:

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: Custom attributes affect Pendo Analytics only. Element targeting in Pendo Guides reads the entire DOM and doesn't rely on custom attributes being identified to use them for 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 Admin users with Pendo agent version 2.3.0. or greater can add custom HTML attributes in Pendo. To access custom HTML attributes:

  1. Navigate to Settings > Subscription Settings.

  2. Open the Applications tab.

  3. Find and open the relevant app from your Applications list.

  4. Open the Tagging and Guide Settings tab at the top of the page. 

Then, to add a custom attribute:

  1. Enter an attribute that you'd like to add under Custom HTML Attributes.
  2. Select + Add Attribute

You can also add custom HTML attributes from the Agent Settings tab if you prefer.

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.

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.

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 user 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:

  1. In the Tagging Aid Chrome extension, open the Settings (gear) icon towards the bottom of the tool.
  2. Add the custom HTML attribute names added to the Pendo subscription by an Admin user. If you have multiple custom HTML attributes to add, you can either add them on separate lines or separate them with a comma. 
  3. 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 user 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 the user initializes 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.

 

Was this article helpful?
1 out of 2 found this helpful