Click Heatmaps

Click heatmaps show you a colour overlay of where visitors click on a specific page. Areas with more clicks appear hotter — moving from cool blues through greens, yellows, and into reds at the highest-click zones. This gives you an immediate visual understanding of where visitor attention and interaction concentrate on a page.

What click heatmaps reveal

A click heatmap answers questions that pageview metrics cannot:

Are visitors clicking your primary CTA, or are they clicking somewhere unexpected?
Is a navigation element causing confusion by attracting clicks away from your intended flow?
Are visitors clicking on images or text that are not interactive, indicating they expect something clickable to be there?
Which of several competing elements on a page receives the most engagement?

These are design and UX questions. Heatmaps give you empirical evidence to answer them rather than relying on intuition or anecdote.

How click heatmaps work technically

When heatmaps are enabled for a page, the Statalog tracker listens for click events on that page. Each click is captured as an (x, y) coordinate relative to the page.

Rather than storing the raw coordinate, the tracker immediately buckets the click into a 20×20 pixel grid cell. The cell index — not the precise coordinate — is what gets sent to Statalog's servers. This bucketing happens on the client, before any data leaves the visitor's browser.

Data is batched and sent in the background every 5 seconds, or when the visitor navigates away. The payload is a compact count of clicks per grid cell — for example, "cell (14, 23) received 1 click this pageview." On the server, these cell counts are added into a ClickHouse SummingMergeTree table that stores only cumulative aggregate totals per cell per page.

There are no individual click records. There is no way to reconstruct a single visitor's click sequence from the stored data. The database contains only: page, viewport bucket, grid cell, total click count. That is the entirety of what is stored.

Viewport buckets

Click data is stored separately for four viewport width categories:

Mobile — up to 767px
Tablet — 768px to 1023px
Desktop — 1024px to 1439px
Wide — 1440px and above

When you view a heatmap, you select which viewport to display. This matters because page layouts change significantly between mobile and desktop, and a click that lands on a CTA at desktop width might land on a navigation element at mobile width. Separate viewport buckets ensure the heatmap overlay aligns correctly with the page layout as it actually appears for each device category.

Enabling heatmaps for a page

Heatmaps are not enabled by default for all pages — enabling them for every page would generate unnecessary data volume. To enable a heatmap:

Go to Sites in the main navigation
Select the site you want to configure
Open the Heatmaps section
Add the page path you want to track (exact path or contains match)
Save the configuration

The tracker will begin recording click data for that page from the moment the configuration is saved. Historical click data for that page is not retroactively available — heatmaps capture forward from the point of enabling.

Automatic data limits

To prevent runaway data accumulation, heatmap recording for a page automatically stops when either of these thresholds is reached:

1,000 sessions have been recorded for that page with heatmaps active
30 days have elapsed since heatmap recording was enabled for that page

Once a limit is reached, the existing heatmap data remains available for viewing but no new click data is recorded. You can re-enable heatmaps to start a fresh collection period — for example, after making changes to the page you want to validate.

These limits exist so that heatmaps serve as focused diagnostic tools rather than continuous background data collection systems.

Reading the heatmap

The heatmap is rendered as a colour overlay on a screenshot or live render of your page. The colour scale runs from cool (low click density) through warm (high click density):

Blue/cool — low click activity relative to the page maximum
Green/yellow — moderate click activity
Orange/red — high click activity (hot spots)

Hot spots to investigate:

Your primary CTA should be a hot spot. If it is not, visitors are not engaging with the action you most want them to take.
Navigation elements that should lead visitors forward should be warm. If your "back" or "close" button is the hottest element, that is a strong signal of friction.
Areas of the page with no interactive elements that are nevertheless receiving clicks indicate "false affordances" — elements that look clickable but are not.

Cold areas to investigate:

A CTA that appears cold may be visually buried, below the fold for most visitors, or missing entirely for mobile visitors if the viewport heatmap looks different from desktop.
Content you thought was important but that nobody clicks on may not be as central to visitor intent as you assumed.

Privacy — how this differs from session replay tools

Tools like Hotjar and Microsoft Clarity offer session replay in addition to heatmaps. Session replay records every mouse movement, click, and scroll of individual visitors and stores those as playable recordings. This creates a record of individual behaviour that is inherently personal data under GDPR, because it captures detailed interaction sequences that can be linked to a session, a time, and often a user account.

Under GDPR, collecting session recordings typically requires informed consent, which means a consent banner.

Statalog's approach is architecturally different:

	Hotjar session replay	Statalog heatmaps
Individual recordings stored	Yes	No
Raw coordinates stored	Yes	No — bucketed to 20px cells on client
Can replay a specific visitor's session	Yes	No
Consent banner required (GDPR)	Yes	No
Data stored per visitor	Yes	No — aggregate counts only

Because Statalog stores only aggregate grid cell counts — with no way to reconstruct individual behaviour — heatmaps are genuinely cookieless and require no consent banner, consistent with all other Statalog data collection.

FAQ

Why 20×20 pixel cells? 20 pixels is large enough to meaningfully bucket nearby clicks together (a cluster of clicks around a button will all fall into the same or adjacent cells) while small enough to preserve spatial resolution on the heatmap. Finer grids would require more storage and could allow more precise reconstruction of click positions; coarser grids would produce less useful visual detail.

Can I see heatmap data for pages behind a login? Yes, as long as the Statalog tracker is loaded on those pages and heatmaps are enabled for those paths. The tracker does not care whether the page requires authentication — it fires on any page where it is present.

Does the heatmap work with single-page applications? Yes, provided the Statalog tracker is configured for SPA support and fires a virtual pageview event on route changes. Each virtual pageview is treated as a page for heatmap purposes, and click data is attributed to the current route at the time of the click.