How do I hide certain elements, excluded elements, of my web page when viewing a heatmap?

When setting up a heatmap for your website, it’s often necessary to hide specific elements, such as pop-ups or elements that might contain sensitive information. To simplify this process and avoid repetitive configuration, three key solutions can be employed: creating custom stylesheets, specifying CSS selectors for elements or adding the data-matomo-mask attribute.

Custom Stylesheets

To streamline the heatmap configuration, consider defining custom stylesheets in your CSS. This allows you to preset the CSS for elements you want to hide, eliminating the need for repetitive configuration each time you create a Heatmap.

Using CSS Selectors

When pinpointing the elements to hide, use the « Inspect element » feature available in most modern browsers. Right-click on the element you wish to conceal, select « Inspect element, » and then, within the inspect panel, right-click on the same element. Choose « Copy > Copy selector/CSS Selector » to obtain the CSS selector for that specific element. Then paste this information into the « Excluded Elements » field in the Heatmap configuration.

For example:
1. You have a class like this:
<div class="user-details">Secret number: 12345 Password: ******</div>
2. You can exclude this field in the user interface:
Dashboard >> Heatmaps >> Edit Heatmap >> Advanced Options >> Excluded Elements.
– Won’t work: user-details
– Will work: div.user-details

Using the masking HTML attribute

You can add the data-matomo-mask attribute to any HTML element that should not be tracked in a Heatmap or Session Recording. The attribute simply need to be added to the HTML element itself.

For example, a text element can have it added as:
<p class="my-class" id="my-id" data-matomo-mask>

For more information on preventing certain elements to be tracked, you can check our Heatmaps Guide « Masking content on your website ».