Heatmaps

Heatmaps lets you record clicks, mouse movements, and scroll activities of your visitors on your website. Heatmaps helps you to find out where users think something is clickable but is not, whether there are parts of the page that are being rarely viewed or interacted with, what your visitors are actually looking for, how much of the page is visible when users view your page, and more. Heatmaps let you ultimately optimize your website and maximize your success.

Heatmaps is a premium feature which is included in our Cloud-hosted Business plan or you can purchase it on the Matomo Marketplace if you self host Matomo On-Premise. Learn more about all the benefits and features of Heatmaps.

Heatmaps for Matomo (Piwik) gives you 100% data ownership and full control over your data.

Viewing Heatmaps

Go to Matomo. In the left menu click “Heatmaps” and then select a Heatmap report of your choice.

Click Map

On the click heatmap, you can for example find out where confusing colors or elements make your visitors think that something is clickable. It also lets you see where your visitors go next or what they are looking for.

Mouse Move / Hover Map

A mouse move heatmaps is similar to eye tracking but requires only seconds to set up and you can see results much faster. Mouse move heatmaps help you find for example useless parts on your page, which parts are ignored, where your visitors engage, whether users get distracted, and more.

Scroll Map

Scroll heatmaps use colors to visualize how far down in a page your visitors scroll. When you hover on the Scroll heatmap, you see exactly how many percent have scrolled down to a certain position. This lets you for example find out if there is important content positioned too far down the page, whether your visitors are encouraged to scroll, and more.

Above the fold

“Above the fold” is the content that a visitor sees without scrolling. The “Average Above the Fold” line will show you how much content your visitors see on average when they open your page. Use this information for example to find out if you need to show key content further up.

Applying segments

You can apply any of the over 100 Matomo segments and view the engagement for different target groups.

Devices

The heatmap report lets you view the engagement for desktop, tablet and mobile devices with just one click.

Managing your Heatmaps

Before your users mouse movements will be recorded and your page heatmaps will be generated, you need to create a Heatmap.

To get to the “Manage Heatmaps” screen, click either in the reporting or in the administration menu on “Heatmaps” and then “Manage”. No developer knowledge is needed to configure any of the heatmaps and you don’t need to adjust the code on your website. When you manage your heatmaps, the UI always explains what each step is about in detail and it will literally take you only seconds to track your users interactions and generate heatmaps.

Creating and editing a Heatmap

To create a heatmap, click on “Create new heatmap” in the bottom left. To edit a heatmap, simply click on the “edit” icon next to the name of a previously created heatmap.

When you create or edit a heatmap, all you need to do is define a name for the heatmap and choose on which target page the heatmap should be generated for. To do this, you can choose between “URL”, “URL path”, “URL parameter” attributes and comparisons like “equals”, “starts with”, “contains”, “matches the regular expression”, and many more. The validator next to your target page lets you easily test whether the page you want to match actually matches the Pages for which you want to generate Heatmaps.

Advanced options

When you configure a heatmap, you can optionally define advanced options such as:

• choose a Screenshot URL
• hide elements from the heatmap
• choose a different Sample rate
• define the Breakpoint width for Mobile phones and Tablet (useful if your website is responsive)As always, the meaning of each option is clearly explained in the user interface.

Tracking heatmaps

Heatmaps will be automatically tracked and generated as soon as you have created one via the Matomo UI or HTTP API. The plugin automatically starts the tracking of clicks, mouse moves and scroll activities on your website or web application.

Learn more about setting up Heatmap tracking on our Developer Zone.

FAQ

We compiled a list of the most frequently asked questions in the Heatmap & Session Recording FAQ.

You can get Heatmap & Session Recording for Matomo on the Marketplace.