How do I hide sensitive elements within Heap?

Edited

For complete info on how to hide sensitive elements from Heap, see the Sensitive Data sections of the Heap installation guide:

Ignoring Sensitive Data and PII

Target Text Autocapture toggle

Admins can control the capture of sensitive information that lives on the target text of elements by turning on the Target Text Autocapture toggle on the Account Manage > Privacy & Security**

Please note that disabling target text entirely might make creating event s more difficult. Also, if you have this setting enabled while using the APIs listed below (e.g. disableTextCapture), then the most privacy-conscious setting will win.

Precise data redaction via Heap Redact

You can redact a page title or an element’s target text by using data-heap-redact-text. The underlying interactions will still be captured (ex. pageview, click) but the sensitive parts will be replaced by **** in your Heap dataset before it leaves the browser. 

Code snippet for redacting a page title:

HTML

<html>
  <head>
    <title data-heap-redact-text>Page Title</title>
  </head>
...
<html>

Code snippet for redacting the text of an element:

HTML

<div data-heap-redact-text>
  Social Security Number
</div>

If sensitive data lives in an element’s target text, attribute, or in a page title, you can hide it from Heap by using data-heap-redact-attributes. The content of these attributes will be redacted before it leaves the browser. Keep in mind that if there are no values defined for data-heap-redact-attributes, nothing will be redacted. 

The underlying interaction will still be captured (ex. a click) but the sensitive part will be replaced by *** in your Heap dataset before it leaves the browser.

Code snippet for redacting sensitive data living in an attribute:

HTML

<div data-heap-redact-attributes='attr1,attr2'>
    <div>
      <p id='customer info' attr1='something sensitive' attr2='something even more sensitive' attr3='completely safe'>Customer Profile</p>
    </div>
</div>

Note that the id attribute specifically can't be redacted using data-heap-redact-attributes; in the unlikely event that your app places sensitive data in the id attribute, you may consider using heap-ignore on the element in question to make sure that the id values are not captured.

Global data redaction via Disabling Text Capture

If you wish to redact the text content of elements on all pages (not locally), then you can set disableTextCapturedisableTextCapture will redact all target text on your website. We recommend adding Snapshots when text collection is necessary.

JavaScript

heap.load("YOUR_APP_ID", {
    disableTextCapture: true
});

Note that disableTextCapture doesn't work on page titles. To selectively redact a page title, use the following snippet:

HTML

<title data-heap-redact-text='true'>

By adding heap-ignore to an element, you exclude an element from being tracked in its entirety, not just the sensitive part(s). heap-redact will capture that an event occurred, but redact the data attributes.