SessionSight: Heatmaps

Updated

SessionSight: Heatmaps

Overview

Use this page to visualise click, scroll, area, and conversion interactions as heatmaps for an application's pages. A heatmap is a color-weighted overlay on a page that shows where recorded user interactions concentrated during a chosen time window, letting you see usage patterns across an entire page at a glance instead of reviewing individual session recordings one at a time.

Heatmaps consume the session interaction data SessionSight has already collected for an application: tracking must be configured for that application, and it must have received real visits, before any page shows useful data here. The patterns you find, such as a cluster of dead clicks on a control or heavy scroll depth past the fold, typically lead you to review the underlying sessions in SessionSight: Replay or investigate drop-off with SessionSight: Funnels.

This page lets you choose the tenant and application to inspect, pick a time range and viewport, filter by interaction mode or by rage and dead clicks, and then select a page from the Pages list to render its heatmap.

Key concepts

  • heatmap - A color-weighted overlay on a page showing where recorded user interactions concentrated during the selected time window; warmer or denser areas mean more interactions were recorded there. (related: SessionSight: Dashboard)
  • Mode - The interaction type the heatmap renders: All combines every interaction type, Click shows where users clicked, Scroll shows scroll depth, Area shows per-element interaction density, and Conversion shows per-page activity tied to a goal or event.
  • Viewport - The device screen-size category a heatmap is filtered to, such as Desktop, Tablet, or Mobile, since the same page can lay out differently and draw different interactions at each size.
  • Rage Clicks - Repeated, rapid clicks on the same element within a short time, typically a sign the user expected something to happen and it did not. (related: SessionSight: Visitors)
  • Dead Clicks - Clicks on an element that produce no visible response, often indicating a control that looks interactive but is not wired up. (related: SessionSight: Visitors)

When to use it

  • Investigating why users aren't completing an action on a specific page
  • Checking whether a layout or design change shifted where users click or how far they scroll
  • Finding non-responsive UI elements that generate dead clicks
  • Locating frustration signals, such as rage clicks, on a particular page
  • Comparing engagement by viewport to see if desktop, tablet, or mobile users behave differently
  • Reviewing conversion-related activity on a page tied to a goal or smart event

Before you begin

  • SessionSight tracking must be configured for the application you want to analyze, set up on Configuration: SessionSight: SessionSight
  • The application must have received real visits within the date range you select, or the Pages list and heatmap canvas will have nothing to show
  • Your account needs access to the tenant and application you want to inspect, since the Tenant and Application dropdowns only list values you can access

Common workflows

Investigate dead and rage clicks on a page

Persona: Load-test operator or UX analyst reviewing real user friction

  1. Select the tenant and application you want to analyze from the Tenant and Application dropdowns.
    • Expect: The Pages list reloads to show the pages tracked for that application, and the heatmap canvas resets to its empty state.
  2. Check the Rage Clicks and Dead Clicks checkboxes.
    • Expect: The filters are marked active so that once a page is selected, the heatmap overlay is limited to rage-click and dead-click interactions instead of every recorded interaction.
  3. Select a page from the Pages list.
    • Expect: The heatmap canvas renders the selected page's heatmap, with hot spots marking the filtered interactions.

Verify: Any area of concentrated color on the heatmap corresponds to an element receiving repeated rage clicks or unresponsive dead clicks. If no hot spots appear, the page has no interactions matching the current filters in the selected date range.

Compare click engagement across devices

Persona: Operator checking whether a layout performs consistently across device sizes

  1. Set the Mode toggle to Click.
    • Expect: Click switches to the active style, and the heatmap will render only click interactions once a page is selected.
  2. Select Desktop in the Viewport row.
    • Expect: The Desktop icon switches to its active style and the heatmap canvas reloads to show only interactions recorded on desktop-sized screens.
  3. Select Tablet and then Mobile in turn, comparing the heatmap after each change.
    • Expect: The heatmap canvas reloads for each viewport, isolating clicks recorded at that screen size.

Verify: If click hot spots shift position or disappear between viewports, the page's layout behaves differently across device sizes, for example a control hidden on mobile. Use Show all viewports to return to the combined view when finished.

Steps

Step 1

Open Heatmaps from the SessionSight section.

Expected result: The page loads with Tenant set to LoadGen B.V., Application set to Production Web App, the date range set to 7d, and Mode and Viewport both set to All. In this view, the Pages panel shows a Couldn't load pages: the backend returned an error message with a Retry button, so no pages are listed, and the heatmap canvas shows Select a page from the list to view its heatmap instead of a rendered heatmap.

Opening the page establishes your scope and filters before you pick a page to view its heatmap.

  • The Pages panel shows Couldn't load pages: the backend returned an error with a Retry button; pages load normally once the backend responds.
  • The heatmap canvas shows Select a page from the list to view its heatmap until you pick one from the Pages panel.
  • Mode and Viewport both default to All, and the date range defaults to 7d. SessionSight: Heatmaps - step 1

Field reference

