1. Pendo Help Center
  2. Installation
  3. Snippet Install

HTML Attributes

Collected Events

For click and focus events used for analytics, Pendo only collects specific attributes and properties by default:

  • The type of element that was clicked (<div>, <p>, <button> etc.)
  • The text inside of elements such as <a>, <span>, <div>
  • The id and/or class(es) 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 do not 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 to the <body> tag.

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

 

Custom HTML Attributes

What are Custom Attributes?

Custom attributes allow you to choose additional attributes that Pendo will record in raw events, in addition to the default attributes that are already collected. For example, this can include the custom attributes that you use for analytics or automations testing.

Custom attributes affect Analytics only. Element targeting in Guides reads the entire DOM and does not rely on custom attributes being identified to use them for Guide targeting.

Any features tagged with a custom attribute in the rule will not have retroactive analysis prior to when the custom attribute was added in Settings. Pendo does not capture custom attributes in your raw event data until you have identified them.

 

Requirements

  • Pendo Agent version 2.3.0 or greater
  • Pendo Admin user

 

How Does It Work?

Here is an example of HTML in an app:

<a class="block-list"
   target="_blank"
   data-id="1.0-Nav-Home.Dashboard">

In this example, the only attribute that we could use by default for feature tagging is the class="block-list". That class may not be unique to that element across the entire page or app, and may not be specific enough if you need to isolate that unique feature. However, this example site 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.

Admins can access Custom HTML Attributes on the Install Settings page under the "Agent Settings" tab.

To begin gathering the data-id attribute, you could choose to track everything beginning with data- with the rule data-* (meaning every attribute that starts with data- will be recorded) or you could target the specific attribute of data-id. Pendo will begin collecting the attribute in raw events 15 to 30 minutes after saving the new custom attribute in Settings.

 

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.

Related articles