See how each page is actually used.

Click maps and scroll depth drawn over a real screenshot of the page, taken in your visitor’s own browser, so pages behind a login work too.

Start tracking free All features
screenshot per page and device, at most
1 a day
devices, each with its own screenshot and numbers
3
of clicks and scrolls behind every heatmap
30 days
skip selectors of your own, on top of masking that is always on
64

What it does

The snippet captures what the page really looked like, masks anything sensitive before upload, and ClickClacks draws clicks and scroll depth on top, separately for desktop, tablet and mobile. Similar URLs are grouped automatically, so every project settings page shares one heatmap.

Capture

A real screenshot, masked before it leaves the browser.

The snippet captures the page in your visitor’s own browser, so signed-in pages look like they really do. Balanced masking runs first and can’t be turned off; your own skip selectors are hidden too, with their space kept so clicks still line up.

  • Numbers and email addresses in text become dots.
  • Every input, textarea and select, video, canvas and embed becomes a grey block, as does anything marked data-cc-mask or data-private.
  • Ordinary text and images stay visible, so the page is still recognisable.

Grouping

One heatmap per page, not one per ID.

Pages are grouped by URL pattern. Numeric IDs, long hex IDs and UUIDs in the path become *, and query strings are dropped, so every project’s settings page adds up to a single heatmap.

  • /projects/1842/settings and /projects/7f3a91c2e4/settings are both /projects/*/settings.
  • The list shows views, clicks, median scroll and when each page was captured.

Per device

Mobile judged by mobile clicks.

Desktop, tablet and mobile each get their own screenshot and their own numbers, so the stacked mobile layout is never read against desktop clicks. The switch shows how many views each device had.

  • Screenshots are taken at most once a day per page and device.
  • Click map, scroll depth and elements all follow the device you pick.

Stale screenshots

It tells you when the page has moved on.

If more than 40% of clicks land where the screenshot has nothing, a banner says the layout has changed and positions are unreliable. Counts and the element list stay correct, so switch to Elements, or request a new screenshot in one click.

  • Elements lists each clicked element with its selector, share of clicks and count.
  • A requested screenshot is taken on the next visit from that device; the old one stays up until then.

Questions it answers

Ask it the way you’d ask a colleague.

How ClickClacks answers it

Open the page and look at Most clicked beside the click map, or the Elements tab for the full list. Each element shows its selector, its share of the page’s clicks and the count.

4.1%

of /pricing clicks on the new FAQ

Who it’s for

Three ways teams use it.

  • Agencies

    Before a client redesign, bring the current pricing page’s click map and scroll depth, per device, to the kickoff, and show what the mobile layout really gets used for.

    Desktop and mobile, side by side

  • Indie developers

    Capture is on as soon as the snippet is installed. After the first visits, your pages have screenshots and click maps, signed-in ones included.

    Nothing to configure

  • Product teams

    Add your own selectors for customer names and account tables, then check how far down the settings page people scroll before shipping the next section.

    Skip: .customer-name, #invoice-table

How it works

Under the hood

  1. 01Captured in the visitor’s browserWhen capture is on, the snippet takes a screenshot of the page in the visitor’s own browser, at most once a day per page and device. There’s no server renderer and no iframe, so signed-in pages work too.
  2. 02Masked before uploadBalanced masking and your skip selectors are applied to a copy of the page before it’s drawn, so the hidden content never becomes part of the image.
  3. 03Grouped by URL patternIDs in the path collapse to *, so /projects/123/settings and /projects/456/settings become one heatmap, not thousands of near-empty ones.
  4. 04Clicks and scrolls drawn on topThe last thirty days of clicks and scroll depth, for the device you pick, over the screenshot. If the page has changed, a banner says so.

Spec sheet

from the product

Views
Click map, scroll, elements
Devices
Desktop, tablet, mobile
Screenshot
Max once a day per device
Masking
Balanced, always on
Skip selectors
Up to 64 per source
Grouping
IDs in the path become *
Stale when
Over 40% of clicks miss
Period
Last 30 days

Same events, different question

Works well with

All features →

FAQ

Heatmaps, in detail.

  • No. Capture is on by default for each website source. You can switch it off per source in Capture & masking, or on a single page by adding data-capture="off" to the script tag.

  • Yes. The screenshot is taken in the visitor’s own browser, of the page they’re looking at, so there’s nothing for a server to sign in to.

  • Always: numbers and email addresses in page text, every input, textarea and select, video, canvas, embedded pages and editable content, and anything marked data-cc-mask or data-private. On top of that, any CSS selectors you add under “Also skip these”.

  • At most once a day per page for each device size. If you change the capture settings, pages are captured again under the new rules, and you can request a new screenshot for any page yourself.

  • Path segments that look like IDs (numbers, long hex strings and UUIDs) are replaced with *, and query strings are dropped, so pages that share a layout share a heatmap.

  • When more than 40% of clicks land where the screenshot has nothing, a banner says positions are unreliable. Counts and the element list are still correct, and one click requests a new screenshot.

Start hearing your clicks.

One script tag. Your first report in minutes.

Start tracking free Sign in

4.3 KB · pageviews, clicks and scroll depth, automatically