Under 'Website Settings' you have the option of excluding content from being recorded by Mouseflow. This is useful if you have sensitive/personal data as part of the HTML on a recorded page.
An example of this could be a confirmation page, where users' details are shown after checkout, or a member page with similar details.
This content will be picked up by our recording script, unless you exclude it from being recorded. This can be done using the 'Exclude content' field:
In this field you can add the CSS selector for a page element (HTML) to ensure it will not be tracked. The selector can be the element's ID, class or even CSS path, as shown in the image above.
Examples of CSS selectors
If you're not sure what a CSS path is, we've created an example below. Let's say you have this box on your website:
Name: Jefferson Smith
Address: 1600 Pennsylvania Avenue NW
City: Washington, DC 20500
This is obviously personal data, so you will want to block it. To find the CSS selectors needed for the "Exclude content"-field, you need to inspect the HTML of the box. You can do so by right-clicking the box and choosing 'Inspect''.
This will open your browser's developer console, which allows you to look under the hood of your website. In this case, you should see HTML looking something like this:
<div id="user-details"> <p class="user-details-p">Name: Jefferson Smith</p> <p class="user-details-p">Address: 1600 Pennsylvania Avenue NW</p> <p class="user-details-p">City: Washington, DC 20500</p> </div>
In this case, you can see a few different useful selectors:
- The entire box has the ID "user-details". So by entering "#user-details" in the "Exclude content' field, you'd effectively exclude the entire box from your recorded. The starting "#" is always used to signify an ID.
- Alternately, you could use the class shown on each line in the box: "user-details-p". Using this selector would exclude all content in the box, but not the box itself. You can add the class to the field using ".user-details-p". The starting "." is always used to signify a class name.
- In case the box and content didn't have any IDs or classes, you could use a CSS path instead. You can get this selector by right-clicking the HTML of the box, choosing 'Copy' and then 'Copy Selector'. The CSS path could look something like "body > div > div". You can copy this directly to the "Exclude content"-field.
Once you hit save after entering a new selector, the content in question will automatically be excluded from all future recordings and heatmaps.
You should note that:
- Excluding content will hide that content entirely from our service. The content will never be recorded by us, sent to our servers, or saved by us anywhere. It's completely hidden from us.
- Excluding content will only work for new data, made after you've saved your changes. You cannot exclude content from existing maps and recordings.
- Excluding content can impact the height of the recorded page in our heatmaps and recordings. You might see misaligned clicks, when the users click the area where they saw the excluded content. We recommend excluding as little as possible. So in the example above, you should exclude the content of the box, and not the box itself.
- You can also exclude and whitelist content using the Visual Privacy Tool. You can read more here!