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 ‘aaaa’ Automasking 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, make sure that none of the elements you want to unmask contain personal data (including any other data you want to mask).
How to use the template
These instructions should be used alongside the Contentsquare Tag Configurator article, which includes details on prerequisites and Snippet creation.
Important
Each execution of the Element Unmasking template replaces the full list of unmasked selectors set by any previous execution. This means that if you configure multiple CSTC snippets using this template, the last one to fire will override all previous ones.
Example:
- Snippet A unmasks .elementA
- Snippet B unmasks .elementB
When both run, Snippet B's execution will override Snippet A. As a result, .elementA will be masked again — only .elementB will remain unmasked.
Recommendation: Use a single Element Unmasking snippet that consolidates all your CSS selectors, rather than multiple separate snippets. This approach is safe as long as you are confident that all selectors within it point exclusively to non-PII fields.
Step 1: Complete the following template fields
- CSS selectors: enter comma-separated CSS selectors.
Best practices to ensure proper unmasking
- Try to rely on descriptive and non-generic attributes as much as possible, such as “id” attributes where they exist.
- Be extra specific with your CSS selectors to avoid falsely unmasking areas you did not intend to. Try not to rely on classes unless they are very descriptive and specific to the section in question.
- 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.
- It’s recommended to limit your trigger to specific URLs to avoid unmasking something elsewhere unintentionally.
Step 2: Select a Trigger
Select a trigger and define the conditions that will fire the Snippet.
Available triggers