Skip to main content
A heatmap is a color overlay on a snapshot of a page of your site. GrainQL Tag records clicks, scroll depth, and a layout snapshot of the page. You read the heatmaps in the dashboard under Heatmaps, and on the page snapshots in Studio. Heatmaps are part of the Starter, Growth, and Scale plans. Read Plans and limits.

​
Turn on heatmap capture

An admin or an owner turns on capture for the workspace.
  1. In the dashboard sidebar, click Settings. Then open Tracking settings.
  2. In the Heatmaps card, turn on Capture heatmaps.
  3. In Sample, choose the share of sessions: 1%, 2%, 3%, or 5%.
If capture is off, the Heatmaps page shows a button that turns it on.

​
View a heatmap

1

Open Heatmaps

In the dashboard sidebar, under Analyze, click Heatmaps.
2

Choose a page

Choose the page in the page library on the left.
3

Choose the view

Choose Clicks, Attention, or Frustration. Read the table below.
4

Choose the device and the date range

Choose desktop or mobile. Then choose 7d, 30d (the default), or 90d.
If a page has more than one layout snapshot, the toolbar shows Variation with one button for each layout. Choose the layout that matches the period that you read. To ask about a heatmap, press Cmd+J (Ctrl+J on Windows and Linux) and ask Neo. Neo receives the page, the view, and the device that you have open.

​
Click maps

GrainQL Tag records the position of every click and the element under it. The click map draws the positions as a heat gradient. A hot spot is a place where many visitors clicked. A click map answers these questions:
  • Which calls to action get clicks, and which ones do not.
  • Whether visitors click an element that is not interactive.
  • Which menu items get the most clicks.

​
Scroll maps

The Attention view shows a gradient from the top of the page, which every visitor sees, to the bottom, which fewer visitors reach. A scroll map answers these questions:
  • Where most visitors stop scrolling.
  • Whether visitors read the full page or leave early.
  • Where to put the content that matters, so visitors see it.

​
DOM snapshots

GrainQL Tag captures a snapshot of the page DOM. A snapshot holds the structure, styles, and layout of the page, the URL, the viewport size, and the device type. The dashboard draws the heatmap on top of the snapshot, so the overlay matches the page as it was. GrainQL keeps several snapshots over time, so you can read a heatmap of an earlier layout. The enableSnapshots option of the GrainQL Tag configuration turns snapshots off. The enableHeatmaps option turns click and scroll collection off. Read Configuration options.

​
PII masking

A snapshot masks the values of all form inputs.

​
Exclude an element

If an element holds content that must not appear in a snapshot, add the grain-no-snapshot class. GrainQL Tag leaves the element and its children out of every snapshot.

​
Devices

Visitors click and scroll differently on a phone and on a desktop. GrainQL Tag records each device type separately: A heatmap event holds a device_type with two values, mobile or desktop. Every other event holds a device property with three values: Mobile, Tablet, and Desktop.

​
Limits

​
What heatmaps do not do

  • A heatmap shows the aggregated positions of many visitors, not the visit of one person.
  • A heatmap does not count clicks on pages where GrainQL Tag is not installed.
  • A heatmap does not count one element. For a count of clicks on one button, create a tracker. Read Trackers.