Heatmaps

Visualize where visitors click, move their mouse, and how far they scroll on your pages.

This feature is available on the Premium plan and above.

Overview

Heatmaps provide a visual representation of user interaction with your pages. They show you what captures attention, what gets clicked, and how far visitors scroll — insights you can’t get from standard analytics reports.

Heatmap reports appear under Heatmaps in the left reporting menu. Data is only collected for pages you’ve explicitly set up a heatmap for — see Creating a Heatmap below.

Types of Heatmaps

Click Heatmaps

See where visitors click (or tap) on your pages.

Red/Orange areas — High click activity (hot spots)
Yellow/Green areas — Moderate click activity
Blue/No color — Low or no click activity

Click heatmaps reveal:

Which elements attract the most clicks
Whether visitors click on non-clickable elements (indicating confusion)
If important buttons or links are being ignored
How click behavior differs across devices

Mouse Move Heatmaps

See where visitors hover and move their mouse. Mouse movement correlates with where people are looking, giving you eye-tracking-style insight without any special setup.

Scroll Heatmaps

See how far visitors scroll down your pages.

Red/Orange areas — Almost all visitors see this content
Yellow/Green areas — Some visitors scroll this far
Blue areas — Few visitors reach this point

Scroll heatmaps reveal:

How much of your content visitors actually see
Where visitors lose interest and stop scrolling
Whether important content is placed too far down

Creating a Heatmap

Heatmaps are not recorded automatically — you create a heatmap for the pages you want to study, and data collection starts from that moment:

Navigate to Heatmaps → Manage Heatmaps
Click Create New Heatmap
Enter a descriptive name (e.g., “Homepage — March redesign”)
Define the target pages using match rules
Optionally adjust the advanced options
Save — recording begins as soon as matching pages are visited

Creating and managing heatmaps requires write access to the site; view-access users can still see the resulting reports.

Target Page Match Rules

Target pages match on URL, URL path, or URL parameter, with comparisons including:

Equals simple — ignores protocol, www, URL parameters, and trailing slashes. The easiest option and the right default for most pages.
Equals exactly — requires an exact match including protocol. Use only when you need precise matching.
Starts with / Contains — match groups of pages
Matches the regular expression — full pattern control
Not equals simple — exclude pages

The editor includes a built-in URL validator: paste a page URL and it confirms whether your rules match it, before any data is collected.

Advanced Options

Sample limit — Stop recording after this many page views (default: 1,000). When the limit is reached, the heatmap ends automatically and the collected data remains viewable.
Sample rate — The probability each page view is recorded (default: 5%, configurable from 0.1% to 100%). Raise it for low-traffic pages; lower it for very high-traffic pages.
Screenshot URL — Capture the background screenshot from one specific URL (useful when the target rules match many pages).
Excluded elements — CSS selectors for elements to hide from the heatmap screenshot.
Mobile/tablet breakpoints — Adjust the widths used to bucket visitors into device types.
Capture screenshot manually — Take the page snapshot on demand instead of from the first visitor.

How the Page Screenshot Works

The first time a visitor views a matching page, the page’s full markup is captured and stored as the heatmap’s background. The heatmap always renders on this stored snapshot — if you later redesign the page, delete the screenshot (bottom of the heatmap view, available while the heatmap is active) and it will be recaptured on the next visit.

Viewing Heatmaps

Navigate to Heatmaps in the reporting menu
Select the heatmap you want to analyze
Choose your heatmap type (click, move, or scroll)
Choose device type (desktop, tablet, or mobile)

The heatmap renders at a default width of 1280px — use the resolution dropdown at the bottom of the view to change it. You can also apply any of your segments to a heatmap. To be notified when a heatmap finishes collecting data, enable the email notification under Administration → Personal → Settings.

Managing Heatmaps

Heatmaps → Manage Heatmaps lists every heatmap with its status (active or ended) and actions to edit, stop, view, copy, or delete. Stopping a heatmap permanently ends its recording — the data stays available, but collection can’t be resumed (create a copy to record again).

Analyzing Click Heatmaps

Look for Unexpected Patterns

Clicks on non-links — Visitors may think images or text are clickable
Ignored CTAs — Important buttons not getting clicks
Navigation patterns — Which menu items get used

Compare Desktop vs Mobile

Click patterns often differ dramatically:

Mobile users may miss elements visible on desktop
Touch targets may be too small on mobile
Navigation behavior changes on smaller screens

Check Above vs Below the Fold

