HTML attributes in data collection

Last Updated: August 01, 2023 19:09

This article summarizes the HTML attributes that Pendo collects for analytics by default and how to change this default data collection.

HTML attributes

HTML attributes provide additional information about HTML elements, such as the value of a form input or the URL of an image. Common HTML attributes include src, href,class, and id. The contents of these attributes, CSS selectors, identify and style specific elements of a website. Pendo relies on these selectors to identify feature clicks and to target guides. For this reason, your CSS selectors should be static, unique, and stable.

Events collected by default

For Click Events and Focus Events used for analytics, Pendo collects specific attributes and properties by default:

The type of element that was clicked, such as <div>, <p>, or <button>.
The text inside of elements, such as <a>, <span>, or <div>.
The id or class of the element.
Other attributes of the element if they exist, including title, href, and tabindex.
For <button>, we collect value (the text of the button) and name.
For <img>, we collect src and alt.
For <select>, we collect type and selectedIndex.
For <textarea> and <input>, we collect name.

For privacy reasons, we don't collect user-entered text inside of <input> or <textarea> fields, or the document <title> in load events.

We collect the same data for all parents of the clicked element up through the HTML hierarchy (or Document Object Model, DOM) to the <body> tag.

You can adjust the data that Pendo collects on Click Events and Focus Events by adding custom HTML attributes and by limiting Pendo data collection for specific elements.

Note: You can configure the Pendo agent to not collect any of the text on the page, including innerText of elements, but this can make it more difficult to tag Features.

Custom HTML attributes

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.

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:

Navigate to Settings > Subscription Settings.
Open the Applications tab.
Find and open the relevant app from your Applications list.
Open Tagging and Guide Settings tab at the top of the page.

Then, to add a custom attribute:

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

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

Using the example in Custom HTML attributes, 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 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.

Automatic tagging with custom HTML attributes (closed beta)

Note: Automatic tagging is currently in closed beta, available to a small proportion of customers for testing. The information that follows isn't a commitment, promise, or legal obligation. The development, release, and timing of any features or functionality described in this section are subject to change at the discretion of Pendo, which can occur without notice.

After adding custom HTML attributes, you can enable automatic tagging for creating Features in Pendo. Automatic tagging adds new Pendo Features to your Features list when elements associated with your custom HTML attributes are clicked.

To enable automatic tagging:

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.
Toggle on Automatic Tagging with Custom HTML Attributes.
Select the custom HTML attributes you'd like to use for automatic Feature tagging.

Once this is set up, automatically created Features appear in your Features list in Pendo and are labeled as Automatic under the Type column. You can filter Features by Type using the dropdown menu at the top of the page.

By default, automatically created Features are set to Sitewide. You can edit this like you can with Features that are created using the Visual Design Studio. To edit a Feature, select it from the Features table. This opens the Feature's details page, where you can edit the name, product area, application, page information, and tagging rules.

Exclude specific element tracking

You might want to limit the attributes Pendo collects to protect personally identifiable information (PII) or other sensitive information. To exclude data from a specific element being passed to Pendo, you can either:

Ask Pendo Technical Support to add HTML attributes to your application's htmlAttributeBlacklist. This stops Pendo from collecting the attributes that you specify on all future Click Events and Focus Events.
Add a .pendo-ignore class to any element in your code to prevent Pendo from capturing the element. This works for Pendo agent version 2.9 or greater.

In the example that follows, the code only ignores the first button element. A click on either the span containing the text "Submit Payment" or the "Submit Payment" button element itself is ignored by Pendo because a Click Event captures the element that was selected as well as its parent elements. This means that a click on either the span or the specific button captures the.pendo-ignore class in the event, causing that event to be ignored.

<div class="payment">
    <button class="pendo-ignore payment-button">
       <span>Submit Payment</span>
    </button>
    
    <button class="cancel-button">
       <span>Cancel</span>
    </button>
</div>

In the next example, the code ignores the entire div. Because we added the .pendo-ignore class to a parent element of both of the buttons, a click anywhere inside that div is ignored by Pendo.

<div class="pendo-ignore payment">
   <button class="payment-button">
     <span>Submit Payment</span>
   </button>

   <button class="cancel-button">
     <span>Cancel</span>
   </button>
</div>

Custom HTML attributes and the Tagging Aid

The Pendo Tagging Aid is a 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, an Pendo Admin user must confirm that the custom HTML attribute was added to the Pendo subscription, as described in Add custom HTML attributes in this article.

Second, every Tagging Aid user that wants to use custom HTML attributes must:

In the Tagging Aid Chrome extension open the Settings cogwheel icon towards the bottom of the tool.
Add the custom HTML attribute names added to the Pendo subscription by your 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 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 making any settings changes for the latest changes to take effect. If the Agent is not self-hosted, the Agent that is 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 designer. Turn off the dynamic filtering setting in the Visual Design Studio using the toggle under the collapsible Settings section at the bottom of designer. 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.