The Element Masking template allows you to selectively mask targeted elements, such as sensitive, personal or other specific data, 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.
- Ensure you consider and implement masking (as required) for new and updated web pages published on your site.
Using both Element Masking and Automasking / Page Masking
If you have a page masked with Automasking / Page Masking, and unmask an element on that page with an Element Masking CSTC snippet, the element will be unmasked if, and only if, the template is combined with the Before Pageview trigger.
If Automasking / Page Masking is turned off on the page, the element masking template works as usual, and the element will be masked.
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 zone containing the text “Hidden zone” will be displayed instead of the removed DOM element.
- Element attributes: The whole attribute is removed.
How to use it
These instructions are to be used alongside the Contentsquare Tag Configurator article, which includes details on prerequisites, and firstly, Snippet creation.
Step 1: Complete the following template fields
- Element masking: Type the CSS selectors, separated by commas.
-
Attribute masking
- 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: Type the CSS selectors, separated by commas. These elements and their child elements will be masked.
- Add attribute: optionally add multiple attributes as required.
Note: Behavior exceptions regarding Interpolation
If Interpolated values are undefined at runtime, the setPiiSelectors command will still be fired without the interpolated expression
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 are present.
Step 2: Select a Trigger
Select a trigger and define the conditions that will fire the Snippet.
Available triggers