A heatmap is the friendliest chart in analytics. You look at a picture of your own page with warm patches on it and you immediately see something you did not know.
There are three kinds, they answer three different questions, and a few minutes knowing which is which turns a nice picture into a list of things to go and fix.
Three different maps, three different questions
"Heatmap" covers at least three different things, and they measure different behaviour. Knowing which one you are looking at is most of the skill.
Three panels side by side. A click map shows where people tapped, with hot spots on a navigation link and a call-to-action button. A scroll map shows how far down the page people got, fading as it descends. An attention map shows where people paused, concentrated around a headline and a price.
Click maps answer "where did people tap". Brilliant for spotting things people expect to be interactive, and things you built that nobody touches.
Scroll maps answer "how far down did people get". This is the most underrated of the three and usually the most actionable — if everyone stops at the same point, whatever is at that point is the problem.
Attention maps answer "where did people pause". They are built from scroll position and time rather than from eyes — nobody is watching your visitors through a webcam — so treat them as a good rough guide.
Four things worth checking before you act
None of these is a flaw in heatmaps. They are just the handful of things that make the difference between a map that points somewhere useful and one that points at your navigation bar.
1. Rank by rate, not by volume
A click map shows raw volume by default, so your navigation bar is always hot. It's on every page and everyone uses it — true, and not news.
The number you want is the rate: of the people who saw this element, what fraction clicked it? A small link converting at 30% is telling you much more than a nav bar holding 60% of your clicks. Most tools can show you both; it is usually one toggle.
Two views of the same three elements. By click volume, the navigation has the most clicks, followed by a hero button and then a small text link. By click rate relative to the people who saw each element, the order reverses: the small text link converts best.
2. Split by device
A click 300 pixels down is above the fold on a laptop and halfway through the content on a phone, so a blended map describes a page nobody visited. Split them and expect the two to disagree. That disagreement is often the most useful thing on the screen.
3. Give every map a date
Heatmaps are recorded against a screenshot of the page. Ship a redesign and the old data is now sitting on a new layout. Easy to avoid once you know: treat every map as belonging to a date range, and start a fresh one when the page changes.
4. Remember who is in the picture
A heatmap records the people who stayed long enough to do something. Anyone who arrived, glanced and left barely registers, so the map is drawn by visitors who were already getting on with your page.
That makes it excellent for improving the experience of people who are staying. For the ones who left, look at the very first drop on your scroll map and at bounce rate split by source — different question, different tool.
The three findings worth your time
If you only ever check three things on a heatmap, make them these. Each one tends to produce something you can fix the same afternoon.
- Dead clicks. People clicking things that aren't clickable. Every one is somebody expecting your page to do something it doesn't, they cluster on two or three elements you'd never have guessed, and they are usually a quick fix.
- The first big scroll drop. Not the overall shape — the first place the line falls away sharply. Something at that exact point is where you lose people: an interruption, a wall of text, or a section that looks like the end of the page when it isn't. Move it, and the rest of the page gets read.
- Rage clicks. The same spot clicked three or more times inside eight tenths of a second — someone hammering a button that isn't visibly responding. Sometimes a bug, often just a button that says nothing while it works, and almost always news to whoever built it. There is more on both in dead clicks and rage clicks.
An illustration of a false bottom: a page section ends with generous whitespace that looks like the end of the page, and the scroll map shows a sharp fall at exactly that point, from 78 percent to 24 percent.
How ours work
Interaction tracking turns on inside the script you already pasted — there's no second snippet and nothing to change in your HTML. Maps are split into mobile, tablet and desktop, and coordinates are stored relative to the element as well as to the page, so a map still lines up after a CSS change.
Every map is an aggregate. A click is a coordinate, a selector and a viewport bucket, never attached to a visitor identifier — we don't keep one. One happy consequence: heatmaps here need a consent banner no more than the pageview counting does.
The heatmaps page has the detail, including what they cost and which plan they start on. If you want the broader argument for measuring without identifying anybody, that's how cookieless analytics works.
The short version
- Three maps, three questions. Know which one you're looking at.
- Rank by rate rather than volume, and the useful findings rise to the top.
- Split by device. The disagreement is usually the interesting part.
- Give every map a date range, and start fresh when the page changes.
- Go straight for dead clicks, the first scroll drop, and rage clicks.