Page Heatmaps: Creating & Reading Heatmaps

Page Heatmaps give you a visual summary of how visitors interact with specific pages — where they click, how their mouse moves, and how far they scroll. While Session Recordings show individual sessions, heatmaps aggregate data from up to 8,000 page views to reveal patterns across your entire visitor base.

Consent requirement: Heatmap data is collected only for visitors who have accepted analytics cookies through the Cookiebot consent banner.

What are Page Heatmaps?

A heatmap overlays aggregated visitor interaction data on top of a screenshot of your page. Areas with high interaction appear in warm colors (red, orange), while areas with little interaction appear in cool colors (blue) or are left uncolored. You can view separate heatmaps for desktop, tablet, and mobile visitors.

Important notes before you start

Your plan includes a fixed number of heatmaps per website — not per month. You can create, delete, and recreate them as needed.
The page view limit per heatmap is also a total (not monthly). Once reached, the heatmap stops collecting new data until it is reset.
Heatmaps cannot be generated retroactively — data collection starts from the moment the heatmap is created and activated.
You cannot create two heatmaps for the same page URL. Doing so will cause a data conflict.
If you update your page's design significantly, reset the heatmap to capture the new layout — the screenshot used for the color overlay is taken at the time of the first visit after setup.
The heatmap must be set to Active status to collect data.

Activating Page Heatmaps

Go to Visitor Behavior → Page Heatmaps.
On the Welcome screen, click Let's Get Started — Create a Page Heatmap.
You will be taken to the heatmap creation form.

Creating a Heatmap

There are three ways to define which pages a heatmap covers:

Specific Page

Tracks a single, specific page. Select the page from the dropdown (only pages with at least one tracked visit appear). Best for analysing one key page in detail.

Dynamic Page

Aggregates data across pages that share the same structure — for example, all product pages or all blog posts. Uses Dynamic Pages you have defined in Website Settings → Special Pages. The first visited page of this type is used as the screenshot, but color data is gathered from all matching pages.

Custom URL Pattern

Captures all pages matching a URL pattern you define. Choose from five matching options:

Option	Matches when the URL…	Best for
Simple URL match	Matches a specific path, ignoring protocol, www, query strings, and fragments.	Core pages with dynamic tracking parameters in the URL.
Exact URL match	Matches the URL exactly as entered, including protocol and query strings.	Pages with unique identifiers in the URL.
URL starts with	Starts with the text you enter.	Entire sections or categories (e.g., all blog posts under `/blog/`).
URL contains	Contains your text anywhere in the address.	Pages sharing a common string (e.g., all pages containing `/thank-you/`).
URL ends with	Ends with the text you enter.	Pages with a consistent final segment (e.g., all `.html` pages, or all pages ending in `/register`).

For all three options, set the Page Views Used to Generate a Map to 2,500, 5,000, or 8,000 views. Then click Create & Activate Heatmap.

Managing heatmaps

From the heatmap overview, click the Settings icon on any heatmap tile to access the following actions:

Edit Details — change the heatmap name or color label.
Pause Recording — temporarily stop data collection. Can be restarted at any time.
Reset & Update — clears all existing data and starts fresh. Use this after making significant changes to your page design. Warning: this action is irreversible.
Delete — permanently removes the heatmap. This cannot be undone.

Select multiple heatmaps using the colored icon on each tile to apply bulk actions (Pause, Reset & Update, Delete) across multiple heatmaps at once.

Detail view and heatmap types

Click View Heatmap on any tile to open the detail view. The Overview tab shows heatmaps for each device type (Desktop, Tablet, Mobile). For each device, you can switch between:

Heatmap type	Available on	What it shows
Click Map	Desktop	Where visitors click. Hot zones (red) = high click density. Use to verify CTAs are being engaged.
Move / Mouse Movement Map	Desktop	Where visitors move their mouse — often a proxy for where they are reading or considering clicking.
Tap Map	Mobile & Tablet	Where visitors tap with their fingers. Equivalent to the Click Map for touch devices.
Scroll Map	All devices	How far down the page visitors scroll. Darker colors = more visitors reached that point. Use to decide where to place key content and CTAs.

The Global Page View Map at the top of the detail view shows a world map indicating which countries your heatmap page views came from.

You can export the current heatmap as a PNG file using the Export button in the top right corner. To update the page screenshot (e.g., after a design change), click Update Heatmap's Page, select the device, and capture a new screenshot.

Show All Data tab

The Show All Data tab displays the raw data behind the heatmap in a table. Columns vary by device and heatmap type:

Click / Tap: HTML element, number of clicks/taps, and % of total clicks.
Move: HTML element, interaction points, and % of total.
Scroll: % of page scrolled, pixels scrolled, number of visitors, and % of visitors.

You can export this data as a CSV file to share with your team or track progress over time.

Tips for using heatmaps effectively

Start with your most important pages — homepage, main landing pages, and checkout or sign-up pages give the most actionable insights first.
Look for clicks on non-interactive elements — visitors clicking on images, headings, or other non-linked elements may indicate confusion or missed conversion opportunities.
Use scroll data to position CTAs — if most visitors drop off before reaching your call-to-action, move it higher up the page.
Combine with Session Recordings — when a heatmap reveals an unusual pattern, use Session Recordings to watch individual sessions and understand the behavior in context.
Use the color scale — the color scale on the right side of each heatmap shows the engagement intensity range. A dark red area means very high interaction; a blue area means low engagement.

In this article