Run
Heatmaps
Where visitors click and how far they scroll, for one page or every page, and for each variant.
A heatmap shows where visitors click on a page, and how far down they scroll, painted over the page as they got it. Turn it on for the pages you want to learn about, or for every page; it starts with your next publish. The Heatmaps tab in the studio's header shows them.
Turning it on#
For one page, open it in the editor with nothing selected (or click Page at the start of the bar under the page). The inspector shows This page, with Record a heatmap. Turning it on writes heatmap on the page's <Page>:
import { Page } from "mockly"; export default function Pricing() { return ( <Page title="Pricing · Acme" heatmap> <main class="mx-auto max-w-3xl px-6 py-24"> <h1 class="text-4xl font-bold">Simple pricing</h1> </main> </Page> );}For every page, turn on Record a heatmap on every page in Site settings. A page can still leave itself out, with heatmap={false}, which turning off its Record a heatmap writes:
import { Page } from "mockly"; export default function Checkout() { return ( <Page title="Checkout · Acme" heatmap={false}> <main class="mx-auto max-w-xl px-6 py-24"> <h1 class="text-2xl font-bold">Checkout</h1> </main> </Page> );}Write heatmap as it is: heatmap, heatmap={true}, or heatmap={false}. Anything else, such as a constant, is MK4025. The not-found page never records one.
Pages that don't record a heatmap load nothing extra. A page that does loads a small recorder, about 1.2 KB.
The Heatmaps page#
Pick a page, a device (desktop, tablet, or phone, by the visitor's window width), and a period of 7, 30, or 90 days. The page shows as the version that recorded it, at that device's width, and scrolls like a visitor's window.
| Map | Shows |
|---|---|
| Clicks | Heat where visitors clicked: cool where a few did, hot where many did |
| Rage | Rage clicks only: three or more quick clicks in one spot, usually something that didn't respond as hoped |
| Dead | Dead clicks only: clicks on something that isn't a link, button, or field, after which nothing changed |
| Scroll | How far down views got, hot at the top and colder further down, with lines where 75%, 50%, and 25% of views had got to, and the average fold |
The panel beside the page has the totals, and the most clicked elements, a link or a button with what's inside it counted as one. Point at one to outline it on the page, or click it to scroll there. Clicks on parts the page doesn't show at that width, such as a phone menu, are counted under the list.
With an experiment on the page, pick a variant for each experiment to see the visitors who saw it. Comparing variants' heatmaps shows how each one was used, not only which one converted.
When the page changes#
Clicks are recorded on elements, not on screen positions, so a click lands on the same button at any width. A heatmap lasts while the page's elements stay where they are: new words or styles keep it. Adding, removing, or moving elements starts a new one when you publish, and the earlier one stays to see under Version, on the version that recorded it.
What's recorded#
- for each click: the element clicked, by its place in the page, and where in it
- whether it was a rage click or a dead click
- for each view: how far down it got, in steps of 5% of the page, and where its first screen ended
- the device, by window width, and the variants the view showed
Nothing a visitor types or reads is recorded. Counts are added up by day (in UTC) and kept 90 days. Bots, headless browsers, and forced previews of a variant aren't recorded. Each page records up to 20 views a minute, so a busy page records a steady sample.