This article is about using the CSTC feature, available on Pro and Enterprise plans.
The Element Masking template allows you to selectively mask targeted elements, such as sensitive, personal or other specific information, while leaving other elements unmasked. This helps you prevent data leaks, while still preserving visibility of the user experience when analyzing Session Replays.
Prerequisites
- Review the levels of masking and methods available, including what you do/don’t have in place already, and align with your team on the most appropriate approach.
- Before implementing Element Masking/Unmasking, you will need to identify and list every element on your site that could contain personal data (including any other data you want to mask). This is typically a manual process that requires you to carefully review each of your site’s pages that are tracked by the Contentsquare main tracking tag, as well as its possible permutations.
- Ensure you consider and implement masking (as required) for new and updated web pages published on your site on an ongoing basis.
How masked elements appear on your site in Contentsquare
- Targeted DOM elements: Text content and all node elements nested inside the specified element will be removed from the HTML. A gray box containing the text “Hidden zone” will be displayed instead of the removed DOM element/s.
- Element attributes: Only the chosen attribute of the target element is stripped from the page.
How to use it
These instructions should be used alongside the Contentsquare Tag Configurator article, which includes details on prerequisites Snippet creation.
Step 1: Complete the following template fields
- Element masking: Input your CSS selector/s, separated by commas. This should typically cover all of your masking needs.
-
Attribute masking (optional and rarely used):
- Attribute name: Here you can add specific attributes of your CSS selector that you want to mask, in case you don’t want to hide the entire element.
- CSS selector: Input the CSS selector/s, separated by commas.
Best practices to ensure proper masking
- Try to rely on descriptive and non-generic attributes as much as possible, such as “id” attributes where they exist.
- Remember classes are typically less reliable, unless they are very specific to the element at hand.
- Don’t hesitate to use hierarchical chaining to access the desired element, notably if it does not have an “id” but one of its parents does.
- Don’t hesitate to use other descriptive and unique attributes where they exist.
Step 2: Select a Trigger
Select a trigger and define the conditions that will fire the Snippet.
Available triggers