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
idorclassof the element. - Other attributes of the element if they exist, including
title,href, andtabindex. - For
<button>, we collectvalue(the text of the button) andname. - For
<img>, we collectsrcandalt. - For
<select>, we collecttypeandselectedIndex. - For
<textarea>and<input>, we collectname.
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.
innerText of elements, is eligible to be collected by default based on Feature click activity and additional Feature tagging settings. You can turn off this automatic text capture at the subscription level by contacting Pendo Support or at the page level by updating your install script, but doing so can complicate Feature tagging if you are using :contains rules. For extension apps, innerText isn't captured by default. To turn on text capture for individual extension apps, contact Pendo Support.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 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-ignoreclass to any element in your code to prevent Pendo from capturing the element. This works for Pendo Web SDK version 2.9 and above.
Examples
htmlAttributeBlacklist example
In this example, the first href element contains PII that should not be captured by Pendo. If there is a concern that additional href elements could contain PII and it would be safer to not capture the attribute at all, ask Pendo Support to add the href attribute to the application’s htmlAttributeBlacklist . A click on either the span or button elements will still be captured by Pendo because a click event captures the element that was selected, as well as its parent elements. However, the href attribute will not be included in the captured event.
<div class="payment">
<a href="https://acme.com/patient/id/ExamplePII/submitpayment">
<button class="payment-button">
<span>Submit Payment</span>
</button>
</a>
<a href="https://acme.com/patient/all-invoices">
<button class="cancel-button">
<span>Cancel</span>
</button>
</a>
</div>pendo-ignore examples
In this example, 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>