Website Heatmaps: Click, Rage-Click, and Scroll Maps

A heatmap shows you what your visitors do on a page: where they click, where they get stuck clicking, and how far down they actually scroll. TinyAnalytics renders all three over a live preview of your page, from your existing tracking script — there’s no extra code to add. Heatmaps here are deliberately different from session-replay tools: nothing in the pipeline can carry content. That’s the whole point — heatmaps that don’t record your users.

​

What exactly is captured?

When click capture is enabled for a site, each click records exactly this — and nothing else:

• two coordinate pairs (position in the viewport, position on the page),
• the viewport and page size at the time,
• whether the clicked element was pinned (a sticky header or floating button),
• the click type (click or rageclick),
• the page’s path.

No CSS selectors, no element text, no input values, no query strings, and no DOM or session recording. The identify() id never reaches the heatmap store, and click data expires automatically after 90 days. Query strings are dropped before capture, and any paths you’ve configured the tracker to skip or mask are skipped and masked here too.

​

How do I turn it on?

Click capture is off by default. Enable it per site under Site Settings → Tracking → Heatmaps. Once enabled, the tracker lazy-loads a small (~1 KB) capture script on your pages; while it’s off, nothing loads and nothing is captured — sites that never opt in pay zero extra bytes. Turning the toggle off later stops accepting capture immediately, even for pages that are still open. If you use a first-party proxy, keep the prefix-wide forwarding rule. Heatmaps use /api/site/:siteId/tracking-config, /script-heatmap.js, and /api/heatmap through the same proxy prefix as the core tracking script.

​

The three map modes

Open Engagement → Heatmaps, pick a page from the list (searchable, busiest first), and choose a mode: The click modes also show a fold line — the median visitor’s viewport bottom — with the share of clicks that happen below it, and a summary of total clicks and unique visitors. You can weight the map by raw clicks or by unique visitors.

​

Device width bands

A click at x = 600 means something different on a phone than on a desktop monitor, so clicks are never mixed across device sizes. Each map renders one band — Mobile, Tablet, or Desktop — and only the clicks from viewports in that band, gently rescaled to the band’s render width:

​

The page preview

The map is drawn over a live <iframe> of your page. If your site doesn’t allow embedding (a frame-ancestors policy or X-Frame-Options header), the map switches to a neutral wireframe background instead — the coordinates, hotspots, and fold line are unaffected. You can also switch between Live page and Wireframe manually from the preview header.

​

Reading the data over the API

Three endpoints power the page and are available in the API playground:

• GET /api/sites/:id/heatmap/pages lists pages with click data.
• GET /api/sites/:id/heatmap/clicks returns binned click or rage-click intensity for one page and device band.
• GET /api/sites/:id/heatmap/scroll returns cumulative reach for each 10% scroll band.

A restricted API key needs Analytics: Read. The key owner must also have access to the site.