Heatmaps

When to use it

• A landing page converts poorly: do people even reach the sign-up button?
• You redesigned a page and want to see whether clicks moved where you hoped.
• People click something that isn’t a link. Dead clicks show on the map.

Turn on capture

Capture is on by default for website sources. To check it, open Heatmaps › Capture settings (also under Settings as Heatmap capture), choose a website source, and make sure Capture page screenshots is on.

A page appears the first time someone visits it after capture is switched on. With live traffic that is usually minutes, not hours.

The page list

The list covers the last 30 days. Heatmaps have their own controls rather than the report filter bar, so there is no date picker. You can pick a Website source and a device: All devices, Desktop, Tablet or Mobile. Each row shows a thumbnail, views, clicks, median scroll depth and when it was captured.

Pages are grouped by URL pattern. Query strings are dropped, and parts of the path that look like IDs (numbers, long hex strings, UUIDs) become *. So /orders/123 and /orders/456 are one page, /orders/*. Each website source keeps its pages separate.

Devices go by screen width: mobile under 600 pixels, tablet from 600 to 1,023, and desktop from 1,024 up.

Click map, scroll and elements

Open a page and pick a device. Then choose a view:

• Click map: heat over the screenshot. Use Fit width or 100% zoom, and the Heat opacity slider to see the page underneath. Most clicked lists the top targets with their dead clicks.
• Scroll depth: bands at 25, 50, 75 and 100% showing what share of people reach each point, with the median fold marked.
• Elements: a table of every clicked element with its selector, share of clicks, clicks, dead clicks and rage clicks.
• Friction: the friction findings for this page, placed on it. Nothing is detected twice.

Heatmaps show clicks and scrolling. They don’t record mouse movement.

Screenshots

If your page changed since it was captured, some clicks may not land on anything in the old screenshot. When more than 40% of clicks can’t be placed, the page says Some clicks aren’t on this screenshot. Counts and the Elements table still include every click.

Click New screenshot to ask for a fresh one. It is taken on the next visit from that device, by someone who allows analytics, so the page says Waiting for a mobile visit (or tablet, or desktop). The old screenshot stays until the new one arrives. Check for screenshot looks again.

Compare two periods

Click Compare periods to set a Before and an After window, then Apply periods. By default, Before is 14 to 8 days ago and After is the last 7 days. Each period can be up to 90 days, Before has to end before After starts, and you can pick which stored screenshot each side uses.

Dates use your project’s time zone, and both ends are included. A before-and-after comparison shows what changed, not why. For a fair test, run an experiment.

Masking and privacy

Screenshots are recognizable, but some things are always masked in the browser, before upload, and can’t be turned off:

• numbers and email addresses in text
• every input, textarea and select
• video, canvas, iframes and editable content
• anything marked data-cc-mask or data-private

Under Also skip these in Capture settings, add CSS selectors (up to 64), such as .customer-avatar or #invoice-table, and press Save changes. Matching elements are hidden, and their space is kept so click positions still line up. Settings apply to future captures from that source. For more, see Privacy.

Tips and gotchas

• Check the device tab first. A mobile layout and a desktop layout are different pages to your visitors, and to the heatmap.
• Screenshots are kept for 30 days, but the newest one for each page is always kept.
• Add to board puts a page’s click map on a board as a tile.

Recipes