You will be assisted with masking during your Contentsquare implementation process. This document details how our automasking and masking process works to prevent data leaks in your Session Replays.
Personal data FAQ
What is personal data?
Personal data is any representation of information that permits the identity of an individual to whom the information applies to be reasonably inferred by either direct or indirect means.
Examples of Personal Data:
- a name and surname;
- a home address;
- an email address such as name.surname@company.com;
- an identification card number;
- location data (for example the location data function on a mobile phone)*;
- an Internet Protocol (IP) address;
- a cookie ID*;
- the advertising identifier of your phone;
- data held by a hospital or doctor, which could be a symbol that uniquely identifies a person.
What are the EU’s General Data Protection Regulation (GDPR) standards for personal data collection?
GDPR regulations prohibit the collection and storage of personal data, requiring you to mask any such data on your site as a prerequisite to using Contentsquare’s Session Replay feature.
What personal data does the CS Tag automatically filter out?
The CS web tracking tag comes pre-packaged with key safety features to prevent the collection of personal information:
- 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)
- it 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.
What personal data could still potentially leak despite the CS Tag’s automatic filtering?
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 automatic filtering 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” automask.
What is data masking?
Masking helps prevents data leaks and ensures that all data collected in Contentsquare's Session Replay won't contain any personal data as defined above. Masking typically happens during Contentsquare's implementation process described below are the different methods for automasking text content and masking specific site elements.
Automasking text that may contain personal data
Contentsquare offers the capacity to automatically mask the text contents of any site page by replacing all text with the letter "A" to prevent data leaks. Automasking does not have to be universal. When starting with your Contentsquare implementation, it is the recommended approach to automask your entire site and then deactivate the specific pages or elements you need to view unmasked. You can also automask only specific pages where personal data is known to exist (e.g. the checkout flow) while leaving other pages unmasked.
How it works
While Session Replay collects:
- Text content is masked, each individual character is replaced with "AAA".
- Characters in input fields and password fields are replaced with "•".
- Each number field character is replaced by "0".
- Spaces are kept.
- Images and static resources are kept.
- Most HTML attributes’ values are emptied, except "id", "class", "style", "src", "srcset", "href", "rel" and "type".
Before Automasking | After Automasking |
How to activate automasking
Page blacklisting
- If you'd like to activate automasking for just one page or a group of pages only, be sure to list the specific URLs you'd like to automask.
Page whitelisting
- If you'd like to activate auto masking on your entire website and only exclude one or a group of pages, be sure to list the URLs you'd like to unmask.
Activate/Deactivate automasking at Page-level
- Defining regex (contact your CSM if you need assistance with this method)
- Defining operators (you can use this method the Automasking tab of the Console - contact your CSM if you need assistance with this method)
How to define regex
- Define the regex for URLs to be unmasked.
- Go to Settings '⚙️ ' > Console.
- Go to the Modules & Features tab.
- On the Session Replay line, click Collect.
- Enable Session automasking (if not already enabled).
- Select the Automask all pages except option.
- Select the RegEx tab and click Apply.
- Click New rule and create your RegEx.
- Test and save your RegEx.
Optional: If not enabled by default, you can select the Ignore case sensitivity option.
How to define operators
- Go to Settings '⚙️ ' > 'Console'.
- Go to the 'Automasking' tab.
- Turn on 'Session automasking' (if not already selected).
- Select either 'Automask all pages except' or 'Unautomask all pages except' option.
- Select the 'Operators' tab and click 'Apply'.
- Click 'New rule'.
- Set your list of rules by defining operators.
How to exclude sections of pages from being automasked
When using automasking, you can also choose to exclude specific sections/elements of certain pages from being automasked.
Contentsquare offers two methods to achieve this:
1. Adding 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.
<div class="product"data-cs-capture>
<h2> Title that should not be masked </h2>
<div> Content that should not be masked </div>
</div>
2. Using a javascript command
Every element listed should be identified by its CSS selector, and then be added to the setCapturedElementsSelector command.
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"]);
⚠️ This command has to be executed BEFORE the tracking tag itself is loaded and can either be added to the Contentsquare tag as custom code if you are using a custom HTML/JS tag in your Tag Manager, or as a separate custom HTML/JS container that must be invoked BEFORE the main Contentsquare tag.
Masking specific site elements that may contain personal data
In addition to using automasking (with or without selective unmasking of specific sections or entire pages), Contentsquare offers a way to mask personal data that does not require automasking, that works similarly to the selective unmasking method covered above, but removes all text and HTML nodes contained within the targeted element(s), while leaving everything else unmasked.
Get started
1. Ask developers on your team to help you decide which masking method works best for your site and complete the technical masking process outlined in this article.
2. Browse each page that is tracked by the CS main tracking tag, and identify and list every element that could contain personal data.
3. Select one of two element masking methods:
-
Implement a single line of code that calls all elements previously tagged for masking purposes and removes any personal data from your session replays.
- Recommended for sites where individual elements have previously been tagged to mask personal data with a different provider since the single line can easily call any existing tags.
-
Individually tag each element containing personal data with a specific-data-attribute will also remove personal data from your replays.
- Recommended for sites that have never tagged elements containing personal data.
How to activate element masking
Single line of code method
Here 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});
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
}
]
Note: This line of code 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 text automasking method.
Element tagging method
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.
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>
Note: To use this method you / your development team will need the ability to make changes to your site's DOM.
Tagging method:
DOM attribute type | Data attribute |
DOM attribute value | data-cs-mask |
Can the value be modified | no |
What is removed |
innerHTML: text content + all nodes inside the marked element will be removed from the HTML. Events on removed HTML — Events (click, hover, etc.) will still be collected and sent to our servers even if they are targeting removed HTML elements. They will be visible in the application using live background. |
When is it removed | Before sending the collections to the servers |
Example:
Here is an example of what your Session Replay would look like if both automasking for text is activated (‘aaaaa’ as described above) alongside the process of element masking ( as described below). Masked elements will appear as greyed-out ‘Hidden zones’.