How to set up element masking rules

Element masking lets you control which parts of a page are visible in Session Replay without changing the masking level for the entire page. Use CSS selectors to mask or unmask a complete element, an attribute, or both.

A masked element is removed from the Session Replay and appears as a grey box. A masked attribute value is not collected. An unmask rule makes selected content visible when it would otherwise be masked.

Before you begin

• Identify the content you want to mask or unmask.
• Ask your development team to provide a stable CSS selector for the content. Use a descriptive class or attribute that is unlikely to change when the page layout is updated.
• Changes to element masking rules apply only to newly collected data and do not affect historical Session Replays.
• Element masking rules are not supported on Shopify checkout pages. 
• There is no limit to the number of element rules you can create for a project.

How to create an element masking rule

Element masking rules are managed from the Data Masking settings page.

1. Click on your profile icon.
   

2. Click Projects and users.

   

3. Select Data Masking.
    

4. Scroll down to Element rules and click View.

   

5. Click Create rule.
    
6. Enter a name for the rule.
    
7. Select the rule type:
   • Mask hides the selected element or attribute.
   • Unmask makes the selected element or attribute visible.
      

8. Under elements and attributes, add the selectors you want to target:

   • Click Add element + to add an element selector.
   • Click Add attribute + to add an attribute selector.
      

   Before adding selectors

   Decide what you want to target: 

   • An element is a complete item on the page, such as an order summary, image, or product name.
   • An attribute is a detail belonging to an element, such as an ID, class, image source, or order ID.
   • A CSS selector identifies the content that you want to target.

   Use an element selector to mask or unmask the complete element and its nested content. Use an attribute selector to target a specific attribute without masking the complete element. You can also combine an attribute selector with an element selector to narrow the scope of the rule.
    

9. Under Pages, choose where the rule applies:
   • All: the rule applies to all pages.
   • Some: the rule applies only to the pages you specify.
      
10. Click Create. The rule is created as a draft.
    
    

11. Click Save at the top of the page to save your changes.

    
     

    Rule priority

    Element-level rules take priority over global and page-level masking settings. If two rules contradict each other, Contentsquare applies the rule that provides the higher level of privacy.  

How to identify a CSS selector

If you are not familiar with CSS selectors, ask your development team to identify a stale selector for the content you want to target.

You can also use Chrome DevTools:

1. Open the relevant page in Chrome.
2. Right-click the element you want to target and select Inspect.
3. In the Elements panel, review the element’s classes and attributes.
4. Identify a descriptive class or attribute that is specific to the element and is unlikely to change.
5. Add the selector to the element masking rule.

For example:

<div id="order-summary" data-order-id="ORD-12345" class="order-summary">
 <span class="order-number">ORD-12345</span>
 <img src="/images/shoes.jpg" alt="Shoes">
</div>

In this example:

• The complete order summary is the element represented by <div>.
• id, data-order-id, class, src, and alt are attributes.
• order-summary, ORD-12345, order-number, and /images/shoes.jpg are attribute values.
• #order-summary identifies the complete order summary.
• .order-number identifies the order number element.
• [data-order-id] identifies an element that contains the data-order-id attribute.

When choosing selectors for your masking rules, prioritize descriptive and specific options over position-dependent one's.

Descriptive and specific example:

.order-summary
.order-summary .order-number
[data-order-id]

Position-dependant example (recommended to avoid):

body > main > div:nth-child(2) > section > div

Contentsquare validates CSS selector syntax before saving. Empty selector fields cannot be submitted, and invalid selectors display an error.

A valid selector can still match more elements than intended. Review its scope across the relevant page templates and page states before saving the rule.

How to edit or delete a rule

To edit a rule:

1. Click the pencil icon next to the rule.

   

2. Make your changes.
3. Click Update.
4. Click Save.

To delete a rule:

1. Click the trash icon next to the rule.

   

2. Click Save.
    

Masking specific elements in your code

As an alternative to the Data Masking settings page, Contentsquare also supports masking specific elements directly in your website's code. Your development team typically handles this approach.

See the Technical Implementation Documentation for details.

FAQs

Do element masking rules apply retroactively?

No. Rules apply only to sessions collected after saving. Past session replays are not affected.

Why can’t I unmask elements such as emails or input fields? 

Automatic Personal Data Redaction is built into the web tracking tag to redact specific types of sensitive browser data before sending it to Contentsquare servers. This mandatory protection runs alongside your masking settings and cannot be turned off. Read more about personal data collection in Contentsquare.

Why can't I create or edit element masking rules?

Creating, editing, and deleting rules requires Admin access. If you have a different role, you can view rules but not modify them. Contact your project Admin if you need edit access.

My CSS selector isn't masking the element I expected — what should I check?

First, confirm the selector is correct with your development team. If you have multiple rules targeting the same element, they may be conflicting — check for overlapping Mask and Unmask rules and adjust your selectors to be more specific if needed.

Will my existing CSTC element masking templates still work? (Pro and Enterprise plans)

Your existing CSTC configurations are automatically visible in the element masking rules table. The CSTC Element Masking and Element Unmasking templates are deprecated — manage your rules from the Data Masking settings page going forward.

Why isn't element masking working on my Shopify checkout pages?

Element masking rules are not supported on Shopify checkout pages

What to read next

• How to set up and manage data masking
• Personal data and Contentsquare: what you need to know
• Best practices to prevent personal data leaks