Heatmaps
Heatmaps place aggregated visitor interactions over a captured page preview. Use them to see which controls attract attention, where visitors become frustrated, and how far they usually scroll without watching individual session recordings.
TypeUI keeps desktop, tablet, and mobile activity separate so interaction positions stay aligned with the appropriate layout.
Requirements
- A TypeUI plan that includes Insights
- A verified website with the TypeUI Insights snippet installed
- Analytics consent enabled before the tracker loads
- A public page that TypeUI can open to capture its preview
Collect interaction data
Complete the Insights setup and let the tracker collect consented visits. Clicks, frustration signals, and scroll depth are collected automatically; no custom event is required for the heatmap.
Heatmaps become more useful as the selected page receives enough traffic to reveal repeated interaction patterns.
Choose a page
Open the website analytics dashboard and scroll to Heatmap. Select the page you want to inspect from the Page menu.
The heatmap follows the dashboard's active date range, comparison, and audience filters. Use these controls to compare a release, campaign, device group, or audience segment against the rest of the traffic.
Capture the page preview
Choose Capture page preview the first time you inspect a page. TypeUI captures desktop, tablet, and mobile versions of the public URL and uses them only as the visual background for the aggregated interaction data.
The page must be publicly reachable and return a successful response. A sign-in wall, private network, blocked request, or unavailable URL can prevent capture.
Select the matching device
Use the Device menu to inspect desktop, tablet, or mobile activity. The selected preview and interaction coordinates use the same viewport category.
Choose All devices for the combined metrics. The preview uses the available desktop layout when no specific device is selected.
Explore interaction layers
Select one or more metric cards to control what appears over the page preview:
| Metric | What it shows |
|---|---|
| Clicks | All recorded clicks on the selected page |
| Rage clicks | Repeated clicks that may indicate frustration |
| Dead clicks | Clicks that caused no useful response |
| Average scroll | The average depth visitors reached on the page |
Cool colors represent lower activity and warmer colors represent higher activity relative to the selected heatmap. Treat a hotspot as a signal to investigate, then compare it with session journeys, conversion events, and the surrounding interface.
Refresh after a design change
Choose Refresh preview after the page layout changes. This replaces the desktop, tablet, and mobile preview images so the selected period's interactions line up with the current design.
If the selected date range includes traffic from both the old and new layouts, narrow the period to the release date for a clearer comparison.
Read the signals together
A high click count is not automatically good or bad. A primary call to action should attract clicks, while repeated activity on decorative or unresponsive elements may expose unclear affordances.
Use rage clicks and dead clicks as investigation cues rather than proof of a defect. Check the same page in session journeys, compare device categories, and reproduce the interaction before changing the interface.
Scroll depth helps explain whether visitors reach content placed lower on the page. If an important section sits below the average-scroll marker, test a shorter layout, stronger hierarchy, or an earlier call to action.
Privacy and aggregation
TypeUI renders aggregated, binned interaction coordinates rather than a replay of one person's visit. Insights does not intentionally collect typed text, form values, query strings, or page DOM as heatmap data. The captured preview and interaction overlay are separate.
Your website remains responsible for presenting the appropriate privacy notice and enabling TypeUI Insights only after the required analytics consent.
Troubleshooting
The preview cannot be captured
- Confirm the website is verified in TypeUI Insights.
- Open the exact page in a private browser window and confirm it is publicly available.
- Check that the page does not require authentication or block automated browser requests.
- Retry Capture page preview after the page is available.
The overlay does not match the page
- Select the device category that matches the preview.
- Choose Refresh preview after a layout or content change.
- Narrow the date range so it represents one version of the layout.
The heatmap is empty
- Confirm the Insights tracker loads only after analytics consent.
- Select a period in which the page received visits.
- Remove narrow audience filters or switch to All devices.
- Allow more consented traffic to accumulate on a new page.