Skip to main content
A heatmap is a color overlay on a page of your site. A click map shows where visitors click. A scroll map shows how far down the page they scroll. Grain Tag collects the clicks and the scroll depth on every page where it is installed. You view the overlays in Studio, the Grain browser extension.

​
Click maps

Grain 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.
  • Which elements get dead clicks: clicks on an element that visitors expect to be interactive.
  • Whether visitors read a section or skip it.
  • Which menu items get the most clicks.

​
Scroll maps

Grain Tag records how far down the page each visitor scrolled. The scroll map shows a gradient from the top of the page, which 100% of visitors see, to the bottom, which fewer visitors reach. A scroll map answers these questions:
  • Where the fold is: the point where most visitors stop.
  • Whether visitors read the full page or leave early.
  • Where to put the content that matters, so visitors see it.

​
View a heatmap in Studio

1

Install Studio

Install Studio from the dashboard.
2

Open a page

Open a page of your site in the browser.
3

Open the Heatmap view

Open Studio and choose the Heatmap view.
4

Choose the map

Switch between Click and Scroll. Filter by date range or device type.
The heatmap view in Studio is part of the paid plans. Grain Tag collects click and scroll data on every plan.

​
DOM snapshots

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

​
PII masking

A snapshot masks personal data:
  • Form input values are replaced with placeholder text.
  • Email addresses and phone numbers are redacted.
  • You can add custom masking rules in the dashboard.

​
Exclude an element

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

​
Devices

Visitors click and scroll differently on a phone and on a desktop. Grain 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. Filter a heatmap by device in Studio to compare screen sizes.

​
What heatmaps do not do

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