Heatmaps is a plugin that 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.
Go to Piwik. In the left menu click “Heatmaps” and then select a Heatmap report of your choice.
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 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.
You can apply any of the over 100 OTS segments and view the engagement for different target groups.
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.
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.
Heatmaps will be automatically tracked and generated as soon as you have created one via the OTS UI or HTTP API. The plugin automatically starts the tracking of clicks, mouse moves and scroll activities on your website or web application.