The Element Unmasking template allows you to selectively unmask targeted elements, or sections of a page, while leaving other elements masked. This helps you improve visibility of the user experience when analyzing Session Replays, while still maintaining masking throughout your pages as necessary.
Commonly used to
- Deactivate masking on certain elements/areas of your pages when Automasking ‘AAAA’ is applied, improving your Session Replay playback experience.
Prerequesites
- 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 Unmasking/Masking, 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/unmask). 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 appropriately update your masking configurations (as needed) 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 the template
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
- CSS selectors: enter comma-separated CSS selectors.
Note: This template does not handle nested elements. If the need is to unmask an element and all their child, it has to be used with the “*” CSS Selector:
div.capturedElement -> div.capturedElement *
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