Click maps, scroll depth, rage clicks, dead clicks, and field-level form analytics — overlaid on a screenshot of the actual page. The SDK is under 10 KB, uses passive listeners, and runs zero code on pages where you switch heatmaps off, so it won't drag your page-speed score down.
2,847
Clicks
1,203
Sessions
34
Rage
89
Dead
From click patterns to scroll depth to frustration signals — get the full picture of how visitors interact with every page.
See every click visualized as a heat overlay on your actual page screenshot. Identify which buttons, links, and areas attract the most attention.
Know exactly how far visitors scroll. A color gradient shows what percentage of users reach each section, so you can place CTAs where they'll be seen.
Automatically detect frustrated users clicking rapidly in one spot. Find broken buttons, unresponsive elements, and confusing UX patterns.
Identify clicks on non-interactive elements — text, images, or divs that users expect to be clickable but aren't. Fix gaps in your navigation.
Toggle between desktop, tablet, and mobile views. See how behavior differs across devices and optimize each experience independently.
Running experiments? Filter heatmap data by variant to see how each version of your page performs. Compare click patterns across test variants.
Track how users interact with your forms — field focus time, drop-off points, hesitation, and completion rates. Find exactly where users abandon your forms.
Create segments with capture modes to track all pages at once or target specific URLs. Group heatmap data by audience, traffic source, or custom conditions.
Three steps. Five minutes. You're recording sessions and seeing heatmaps.
Drop in one line of code with heatmaps enabled in your config. Optionally enable form analytics. The SDK starts tracking clicks, scroll depth, and form interactions automatically.
Set up heatmap segments to track all pages or target specific URLs. Choose a capture mode — track everything broadly or focus on the pages that matter most.
Open your dashboard, pick a segment and page, and see heatmaps overlaid on screenshots. Filter by device, date range, or experiment variant.
If you already use the A/B testing SDK, just add heatmaps: true to your config. Form analytics is toggled per project in the dashboard — no extra code.
<link rel="preconnect" href="https://js.growthroadmaps.com" crossorigin>
<script src="https://js.growthroadmaps.com/growth.min.js" async></script>
<script>
window.addEventListener('gr:ready', async function() {
window.gr = new GrowthRoadmaps({
projectKey: 'YOUR_PROJECT_KEY',
apiHost: 'https://growthroadmaps.com',
heatmaps: true, // ← clicks, scroll, rage, dead
surveys: true // ← optional: in-page surveys
});
await window.gr.init();
});
</script>One line of config turns on click maps, scroll tracking, rage and dead click detection, and form analytics — overlaid on the actual page screenshot, filterable by device and A/B variant.