Metrickle
Start free

Heatmaps and session replay

Last updated

When a funnel step loses people, heatmaps show where they clicked and how far they scrolled, and session replay shows what happened in the sessions behind the drop. Both are off until you switch them on for an app, and both start with the careful settings: text masked, inputs never recorded, and replay waiting for the visitor's consent.

Heatmaps and replay work on websites. On iOS, Android and Flutter apps they aren't available yet.

Which plans include them

Heatmaps and page snapshots are included on Growth, Pro, Agency and Enterprise.

Session replay is included on Growth, Pro, Agency and Enterprise. Each plan includes a number of recorded sessions a month. If a workspace stays over its monthly recordings for 7 days, recording pauses until the next month starts. Your app's own settings are kept, so recording picks up again on its own. See plans and billing.

Turn on heatmaps

  1. Open your app, choose Settings and find Research.
  2. Tick Record clicks and scroll depth. This adds a click event for each click and a scroll event for each pageview to your event volume.
  3. Set Sessions to record to sample a share of visits, or leave it at 100%.
  4. Leave Capture page snapshots on so heatmaps show the page under the clicks.
  5. Choose Save research settings. Changes reach your app within a minute.

Heatmaps don't need to recognise anyone, so they also work in cookieless mode.

Page snapshots

A page snapshot is a copy of a page's layout, taken from one real visit at most once a day for each page and screen size. Input values are always masked. Mask snapshot text decides what else is hidden:

  • All text (recommended): every character shows as a dot, except inside elements you mark with data-mk-unmask. Use this when signed-in pages show names, emails or orders. Add data-mk-unmask to regions that are safe to show, such as navigation and headings.
  • Only marked elements: text shows as the visitor saw it, except inside elements marked data-mk-mask. Only use this on pages that show nothing personal.

Add data-mk-block to any element you want left out entirely.

Without a snapshot, the Heatmaps page tries to show your live page underneath instead. Some sites block being embedded, so the snapshot is more reliable.

Read a heatmap

  1. Open your app and choose Heatmaps.
  2. Choose a page. The list shows how many clicks each page has in the period.
  3. Choose a width: Desktop, Tablet or Mobile. Each has its own map, because a layout that works on a laptop can hide the key button on a phone.
  4. Switch between Clicks and Scroll depth.

Beside the map, Most clicked lists elements by their share of clicks on the page, and Scroll reach shows the share of pageviews that scrolled at least to each depth. Both are tables, so the findings don't depend on seeing colour. Untick Show page underneath to see the clicks on a plain background.

Look for clicks on things that aren't links, and for key content that most mobile visitors never scroll to. The friction report lists dead clicks and rage clicks on the same elements.

Turn on session replay

  1. Open your app, choose Settings and find Research.
  2. Under Session replay, tick Record sessions.
  3. Set Sessions to record. The default is 10%.
  4. Choose how to Mask page text. All text (recommended) shows every character as a dot unless it's inside data-mk-unmask. Only marked elements shows text except inside data-mk-mask.
  5. Leave Wait for consent ticked. See the next section.
  6. Choose Save research settings.

Whatever you choose, every input value is always masked. Elements marked data-mk-block are replaced with a placeholder and not recorded. A single recording stops after an hour.

With Wait for consent ticked, which is the default, nothing is recorded until your site tells Metrickle the visitor has agreed. Call this from your consent banner when they accept:

metrickle.consent({ replay: true });

The choice is remembered on the visitor's device. If they change their mind, call metrickle.consent({ replay: false }) and recording stops.

Some sessions are never recorded, whatever the settings:

  • visitors in cookieless mode, because replay needs to keep a session on the device;
  • visitors whose browser sends Do Not Track or Global Privacy Control, and visitors your app has opted out;
  • every app in the workspace, if an Owner or Admin has ticked Turn off session replay for every app on the Security page.

People taking part in an unmoderated study agree to recording on the study page, so their test is recorded even if they haven't answered your banner. They can say no and still take part.

Watch a replay

  1. Open your app and choose Replays.
  2. Choose All sessions or With friction. Any filters you've set, such as an accessibility setting or a survey answer, narrow the list to matching sessions.
  3. Select a session to play it. The Timeline beside the player lists what happened, including friction, so you can jump to the moment. You can play at up to 8× speed.

Each recording links to the Visitor journey, and feedback reports link to the replay of the session they were sent from.

Who can watch replays

Recordings can show real people, so they need their own permission: "Watch session replays and see feedback screenshots". Owners, Admins and Members have it. The Viewer role doesn't, and a Viewer who opens Replays sees "Your role doesn't include replays". Viewers can still see heatmaps, friction, journeys and events.

When Metrickle support looks at your workspace to help you, replays stay closed to them.

Workspace-wide rules

On the Security page, under Data, Owners and Admins can set rules that override every app's own settings:

  • Turn off session replay for every app. Replays already recorded stay until they age out.
  • Mask all text in replays and heatmaps for every app. Every character shows as a dot, whatever each app allows.

To delete one person's recordings, erase their data. See erase a visitor's data.