Tech Note: Excluding specific elements from tracking in Pendo

The Pendo agent (version 2.9+) has added support that allows you to add a .pendo-ignore class to any element in your code that you would like to completely stop Pendo from capturing. This works by Pendo dropping any events that have a class of .pendo-ignore returned in the raw event.  

There are many use cases for this, but the most common is that you have an individual element (or portion of a page) that contains sensitive information in the element that you do not want to be passed to Pendo. In order to exclude data from that element being passed to Pendo, you can add a class of .pendo-ignore. 

In this example we are only ignoring the first button element: 

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

In this case, a click on either the span containing the text Submit Payment or a click on the Submit Payment button element itself will be ignored by Pendo. That is because a click event captures the element that was clicked on and the parent elements. A click on either the span or that specific button would cause the class of .pendo-ignore to be captured in the event - causing that event to be dropped. 

In this example, we are ignoring the entire div: 

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

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

Because we added the .pendo-ignore class to a parent element of both of the buttons in this sample HTML a click anywhere inside that div would be ignored by Pendo.