Reading a Heatmap

Use this page to get the most out of the heatmap detail view: choose the backdrop you're painting clicks on, tune the overlays, filter down to the traffic you care about, rank clicks by element, and export what you find.

Open any page from the Heatmaps list to reach its detail view. Every control below applies to the page you're viewing.

---

Choose the Backdrop

A heatmap paints click and scroll data on top of a picture of your page. You can choose which picture:

• Replay snapshot (default). The backdrop is a real session replay recording of the page, so the heatmap reflects exactly what a visitor saw — including pages behind login or personalization.
• Live site. The backdrop is your current page, loaded directly. Switch to this when no replay exists for the page, when the recorded layout is stale, or when you want to overlay clicks on the page as it looks right now.

When there's no usable replay for a page, the detail view falls back to the live site automatically and tells you it did. You can toggle between the two backdrops at any time — the overlay re-aligns to whichever one is active.

Note: Some sites send headers that block being loaded in a frame. When that happens, the live-site view shows an inline explainer with a link to open the page in a new tab instead of a blank backdrop. The replay snapshot is unaffected.

Cookie-consent banners captured in the replay snapshot are hidden automatically, so they don't sit on top of the content you're trying to read.

Tip: The replay snapshot captures the page as it first loaded. Images and sections that load only as a visitor scrolls may be missing from the snapshot — switch to the live-site backdrop to see them in place.

---

Read the Overlays

The detail view has four overlay layers, each answering a different question. All of them respond to the same filters and sit on the same backdrop.

• Clicks — where visitors click or tap. Warm colors (red/orange) mark high-traffic areas; cool colors (blue) mark low-traffic areas.
• Scroll depth — how far down the page visitors get before leaving. The shading fades from warm (most visitors reached this depth) to cold (the drop-off point).
• Rage clicks — bursts of repeated clicks in the same spot over a short period, shown as pulsing red indicators.
• Dead clicks — clicks that produced no obvious on-page response, shown as grey indicators.

A legend shows the value at each end of the color scale, so you can read a hotspot as an actual click count rather than just "hot" or "cold." Use the intensity and opacity controls to make a sparse heatmap easier to see or to let a busy one breathe — they change how the overlay renders, not the underlying data.

Note: Rage-click and dead-click overlays are best read alongside session replays. They point you toward potentially frustrating interactions; they don't prove intent on their own.

---

Filter

Narrow the heatmap to a specific slice of traffic. All four overlay layers update together when you change a filter.

• Device type — desktop, tablet, or mobile. Each device type has its own breakpoint, so click positions stay accurate.
• Date range — a custom range up to 60 days.
• Country and region — filter by visitor geography.
• Browser — Chrome, Safari, Firefox, and others.
• Audience — narrow to a saved audience so you can compare how one segment behaves on the page versus everyone.

---

Compare Two Heatmaps

Use Add comparison to view two heatmaps side by side — for example, mobile against desktop, or this month against last month. Comparison is the fastest way to spot a layout that works on one device or in one period but breaks down in another.

---

Rank Clicks by Element

Alongside the visual overlay, the detail view ranks the page's elements by how many clicks each one received — for example, Sign Up button: 1,247 clicks; Learn More link: 832 clicks. This answers "which exact element got clicked?" rather than "which area of the page is hot," which is especially useful when a single button spans several hotspots or when similar elements repeat down the page.

Elements are labeled by their tag, role, and position by default. Add data-heatmap-id to give your important elements stable, human-readable names in this ranking and in exports — no element text is ever captured.

---

Drill Into Session Replays

A heatmap tells you what happened; session replay shows you why. The two are linked in both directions:

• Click any hotspot to see the sessions that clicked there, each linking straight to the replay viewer.
• Rage-click and dead-click counts link to the session replays filtered to that interaction, so you can watch the frustration first-hand.
• From a session replay or a page's web analytics detail, jump back to that page's heatmap.

---

Export

Export reflects whatever filters and date range are active when you export.

• CSV — download the heatmap data for analysis in a spreadsheet. The export includes element-level click counts, with your data-heatmap-id labels where you've set them.
• PNG — download the rendered heatmap view (backdrop plus overlay) as an image, with your filter and date-range context captured in the file. Useful for reports and sharing with stakeholders who don't have dashboard access.

---

Next Steps

• Heatmaps Overview — the four heatmap types and how they fit the rest of your analytics
• Heatmaps Installation — enable tracking and verify data is flowing
• Element Labels — name important elements with data-heatmap-id
• Heatmaps FAQs — common questions about setup, privacy, and data