# Heatmaps

> Use ClickClacks heatmaps: page grouping, devices, click maps, scroll depth, elements, friction on the page, new screenshots, comparing two periods, and capture and masking settings.

- Canonical URL: https://clickclacks.io/docs/guides/heatmaps
- Section: Product guides
- Last updated: 2026-09-26

Heatmaps draw where people click and how far they scroll on top of a real screenshot of your page, kept separate for desktop, tablet and mobile. Sensitive content is masked in the browser before anything is uploaded.

> **Part of the Pro plan**
>
> Heatmaps are included on Pro. See [pricing](https://clickclacks.io/pricing).

## When to use it {#when}

- A landing page converts poorly: do people even reach the sign-up button?
- You redesigned a page and want to see whether clicks moved where you hoped.
- People click something that isn’t a link. Dead clicks show on the map.

## Turn on capture {#setup}

Capture is on by default for website sources. To check it, open **Heatmaps** › **Capture settings** (also under Settings as **Heatmap capture**), choose a website source, and make sure **Capture page screenshots** is on.

A page appears the first time someone visits it after capture is switched on. With live traffic that is usually minutes, not hours.

## The page list {#list}

The list covers the **last 30 days**. Heatmaps have their own controls rather than the report filter bar, so there is no date picker. You can pick a **Website source** and a device: **All devices**, **Desktop**, **Tablet** or **Mobile**. Each row shows a thumbnail, views, clicks, median scroll depth and when it was captured.

Pages are grouped by URL pattern. Query strings are dropped, and parts of the path that look like IDs (numbers, long hex strings, UUIDs) become `*`. So `/orders/123` and `/orders/456` are one page, `/orders/*`. Each website source keeps its pages separate.

Devices go by screen width: mobile under 600 pixels, tablet from 600 to 1,023, and desktop from 1,024 up.

## Click map, scroll and elements {#views}

Open a page and pick a device. Then choose a view:

- **Click map**: heat over the screenshot. Use **Fit width** or **100%** zoom, and the **Heat opacity** slider to see the page underneath. **Most clicked** lists the top targets with their dead clicks.
- **Scroll depth**: bands at 25, 50, 75 and 100% showing what share of people reach each point, with the median fold marked.
- **Elements**: a table of every clicked element with its selector, share of clicks, clicks, dead clicks and rage clicks.
- **Friction**: the [friction findings](https://clickclacks.io/docs/guides/friction.md) for this page, placed on it. Nothing is detected twice.

Heatmaps show clicks and scrolling. They don’t record mouse movement.

## Screenshots {#screenshots}

If your page changed since it was captured, some clicks may not land on anything in the old screenshot. When more than 40% of clicks can’t be placed, the page says _Some clicks aren’t on this screenshot_. Counts and the Elements table still include every click.

Click **New screenshot** to ask for a fresh one. It is taken on the next visit from that device, by someone who allows analytics, so the page says _Waiting for a mobile visit_ (or tablet, or desktop). The old screenshot stays until the new one arrives. **Check for screenshot** looks again.

## Compare two periods {#compare}

Click **Compare periods** to set a **Before** and an **After** window, then **Apply periods**. By default, Before is 14 to 8 days ago and After is the last 7 days. Each period can be up to 90 days, Before has to end before After starts, and you can pick which stored screenshot each side uses.

Dates use your project’s time zone, and both ends are included. A before-and-after comparison shows what changed, not why. For a fair test, run an [experiment](https://clickclacks.io/docs/guides/experiments.md).

## Masking and privacy {#privacy}

Screenshots are recognizable, but some things are always masked in the browser, before upload, and can’t be turned off:

- numbers and email addresses in text
- every input, textarea and select
- video, canvas, iframes and editable content
- anything marked `data-cc-mask` or `data-private`

Under **Also skip these** in Capture settings, add CSS selectors (up to 64), such as `.customer-avatar` or `#invoice-table`, and press **Save changes**. Matching elements are hidden, and their space is kept so click positions still line up. Settings apply to future captures from that source. For more, see [Privacy](https://clickclacks.io/docs/privacy.md).

## Tips and gotchas {#tips}

- **Check the device tab first.** A mobile layout and a desktop layout are different pages to your visitors, and to the heatmap.
- **Screenshots are kept for 30 days**, but the newest one for each page is always kept.
- **Add to board** puts a page’s click map on a board as a tile.

## Recipes {#recipes}

### Do mobile visitors ever see the sign-up button?

1. Open **Heatmaps**, pick **Mobile**, and open your landing page.
2. Switch to **Scroll depth** and find the band where the button sits.

If only 30% of mobile visitors reach it, move it up, then use **Compare periods** a week later to see the change.

### What are people clicking that doesn’t work?

1. Open the page and switch to **Elements**.
2. Sort your attention by the **Dead** and **Rage** columns.
3. Open the **Friction** tab to see whether it is already a finding.

### Did the new pricing page change where people click?

1. Open the pricing page on **Desktop** and click **Compare periods**.
2. Set Before to the two weeks before launch and After to the weeks since.
3. For each side, pick the screenshot from that period and click **Apply periods**.

## Related {#related}

- [Friction](https://clickclacks.io/docs/guides/friction.md): Rage and dead clicks, found for you.
- [Privacy](https://clickclacks.io/docs/privacy.md): What the tracker collects and strips.
- [Sources](https://clickclacks.io/docs/guides/sources.md): Website sources and their settings.
- [Experiments](https://clickclacks.io/docs/guides/experiments.md)