Read your heatmaps

A heatmap shows what many visitors do on one page, all at once. In a few seconds you see which buttons get used, which parts of the page are ignored, and where visitors get frustrated.

Open a heatmap

1. Go to Research → Heatmaps.
2. Pick a page in the drop-down at the top. It lists the busiest pages of the chosen period, with their number of pageviews. Pages are shown by name, for example Product pages (/products/…). Similar pages, such as all product pages, count as one and share one heatmap. See Group similar pages.
3. Choose a heatmap type: Clicks, Scroll or Attention.
4. Choose a device: Desktop, Mobile or Tablet. Each device has its own heatmap, because the page looks different on each.
5. Choose a period: 7 days, 30 days or 90 days.

To look at one group of visitors, such as only visitors who placed an order, use the filters below these buttons. See Filter and compare heatmaps.

Click heatmaps

With Clicks selected, a second row of buttons lets you choose which clicks you see:

• All clicks: every click and tap.
• First clicks: the first thing visitors clicked on this page. Shows what draws attention right away.
• Last clicks: the last click on this page before the visitor left or moved on.
• Rage clicks: three or more fast clicks on the same spot within a second. A sign of frustration.
• Dead clicks: a click after which nothing on the page changed within a second. Visitors expected something to happen. Clicks on links, form fields and videos are never counted as dead clicks.
• Errors: clicks followed by a JavaScript error within 3 seconds. Something may be broken here. The card title then reads Clicks before an error.

The colors go from light blue (few clicks) through green and yellow to dark red (many clicks), as on the scale from Few clicks to Many clicks above the map. Numbered badges mark the most clicked elements. The same numbers appear in the list next to the map.

Scroll heatmap

Scroll shows how far down visitors get. The top of the page is dark red, because almost everyone sees it. The color cools down through yellow and green to light blue as fewer visitors reach that point. Dashed lines at 25%, 50% and 75% show the share of visitors who got that far. A solid line marks End of the first screen (average): what visitors see without scrolling.

Next to the map, the Scroll depth card shows the share of pageviews that reached 10%, 25%, 50%, 75%, 90% and 100% of the page.

Attention heatmap

Attention shows how long each part of the page was on screen. The colors go from light blue (little time) to dark red (most time). Varly measures this in strips of 5% of the page height. The Where attention goes card lists the page from top to bottom in parts of 10%, with a bar and the average time per visit for each part. It also says in how many visits viewing time was measured.

What you see next to the map

• Totals for this selection: Pageviews, Clicks, Rage clicks and Dead clicks for the current page, device and filters. Rage and dead clicks also show as a share of pageviews, for example "1.2% of views". Click a label to switch to that heatmap.
• Most clicked (or Rage-click elements / Dead-click elements): the top elements with their number of clicks and share. Element texts follow the same text hiding as your recordings, so hidden text shows as dots here too. Use Download CSV to export the list. If recordings are on, Recordings next to an element opens the visits in which someone clicked it.
• AI summary: let the AI read the heatmap for you.

Above the map you can change the Opacity, hide the Numbers, measure an area and download a PNG. See Filter and compare heatmaps.

Screenshots

Varly takes a full-page screenshot of the page by itself, for each device. For a group of similar pages it uses one real address from that group and visits it as a new visitor who is not logged in. A new screenshot is taken when you open a heatmap whose screenshot is more than a week old. Changed the page sooner, for example with a new design? Click Take a new screenshot under the map (owners and editors).

While it is being made you see "Taking a screenshot of this page…". This usually takes under a minute, and the heatmap refreshes on its own. The caption under the map says when the screenshot was taken. Until then, Varly draws the clicks on a plain background.

How to read the result

• Lots of clicks on something that is not a link (an image, a label, a price) means visitors expect it to do something. Make it clickable or make it clearer.
• Rage and dead clicks point to things that look broken or confusing. Watch a few recordings of those visits to see why.
• If your main call to action sits below the point where most visitors stop scrolling, test moving it up.

Common problems

• The screenshot doesn't match my page: the page has changed since the screenshot, or it shows content that differs per visitor. See Heatmap problems.
• Hardly any clicks: check the device (Desktop is selected first) and try a longer period.
• My page isn't in the list: it may be counted together with similar pages (look for a name such as Product pages), or have too few visits in this period. See Group similar pages.