Using heatmaps

Updated

A heatmap shows how visitors interact with a page, based on the sessions Strabber has recorded. Strabber has three types of heatmap, and every heatmap includes all three:

  • Clicks show where visitors click.
  • Movements show where visitors move their mouse.
  • Scroll depth shows how far down the page visitors scroll.

Warmer colors mean more activity.

Create a heatmap

  1. Open Heatmaps and click New heatmap.
  2. Under Page URL, choose a condition and start typing to search your pages. For example, use Is equal to for a single page, or Starts with to combine every page under /blog/ into one heatmap.
  3. Choose the Default device: Desktop, Tablet or Smartphone.
  4. Choose a Date period: all available recordings, recordings within or outside a date range, or recordings after or before a date.
  5. Under Type, choose All traffic, or limit the heatmap to visitors who are In audience or Not in audience, and pick the audience.
  6. Enter a Heatmap name and click Generate.

You can also create a heatmap while watching a recording: click Generate heatmap above the page in the player.

Strabber builds the heatmap from your recordings. While it's being generated, the list shows its progress, such as In progress: 40%. You can leave the page; you'll get a notification when the heatmap is ready.

If Strabber can't create the heatmap, the most common reason is that there are no recordings for the selected page and date range. Check the URL condition and the dates, and try again.

The heatmaps list

The Heatmaps page lists all heatmaps for your site, with each heatmap's name, status, URL pattern, default device and dates. Heatmaps you haven't opened yet are marked Not viewed.

To delete heatmaps, select them and click Delete selected, or use the menu at the end of a row.

Read a heatmap

Open a heatmap from the list. The heatmap is drawn over a snapshot of your page.

Use the buttons above the page to switch between Clicks, Movements and Scroll depth.

  • Clicks: hover over an element to see how many clicks it got, how many of them were rage clicks, and its share of all clicks on the page.
  • Movements: shows where visitors moved their mouse across the page.
  • Scroll depth: hover over any point of the page to see the percentage of visitors who scrolled that far. The Average fold line marks how much of the page visitors see without scrolling.

Choose the page snapshot

The heatmap is drawn over one recorded version of the page. The bar above the heatmap shows the date of the snapshot and its URL. Click it to choose a different snapshot, for example a more recent version of the page or a different URL matched by the heatmap.

Switch devices

The buttons at the top switch between Desktop, Tablet and Smartphone. Each button shows how many visits the heatmap has from that device type.

Adjust the intensity

Use the Intensity slider in the sidebar to make the colors stronger or weaker. This helps when a few hot spots make the rest of the page look empty, or when the whole page looks hot.

Download a heatmap

Click the download button above the page to save the heatmap as an image.

The sidebar

The sidebar shows:

  • About this heatmap: when it was created and updated, its URL pattern, dates and audience, and the date of the snapshot.
  • Clicked elements: the elements on the page that got clicks, with the number of clicks and rage clicks and each element's share of all clicks. Click Show all to see the full list. Clicks on elements that aren't on the current snapshot are counted separately.
  • Intensity: the intensity slider.
  • Total: totals for the heatmap, such as clicks, rage clicks, activity score, issues and pages.

You can collapse the sidebar sections and drag them to reorder them.

See the recordings behind a click

Click an element on the clicks heatmap to select it. The sidebar then lists Recordings with clicks here, so you can watch the sessions where visitors clicked that element.

Filter visitors

Above the heatmap you can narrow it down to a group of visitors without creating a new heatmap:

  • Click Filters to filter by Country, Browser, Operating system, Source or Visitor (new or returning).
  • Click the date button to show only visits from a date range.

The heatmap updates straight away and shows how many visits match, for example "120 of 800 visits". Click Clear filters to remove them.

Compare two groups of visitors

Click Compare to show two versions of the heatmap at once, A and B. Set different filters for each, for example new visitors in A and returning visitors in B, or this month in A and last month in B.

  • Use the Side by side / Stacked switch to choose the layout.
  • Hover over an element to see its clicks and share of clicks in both groups.
  • In Clicked elements, each element shows how its share of clicks changed from A to B, in percentage points.

Click Stop comparing to go back to a single heatmap.

Regenerate a heatmap

A heatmap includes the recordings available when it was generated. To include newer recordings, open the menu next to the heatmap's name and choose Regenerate.

Older heatmaps may also need regenerating to use newer features. If you see a message asking you to regenerate the heatmap, for example to see the scroll map, filter visitors or see clicks per element, click Regenerate heatmap.

To delete a heatmap, choose Delete from the same menu.