Masking elements allow you to hide various sensitive information such as name, card details, password, email address, and home address of your visitor in the recordings. By default, all keystrokes or inputs entered by your visitor will be masked and replaced by asterisks (*) on your recording screen in PageSense. Additionally, we also allow you to select specific elements and interaction areas that you want to mask in your recording screen to maintain your visitor's privacy for information on your website. 

We provide several options to our users for preserving their website visitor's privacy. However, there might be instances in which a visitor's personal identifiable information is displayed on your website and it is in your hands to ensure that you aren't violating their privacy. 

So, when you create a session recording experiment, we strongly suggest that you mask all personal identifiable information of your visitor that appears on your website.

Make sure you mask these and any other information on your website that points to your visitor's identity.

Example 2:
If you have sections on your website that are personalized based on the digital identity of the visitor, for example, user name, user id, handle.

Example 3:
If you have a pop-up on your website that confirms the credentials entered by the visitor, for example, salary, job position, place of residence, or telephone number.

Different ways of masking elements

2. In the Elements to Mask section, click the Select elements directly from web page option. This will open an Element Selector window.

3. Enter the URL of the web page which contains the element you want to mask and click Load Page.

4. Select the element to mask by clicking on it. You can select elements across multiple web pages on your website. Simply load the required web page within the Element Selector window.

The elements that you mask will not be recorded or stored and nor will any interaction that your website visitors make with them. All keystrokes made by the visitor will be masked by default and will be replaced by asterisks (*).

The elements that you choose to mask will not be recorded or stored and neither will any interaction that your website visitor makes with them. All keystrokes made by the visitor will be masked by default and will be replaced by asterisks (*).

You can add multiple sector IDs for elements across different pages, or you can select the elements directly from the web page by clicking the  Select elements directly from web page  option.

Masking using the interactive editor might fail when there is a change in DOM ordering and the selectors generated for masking have position-based indices.  When selecting elements to mask within the element selector window, we look for selector IDs, classes, or attributes. When the HTML markup of your web page doesn't have explicitly defined IDs, classes, or attributes, the selector generated for masking will have an index with respect to its position in the DOM. 

Example: body > :nth-child(12). 
Here, the element can have a different position in DOM order when loaded within the element selector window when compared to its position within your web page. This makes masking the element based on its selector (with such indexed positions) fail.

In this case, you should add the zps-mask custom attribute to the element's HTML making it impossible to record any interaction your visitor makes with it.