Heatmaps

See where visitors click on your website pages and how far down they scroll. Each page opens its click or scroll map over the live site.

What a heatmap is

A heatmap shows how visitors use one page of your website. Heatmaps has two kinds:

• A click map shows where on the page visitors click.
• A scroll map shows how far down the page visitors scroll, so you can see how much of a long page is actually seen.

The Heatmaps tab of Views lists the pages visitors opened in the selected date range, with their page views and average scroll depth. The map itself is not drawn in the dashboard. View click map or View scroll map opens the page on your live website in a new tab and draws the map over it, for the same date range.

The tab counts visits exactly as the Overview tab does, so a page shows the same page views in both places for the same date range. A screen recorded by a mobile SDK is listed too, but it has no page to open, so its map icons are turned off.

How a heatmap opens on your website

A heatmap opens on a real website, so the dashboard needs to know which one. That is the project's website address, shown in the info bar at the top of the tab.

• When the project has a website address, a map opens the page on that site straight away. The page's own path is added to the address, so /pricing on https://www.example.com opens https://www.example.com/pricing.
• When the project has no website address, the map asks which website shows the page. The sites your pages were recorded on are offered, so the usual answer is one click.
• When a page was recorded only on another site, for example a project that tracks both www. and blog., the map asks instead of opening the page on the wrong site.

The website must run the Countly web SDK for this project. The SDK on the page reads the hand-off from the dashboard and draws the map. A visit you make while the map is open is not recorded as a visitor's.

Only a project admin can set or change the website address. Anyone else can still answer the question for one heatmap at a time.

Use Cases

See what visitors click on a page

Use a click map when a page does not convert the way you expect: visitors may click something that is not a link, or miss the button you want them to use.

1. Open Views and select the Heatmaps tab.
2. Pick the date range in the header. The map you open later uses the same range.
3. Find the page in the Pages table. Sort by Page views to start with the busiest pages, or type part of its name in the search box.
4. Click View click map on its row. The page opens on your website in a new tab, with the clicks drawn over it.
5. If the project records several platforms, pick one in the Filter bar first to compare, for example, web visitors with visitors on another platform.

Find pages that visitors stop reading

A long page that most visitors leave near the top is content nobody reads. The Heatmaps tab finds those pages and the scroll map shows where reading stops.

1. Open Views and select the Heatmaps tab.
2. In the Pages table, sort by Average scroll depth. Compare each page with its Page views: a low depth on a busy page matters more than on a page with few visits.
3. Click View scroll map on a page to open it on your website and see how far down visitors got.

Set the website your heatmaps open on

Set the project's website address once, so maps open the pages recorded on that site without asking. You need to be a project admin.

1. Open Views and select the Heatmaps tab. The info bar shows the current address, or says none is set.
2. Click Set website address, or Change when an address is already saved.
3. Type the address of the site that runs the web SDK, or click one of the suggested sites. Only the site part is kept: https://www.example.com/blog is saved as https://www.example.com.
4. Click Save.

You can also save the address while opening a heatmap: when a map asks which website shows the page, keep Save as this project's website address ticked before you click Open heatmap.

FAQs

Why does a map ask which website shows the page?

The project has no website address, or the page was recorded only on another site. Pick the site in the dialog. A project admin can save it so that later heatmaps open straight away.

The page opened but no map is drawn. What is wrong?

Check that the page runs the web SDK with this project's app key and with click or scroll tracking turned on. If you open the dashboard on a different address than the one the SDK sends data to, add it to the SDK's heatmap_whitelist option.

Why are the map icons turned off on a row?

The view is named like an app screen (Home) rather than a path (/pricing), so there is no page on your website to open. Screens from mobile SDKs always show this.

Why is Average scroll depth zero?

Scroll tracking is not on in the web SDK, or no visit in the selected date range scrolled. Turn on Countly.track_scrolls() on your website.

Do the page views match the Overview tab?

Yes. Both tabs count the same visits, so a page shows the same page views on both for the same date range.

Who can change the website address?

Only a project admin. Anyone else sees the address in the info bar, and can still pick a site for one heatmap at a time.

Related Resources