Watch what happened, without recording what people typed
Click heatmaps and scroll depth show where attention goes on each page. Session replay shows the sessions behind a leak or a low score, with every input masked, all text masked by default, and nothing recorded until the visitor consents.
| Element | Share of clicks |
|---|---|
button "Shop the sale" | 31% |
img.hero (not a link) | 14% |
a "Delivery" | 8% |
14% of clicks land on the hero image, which isn't a link. Only half of mobile visitors scroll far enough to see the product grid.
Clicks and scrolling, per page and device width
Heatmaps group page views into three width buckets: desktop, tablet and mobile. A layout that works at 1280 pixels can hide the key button on a phone, so each bucket gets its own map.
Clicks are drawn over your live page or a neutral canvas, with the most-clicked elements listed alongside. Scroll depth shows the share of page views that reached each point.
- Text summaries and data tables come with every heatmap, so the findings don't depend on seeing colour.
- Sampled if you want: record clicks for every visitor or a share of them.
- Works in cookieless mode, because heatmaps don't need to recognise anyone.
| Reached | Desktop | Tablet | Mobile |
|---|---|---|---|
| 25% of page | 92% | 88% | 81% |
| 50% of page | 71% | 63% | 54% |
| 75% of page | 44% | 37% | 29% |
| Footer | 26% | 22% | 21% |
Mobile loses a quarter of visitors before the halfway mark. The product grid sits at 60% of the page on a phone.
Replay that starts private and stays that way
Session replay is off until you switch it on for an app. When you do, the defaults are the careful ones, and loosening them is a deliberate choice.
- Opt-in per app under Settings, off by default.
- Sampled: 10% of sessions by default, adjustable per app.
- Waits for consent by default: nothing is recorded until your site calls
metrickle.consent({ replay: true }). - Every input masked, always. All text masked by default, with
data-mk-unmaskto show regions you know are safe. data-mk-blockleaves an element out entirely. Canvas elements are not recorded.- Erased with the visitor: a GDPR erasure request removes their replays along with their events.
<!-- Replay waits for this by default -->
<script>
// e.g. from your consent manager
metrickle.consent({ replay: true });
</script>
<!-- Text shows as dots unless unmasked -->
<nav data-mk-unmask>…</nav>
<!-- Left out of the recording entirely -->
<div data-mk-block>…</div>Start from the problem, not from a pile of recordings
Nobody has time to watch every session. Each replay is lined up with the friction signals and survey answers from the same session, so you can start from a rage click, a dead click or a low effort score and open only the sessions that show it.
Filter replays like any other report: by page, device, campaign, accessibility setting or survey answer.
| Session | Pages | Friction | Setting | Survey |
|---|---|---|---|---|
| Desktop · 4m 12s | 7 | 5 | Keyboard | Effort 2 of 7 |
| Mobile · 2m 40s | 5 | 2 | Large text | – |
| Desktop · 1m 55s | 4 | 0 | None | Effort 6 of 7 |
Show only sessions with friction, then open the worst. The timeline marks each rage click, dead click and survey answer, so you can jump straight to the moment.
Heatmaps and session replay are available on the web. Replay code loads only when an app has replay switched on and a session is being recorded.
Switch it on, no new snippet
Install the script tag
The same tag that tracks pageviews and friction. Heatmaps and replay code loads only when you switch them on.
Switch on per app
Under Settings → Research, turn on heatmaps and, if you want it, replay. Set the sample rates.
Connect consent
Call
metrickle.consent({ replay: true })when the visitor agrees. Until then, replay records nothing.Mark safe regions
Add
data-mk-unmaskto navigation and headings you're happy to see, anddata-mk-blockto anything that must never appear.
Common questions
Does session replay record what people type?
No. Every input is masked, always. All other text is masked by default too, shown as dots, unless it sits inside an element marked data-mk-unmask. Elements marked data-mk-block are replaced with a placeholder.
Does replay wait for consent?
Yes, by default. Nothing is recorded until your site calls metrickle.consent({ replay: true }), for example from your consent manager. You decide how consent is collected; Metrickle waits for the call.
Can I use session replay in cookieless mode?
No. Replay has to tie a recording to one session on one device, which needs storage. In cookieless mode nothing is stored, so replay stays off. Heatmaps and scroll depth still work.
Are heatmaps and replay available in mobile apps?
Not yet. They're web-only for now. Surveys, feedback and friction signals such as u-turns work in the iOS, Android, Flutter and React Native SDKs.
Will replay slow my site down?
The replay code is a separate file that loads only when replay is switched on for the app and the session has been picked by the sample. Sessions that aren't recorded never download it.
See where your apps break, and who they break for
Free to start. One script tag on the web, one SDK on mobile, and no cookie banner in cookieless mode.
Start tracking for free