This article is about using the CSTC feature, available on Pro and Enterprise plans.
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.
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