Heatmaps
See where users click and how far they scroll
Heatmaps show you exactly where users click on your pages and how far they scroll, helping you optimize layout and content placement.
Enabling Heatmaps
Enable heatmaps in your site settings. Heatmap tracking is disabled by default and must be explicitly enabled.
Once enabled, the tracking script automatically captures:
- Click coordinates — X/Y position of every click
- CSS selectors — Three-level DOM walk to identify clicked elements
- Scroll depth — Milestones at 25%, 50%, 75%, 90%, 100%
Heatmaps Dashboard
Click Heatmap
The heatmap canvas displays a screenshot of your page with a color density overlay:
- Blue — Few clicks
- Cyan → Green → Yellow — Increasing click density
- Red — Highest click concentration
Use the page selector dropdown to switch between different pages.
Stat Cards
- Total Clicks — All clicks recorded on the selected page
- Unique Sessions — Sessions with clicks on this page
- Unique Users — Users who clicked on this page
- Avg Viewport — Average viewport dimensions
- Median Coordinates — Median click position (X, Y)
Top Clicked Elements
A table showing the most clicked elements:
- Element CSS selector
- HTML tag
- Click count
- Unique users
Scroll Depth Distribution
A horizontal bar chart showing what percentage of users reached each scroll depth milestone.
Page Screenshots
Heatmap pages include automatic screenshot capture for the canvas background. Screenshots are cached for 24 hours and stored in Cloudflare R2.
Privacy
Heatmap tracking respects user privacy. Only coordinates and element selectors are captured — no personal data or form content is recorded.