Choose what Clarity can track on your website, either by masking or unmasking it. Masking is essential when your website may capture users' data that you don't want Clarity to store. When you choose to hide specific sites' data, you can keep your users' information private. The masking ensures it's never uploaded to Clarity.
Clarity masks all sensitive content on your website by default. The sensitive content includes all input box content, numbers, and email addresses. Clarity doesn't capture masked content.
Here's an example of how masked content is seen for text and images:
Changes to masking settings affect new recordings and could take up to one hour to be reflected. Masking changes can't be applied retroactively.
How to mask and unmask content
Only a project's administrators can mask and unmask content. Members who are not admins can't edit the masking mode, add, or delete mask elements.
Masking and unmasking can be done in many ways:
- Using the Clarity website
- Using the Clarity
data-clarity-maskAPI - Add an HTML attribute to elements to tell Clarity to mask content.
Using the Clarity website to mask and unmask content
You can easily select one of three masking modes or methods for Clarity to use. By default, the masking mode is set to Balanced.
Go to Settings > Masking.
Under Masking mode, select a masking mode.
- Strict: The entire text is masked.
- Balanced: Only sensitive text is masked. We classify all input box content, numbers, and email addresses as sensitive text.
- Relaxed: No text is masked.
Upon selecting a masking mode, you can view a message as 'Masking mode set' on top of the screen.
Mask by element
You can also select specific elements to override the overall masking mode of your website. This will affect all its children in the DOM as well.
Go to Settings > Masking.
Under Mask by element, select Add element.
Enter the CSS selector for the element to be marked and select Confirm. For example, enter
.class_namefor a class,
#id_valuefor an ID, and
elementfor a type.
As you add the elements, switch between masking and unmasking as you like.
Check out the MDN Web Docs for help with using CSS selectors, including syntax and examples.
- You can delete an element by selecting the 'Delete' icon.
Using the Clarity
Mask content using an HTML element
Mask content by adding
data-clarity-mask="True" as an attribute on an HTML element in your DOM. That node and its children's contents will be masked. This overrides anything set on the Clarity website.
Unmask content using HTML element
Unmask content by adding
data-clarity-unmask="true" as an attribute on an HTML element in your DOM. That node and its children's contents will be unmasked. This overrides anything set on the Clarity website.
Example of masking by element
HTML elements appear nested within other elements in the DOM of a webpage. Here's how you mask and unmask HTML elements, even if they're nested within each other.
We'll make a small change to masking settings for the Clarity website, inspect the elements in the DOM, and show how the web page rendering in a recording.
On the Masking page of the Clarity website, we set the following values under Mask by element. We entered
.bannerText for the bannerText class and switched its setting to
Mask. Similarly, entered
H1 and switched its setting to
H3, and the
bannerButtons class. Because
.bannerText is masked, its
bannerButtons children are masked. However,
H1 is unmasked because it was set to
Unmask on the Clarity website.
About 30 minutes after we changed the Clarity masking settings, we viewed a session for the page under Recordings. The
H1 text, which we set to
Unmask, is visible, but the
.bannerText underneath and on
bannerButtons is masked. These latter elements weren't uploaded to Clarity and cannot be seen on recordings.
For more answers, refer to Masking and Unmasking FAQ.