Field Purpose Format / Validation Required Default
Tenant Scopes every other control and all interaction data on the page to one customer or environment; switch tenants to inspect a different customer's applications. Dropdown list of tenants you have access to. No First tenant you have access to
Application Scopes the Pages list and heatmap data to one monitored web application within the selected tenant; change it to move between applications you track separately. Dropdown list of applications within the selected tenant. No First application in the tenant
Date range Sets the look-back window for interaction data. Shorter windows (1h, 4h, 8h) surface very recent activity and are useful right after a deploy or during an active incident; longer windows (24h, 7d) aggregate more sessions and smooth out short-term noise for a more typical usage picture. Custom lets you set an explicit start and end for a specific incident or comparison period. Segmented quick-select: 1h, 4h, 8h, 24h, 7d, or Custom. No 7d
Mode Chooses which interaction type the heatmap overlay renders. All combines every interaction type for a general view; Click isolates click locations; Scroll shows how far down the page visitors scroll; Area breaks interactions down at a finer, per-element level than Click; Conversion shows activity tied to a specific goal or smart event rather than raw clicks. Segmented select: All, Click, Scroll, Area, or Conversion. No All
Viewport Filters the heatmap to interactions recorded at one device screen-size category. Narrowing from All to Desktop, Tablet, or Mobile lets you check whether a control that works on one screen size is hidden, moved, or unused on another. Segmented select: All, Desktop, Tablet, or Mobile. No All
Min Threshold Sets the minimum number of recorded interactions an element or area must have before it appears on the heatmap. Raising it filters out rarely-used elements and isolates genuinely hot areas; leaving it at 1 shows every recorded interaction, including one-off clicks. Slider or numeric value, whole number. No 1
Rage Clicks When checked, filters the heatmap to only rage-click interactions, letting you jump straight to elements generating repeated, frustrated clicks instead of scanning every interaction. Checkbox. No Unchecked
Dead Clicks When checked, filters the heatmap to clicks that produced no visible response, letting you find controls that look interactive but aren't functioning. Checkbox. No Unchecked

Controls reference

Retry

Re-sends the request to load the Pages list for the selected tenant, application, and date range.

When to use: When the Pages panel shows the Couldn't load pages error instead of a list of pages.

Side effects: Read-only: re-fetches data without changing any configuration; if the backend is still unavailable the same error reappears.

Prev / Next pagination

Moves one page forward or backward through the Pages list when it contains more rows than fit in the panel.

When to use: When the application has more tracked pages than the panel can display at once.

Side effects: Read-only: changes which page rows are visible, no data is modified.

Show all viewports

Resets the Viewport filter back to All after it has been narrowed to Desktop, Tablet, or Mobile.

When to use: After reviewing a single viewport's heatmap and you want to return to the combined view.

Side effects: Read-only: changes the active filter, no data is modified.

Raw Data Tables

Shows or hides a tabular breakdown of the exact interaction counts behind the heatmap visualization.

When to use: When you need precise numbers behind a hot spot rather than a color-intensity read from the visual heatmap.

Side effects: Read-only: toggles visibility of a data table, no data is modified.

Goal / Smart event toggle

Switches the conversion definition a Conversion-mode heatmap is drawn against, between a defined Goal and a Smart event.

When to use: When Mode is set to Conversion and you want to compare interaction density against a specific conversion definition.

Side effects: Read-only: changes which conversion definition the current heatmap reflects, no data is modified.

Verify the result

A successful heatmap view shows the Pages panel listing the tracked pages for the selected tenant, application, and date range, with no error banner. After you select a page, the heatmap canvas on the right renders a color-weighted overlay of clicks, scroll depth, or area or conversion data instead of the Select a page from the list placeholder. The Mode and Viewport buttons you chose stay highlighted in their active, filled style, confirming which interaction type and device size the rendered heatmap reflects. If the canvas stays on the placeholder after selecting a page, or the Pages panel still shows the Couldn't load pages error after selecting Retry, the heatmap did not load and you should check the troubleshooting steps below.

Troubleshooting

  • Symptom: The Pages panel shows Couldn't load pages: the backend returned an error instead of a list of pages. Fix: Select Retry; if the error persists, try a shorter date range or confirm the selected application has SessionSight tracking configured on Configuration: SessionSight: SessionSight.
  • Symptom: The heatmap canvas stays on Select a page from the list to view its heatmap after you select a page. Fix: Confirm you selected a row in the Pages panel rather than just scrolling it, and confirm the Pages panel loaded without the error banner first.
  • Symptom: The Pages panel loads but is empty. Fix: Widen the date range, for example from 1h to 7d or Custom, since the application may not have recorded enough traffic in a very short window, or confirm you selected the correct Tenant and Application.
  • Symptom: Checking Rage Clicks or Dead Clicks produces an empty heatmap. Fix: Lower the Min Threshold value or widen the date range; rage and dead clicks are a subset of all interactions and may not appear within a narrow window or a high threshold.
  • Symptom: Selecting Desktop, Tablet, or Mobile in Viewport shows no data though All did. Fix: Select Show all viewports to confirm overall data exists, then recheck each viewport individually; a viewport with no sessions in the selected date range shows no interactions.
Was this article helpful?
0 out of 0 found this helpful