How do I correct a heatmap when a page header is shown over the full heatmap?

If your website uses « Parallax Scrolling », or when a part of your page is set to 100% of the browser height, the heatmap sample might not be shown correctly. Typically, the header would be shown stretched over the whole heatmap and other parts of the web page would not be visible. To solve this problem, set a max height to this element using CSS or JavaScript. For example:

.welcome { max-height: 1000px; }

If you want to set this style only for Heatmaps, you can prefix your selector with « html.matomoHeatmap »:

html.matomoHeatmap .welcome { max-height: 1000px; }

The chosen 1000px is only an example, you can set it to any height. Learn more about custom stylesheets.

Note: In some cases setting the element heights using vh units may not result in accurate screenshots. In this case you can instead set the elements to fixed percentages or pixel height values for specific viewports.