How to mask personal data

This article provides information about personal data masking in Contentsquare and how to manage it, in order to protect personal data in your Session Replays.

Personal data refers to any information that identifies, relates to, or can directly, or indirectly, be linked to an individual. GDPR and other privacy laws around the globe regulate the collection and storage of personal data.

Contentsquare’s web tracking tag comes pre-packaged with key safety features to prevent the collection of this data. However, there are masking mechanisms available that allow you to be more specific about what is/isn’t masked.

Available personal data masking capabilities

• Page Masking via the Contentsquare Console
• Element Masking and Unmasking via the CSTC in the Contentsquare Console
  • Alternative masking/unmasking methods via A) tag commands and B) directly within your site’s HTML

Page masking

The Page Masking tab in the Contentsquare Console allows you to quickly and easily mask all pages across your website, mask selected pages using Operators or RegEx rules, or turn off page masking in specific pages or entirely.

Visit this article for full instructions on Page Masking via the Console.

Element Masking and Unmasking

Having your pages’ UI content masked by default can make it difficult to analyze your website’s interface during a session replay. Therefore, you are able to control which part of the user interface is collected via our masking and unmasking methods, allowing you to only mask what’s necessary.

Using the Contentsquare Tag Configurator (recommended)

Selectively mask and unmask targeted elements across your site, by using our snippet templates directly from the Contentsquare Console. This helps you improve visibility of the user experience when analyzing session replays, while still maintaining masking throughout your pages as necessary. 

Visit this article to mask selected elements

Visit this article to unmask selected elements

Alternative: A) using Tag commands

Unmasking

You can unmask a single content block, a larger section of a page, or even an entire page by adding the attribute to the body of the HTML page. In case of the latter, please make sure that there is no risk of personal information appearing in the selected area before taking this approach.

Every element listed should be identified by its CSS selector, and then be added to the setCapturedElementsSelector command.

Tag command: setCapturedElementsSelector

For example, if the HTML you want to unmask looks like this:

<div class="product" id="captureMe">
<h2> Title that should not be masked </h2>
<div> Content that should not be masked </div>
</div>

The following code will unmask it (the example below only uses one CSS selector, but you can pass as many coma-separated CSS selectors as needed):

window._uxa = window._uxa|| [];
window._uxa.push(["setCapturedElementsSelector", ".capture-me, #captureMe"]);

Masking

This command will mask both the initial HTML and any dynamic changes that may be caught by Change Monitor and can be combined with Session Replay's Page Masking.

Below is the command line your developer will need to execute before the CS main tracking tag:

window._uxa = window._uxa ||[];
window._uxa.push (['setPIISelectors', {PII Object});

• Tag command: setPIISelectors

Example:

Here is an example of how the command line will work to call all previously tagged elements within the context of a site's code.

You can see that the elements tagged for masking are being called, (by the command line shown above) using its CSS selectors, to remove the defined attributes (personal data) from the element. 
 

PIISelectors: [".css-selector, #css-selector"], // DOM elements to be masked 
Attributes: [
     {
         selector: "select#month option, select#year option", // CSS selector
         attrName: 'id' // Attribute name to mask
     },
     {
         selector: ".link-page-7", // CSS selectors 
         attrName: ['href', 'name' ] // Array of attribute names to mask
     }
  ]

Alternative: B) directly via your site’s HTML

Unmasking

Add the data-cs-capture attribute to the parent element of the page section in question. The data-cs-capture attribute should be added as per the example below.

• Attribute: data-cs-capture

Example:

<div class="product"data-cs-capture>
<h2> Title that should not be masked </h2>
<div> Content that should not be masked </div>
</div>

Masking

For this method you will tag each element individually, marking it directly on the DOM markup within your code base using the specific data attribute data-cs-mask, which will remove it from your session replays.

• Attribute: data-cs-mask

Example - DOM markup:

<div class="name" data-cs-mask>
John Doe
<a href= "logout.html">Lougout</a>
</div>

What Session Replay will collect:

<div class="name" data-cs-mask></div>

FAQs

How does Contentsquare’s tag protect personal data by default?

The web tracking tag comes pre-packaged with key safety features to prevent the collection of personal information in the following ways:

• It does not capture the values of pre-filled form fields (input or textarea)
• It does not collect what the user types in (the keyUp event is tracked, while the keyCode itself is not collected)
• IP addresses are deleted after 3 days maximum from the date of collectionit does not store the IP address (deleted after processing).
• It removes any email-like formatted string whether it appears in the HTML, the URL or a Custom or Dynamic Variable before it is sent to our servers.

You can find all our technical documentation on personal data handling here.

Are there any circumstances where personal data could be collected even with Contentsquare’s default safety features applied?

Contentsquare’s Session Replay relies on capturing and uploading the full HTML content of the page the user is navigating, this can inadvertently lead to personal data collection if the personal data appears outside the parameters for masking described above.

The most common situation not covered by the default safety features is personal data which appears as text on the page (text nodes). While less common, personal data may also appear inside the values of certain elements’ attributes. Both of these scenarios are unique to every page and every site, and as such, do not allow for a universal “one-size-fits-all” masking.