Content “above the fold” (visible without scrolling) typically gets more interaction
Important CTAs should be in high-visibility areas

Analyzing Scroll Heatmaps

Find the Fold Line

The Average Above the Fold line shows where the initial viewport ends for most visitors. Content below this line requires scrolling.

Identify Drop-Off Points

Look for sharp color transitions — these indicate where visitors stop scrolling. Ask:

Is important content below this point?
Is there a visual cue that makes visitors think the page ended?
Is the content above this point engaging enough?

Evaluate Page Length

If most visitors reach the bottom, your page length is appropriate
If visitors stop halfway, consider shortening the page or improving content

Use Cases

Optimize Landing Pages

View the click heatmap for your landing page
Check if the main CTA is getting clicks
Look for distracting elements stealing attention
Verify scroll depth reaches your conversion elements

View the click heatmap for pages with navigation
See which menu items are used most
Identify unused navigation elements
Consider reorganizing based on actual usage

Validate Page Redesigns

Capture heatmaps before a redesign
Implement changes, then delete the stored screenshot so it recaptures the new design
Create a fresh heatmap after launch
Compare interaction patterns

Identify Content Issues

View the scroll heatmap for long content pages
Find where visitors stop reading
Improve content at drop-off points

Privacy and Data Protection

Heatmaps collect interaction coordinates and page structure — not what your visitors type:

Sensitive fields (passwords, emails, phone numbers, credit-card-like patterns) are always masked and never recorded
Add the data-matomo-mask attribute to any element to mask its content in heatmap screenshots:


<div data-matomo-mask>Patient-specific content here</div>

For healthcare sites, mask any page regions that could display protected health information before creating heatmaps of authenticated or personalized pages. See Session Recordings for the full masking reference — the same attributes apply to both features.

Best Practices

Size the Sample to Your Traffic

The default 5% sample rate and 1,000-view limit suit high-traffic pages
For low-traffic pages, raise the sample rate toward 100% so the limit fills within your analysis window
Don’t draw conclusions from sparse data — let the heatmap collect a meaningful share of its sample first

Compare Device Types

Always check desktop, tablet, and mobile separately. Each has different:

Screen sizes and fold positions
Interaction methods (click vs touch)
Navigation patterns

Look at Multiple Pages

Don’t just analyze your homepage. Check:

High-traffic landing pages
Key conversion pages
Pages with high bounce rates
Important content pages

Combine with Other Data

Use heatmaps alongside:

Session recordings — Watch actual behavior in context
Analytics reports — Understand traffic and conversion data
Form analytics — See form interaction details

Limitations

Heatmaps show aggregate patterns, not individual behavior
The heatmap renders on a stored snapshot — dynamic or personalized content may not display as visitors saw it
Sites that load entirely different CSS files per device type aren’t compatible with heatmap screenshots
Heatmaps work in web browsers only (not native mobile apps)
Very low-traffic pages may not collect enough data to show reliable patterns

Troubleshooting

Blank Heatmaps or Large Empty Spaces

If your heatmap displays blank areas or appears completely empty, there are several common causes.

HTTP/HTTPS Mismatch

Ensure your website URL protocol matches the heatmap configuration. If your site uses HTTPS but the heatmap is configured for HTTP (or vice versa), the screenshot may fail to render.

When configuring heatmap URLs:

“Equals simple” ignores the protocol, URL parameters, and trailing slashes — use this for easier matching
“Equals exactly” requires an exact match including protocol — use this only when you need precise URL matching

If you see a blank heatmap and your browser console shows an error like “blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header,” the tracking code cannot access your website’s resources.

To fix this:

Add the Access-Control-Allow-Origin header to your server responses
For CSS files loaded from a CDN, add the crossorigin="anonymous" attribute to your stylesheet links:


<link rel="stylesheet" href="https://cdn.example.com/styles.css" crossorigin="anonymous">

Contact your web developer or hosting provider if you need help configuring CORS headers.

Full-Height Elements

Elements with CSS height: 100% or viewport (vh) units can cause blank areas or rendering issues in heatmap screenshots. This is common with full-height hero sections.

To fix this, add a maximum height in fixed pixels to the problematic element:


.hero-section {
  max-height: 1000px;
}

To apply this fix only for heatmap screenshots (without affecting your live site), use the matomoHeatmap class that’s added to the page during capture:


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

Missing CSS Files

If the heatmap screenshot looks broken or unstyled, CSS files may not be loading correctly. Check your browser console for 404 errors on CSS files.