1. Pendo Help Center
  2. Data in Pendo
  3. Events

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: You can use custom HTML elements to target guides, even if they're not 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 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

Subscription admins with Pendo Web SDK 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:

  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.
  5. 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.

    ApplicationSettings_TaggingGuideSettings_CollectCustomHTMLAttributes.png
     
  6. Repeat steps 5 and 6 for each new attribute for this app.
  7. 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 Web SDK Settings tab if you prefer.

Control dynamic filtering of custom attributes

When Pendo suggests tag rules in Visual Design Studio, it filters out attribute values that appear dynamic, meaning values that look auto-generated or unlikely to remain stable across sessions.

Pendo checks each part of a selector against the following rules. A value is considered dynamic if it meets any of these conditions:

  • It has no letters, or more numbers or symbols than letters.
  • It has five or more consecutive consonants.
  • It has no vowels.
  • It includes letter combinations with j, q, v, x, or w that don’t typically occur in the English language.

These rules help prevent the creation of unstable suggested tag rules, but they can sometimes hide attributes that are actually stable and meaningful in your application. For example, a value like “TopNavBar” might be flagged as dynamic because the “vb” letter combination isn’t one you’d normally see in English words.

To improve control over this behavior, Pendo offers two settings:

  • Allow dynamic attribute values when suggesting tag rules is an app setting in your application’s Tagging & Guide Settings. It only applies to attributes defined under Collect custom HTML attributes. When turned on, Pendo doesn't filter out dynamic-looking values for those attributes. This setting is off by default and must be turned on by a subscription admin.
  • Filter dynamic custom HTML attribute values is a Visual Design Studio toggle that controls filtering for your current tagging session. If left unchanged, it follows the app setting. If turned off, suggested rules will include dynamic-looking values for your defined custom attributes.

Note: If your attributes aren’t appearing in the Visual Design Studio, and you’ve already added them under Collect custom HTML attributes, check both the app-level setting and the Visual Design Studio toggle.

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 Feature tagging 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 who 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. 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 have been successfully configured.

Frequently asked questions

How do I start collecting custom HTML attributes if I self-host the web SDK?

The Pendo Web SDK controls which elements are stored in raw events. Changes to Subscription and App Settings, including Install Settings, generally impact the way the web SDK functions. If the web SDK is self-hosted, you need to download and install the web SDK after changing any settings for the latest changes to take effect. If the web SDK isn't self-hosted, the web SDK 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.

If your attribute isn’t showing in the tagging UI, confirm that:

  • It’s added to the Collect custom HTML attributes list.
  • Dynamic filtering is turned off either in the app settings or manually in 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 Feature tagging.

Was this article helpful?
5 out of 6 found this helpful

Articles in this section