Heatmaps

A heatmap in StorePilot is a page template × a device class × a date range. Never a session, and never one visitor's visit — those are what session recordings are for.

Choosing what you are looking at

Press the page name to open the picker. It searches every page this site has data for — not only the ones with clicks, so a page people read and never clicked is in the list — and each row shows what was recorded and whether the page already has an image to draw on.

If the page you want is not there, paste its address into the field at the bottom. That works for a page with no data at all: the address is reduced to the page template it belongs to (so campaign parameters do not matter), and the next few visitors of that page are asked for a picture of it.

• Page — a template, not a URL. /product/917 and /product/918 are the same page here, because the question "where do people click on a product page" is not answered by one product.
• Device — desktop, tablet and mobile are separate maps. They have to be: the same click is at a completely different position in a layout that reflows.
• Range — closed days come from pre-aggregated cells and today is computed live, so the most recent data is never missing while yesterday's is instant.

Reading it

Clicks are placed against the width of the page's content column, not the width of the browser window. That is not a detail — the same click sits at 0.26 of a 2560px window and 0.03 of a 1280px one, and only the column-relative figure means anything across both. It also means the overlay needs the recorded geometry of that column to place a click, which is why an unrendered background sometimes delays the dots.

Scroll depth is measured down the whole document in fixed bands, against an absolute reference rather than the content column. The background is a picture of the entire page, and the top of the content moves between visitors — an admin bar, a cookie banner — so a column-relative band drew every click a header's height too high.

Element ranking lists what was actually clicked, by selector, with counts. This is the part that survives when there is no picture, and it is often the faster read: "nobody clicks the second CTA" is a sentence, and a heatmap is a thing you have to interpret.

The two maps

Clicks shows where people pressed, and the metric buttons switch between ordinary clicks, rage clicks and dead clicks.

Scroll depth shows how far down the page people actually got: the page darkens towards the point where visitors stopped, and a dashed line marks the depth half of them reached. It is measured in percent of the page, and it needs no background image at all — on a page with no picture it still draws as a labelled scale, which for most pages is the more useful of the two.

One caveat is worth knowing, and the screen repeats it: depth is a share of each visitor's own page height, laid over one picture of that page. A page whose height moves between visitors — a cart with several items, lazy-loaded reviews, an endless list — will not line up exactly. That is why the line is labelled in percent and never in pixels.

You choose which pages get a picture

The background is a PNG the platform renders itself, and it renders one only for pages you ask for. There are two places the picture can come from:

• A copy of the page from a visitor's own browser. When you ask for an image, the request goes out to your site within a minute, and the next few visitors of that page each send one serialised copy of it. This is how most pages get a picture, and it works whether or not session replay is switched on.
• A frame from a recorded session, if the page happens to have one.

The steps:

1. Open the heatmap for a page and press Render an image of this page.
2. Wait. If a recorded visit exists this is quick; otherwise it takes as long as it takes for a few visitors to reach that page at that width.
3. You are offered up to three pictures, from three different visits. Pick the one that looks like the page.
4. Only then is the heat drawn on top of it.

Clicks, scrolls and rage clicks are collected for every page the whole time, whether or not it has an image — asking for a picture changes what you can see, never what is measured.

Approval exists because a render can be subtly wrong in a way only somebody who knows the page can see: a consent dialog covering the hero, a carousel caught between slides, a lazy image that had not arrived in the frame. Heat drawn over a wrong picture is a confident statement about where people clicked that happens to be false. If the image comes out wrong, press Render it again instead of approving it.

Asking again does not take the current picture down: the new renders are offered beside it and the one in use stays on screen until you choose a replacement.

When there is no background image

It is optional and its absence is not an error:

• Nobody has asked for one for this page yet.
• Somebody has asked, and the platform is still waiting for a visitor to reach that page at that width. A page with little traffic on an unusual screen size can wait a while.
• A deployment without the optional rendering support never produces one.

In every case the overlay falls back to the scroll scale, the element ranking and a vertical band chart. Everything except the picture still works.

Screenshotting your live site was considered and rejected twice over: the platform cannot see pages behind a login, and fetching a URL that arrived in an ingest payload is a server-side-request-forgery by construction. The renderer navigates nowhere. It replays events we already stored, into a blank page, with page JavaScript disabled — and the masking rules were applied by the collector at record time, so the frame was already masked before the platform ever saw it.

Why the picture can look slightly out of date

An approved image is refreshed on its own once it goes stale, and a picture rendered from an older recorded visit is as old as that visit. A background from last Tuesday under this week's clicks is the normal state; if the page has been redesigned, ask for it again — the new pictures are offered beside the one in use, never instead of it, so nothing disappears from your screen while you decide.

What heatmaps need

Clicks and scroll depth come from the interactions collector, which deliberately carries no session-replay code — so both keep working on a site that has recordings switched off.

The background no longer needs recordings. It used to: a picture could only be rendered from a recorded visit of that exact page at that exact width, which on a real shop covered about one page in nine. A page image is now asked for from the page's own visitors, so any page with traffic can have one.

What the copy contains is governed by the same masking rules as session replay, applied in the visitor's browser before anything is sent, and a visitor who declined tracking or whose browser sends a Global Privacy Control signal sends nothing at all. The copy is deleted as soon as it has been turned into a picture.