Heatmaps

A heatmap lays your visitors' behaviour over a page of your site, so you can see which elements get attention, where people get frustrated and how far down they scroll.

There are five kinds of heatmap:

Turn on heatmaps

1. Make sure the web snippet is installed.
2. Open Settings → Project → Heatmaps and turn on Enable heatmaps for web.

Heatmap data is collected from then on; earlier visits are not included. It travels with the events the library already sends, so no extra events are created.

You can also turn heatmaps on in your code, in the snippet's options:

myjourney.init("<project token>", {
  capture_heatmaps: true,
});

Dead clicks

With heatmaps on, dead clicks are included in heatmap data automatically. To also record each dead click as an event, for use in insights, turn on Settings → Project → Autocapture → Dead clicks autocapture, or set capture_dead_clicks: true in the snippet's options.

To ignore an element that is meant to do nothing when clicked, add the class mj-no-deadclick to it.

Choosing which pages to capture

Under Settings → Project → Heatmaps → Heatmap capture URLs, choose Pages to capture:

• Allow all URLs collects heatmap data from every page.
• Only listed URLs collects it only from the pages under Allowed URLs.

Enter full addresses. Use * to match any characters: https://example.com/docs/* covers every page under /docs/. When you create a saved heatmap, the app tells you whether its page is covered.

If the settings say the rules are not enforced yet, heatmap data is still collected from every page until they are.

View a heatmap on your site

The toolbar shows heatmaps on your live site, exactly as visitors see it.

1. Launch the toolbar on your site.
2. Select Heatmaps in the toolbar.
3. Choose the Heatmap type, the date range and the Aggregation: Total count or Unique visitors.

Clicks on elements are also counted per element, with a ranked list in the toolbar. Turn on Match links by their target URL to count clicks on links by where they lead.

Pages with an ID in the address, such as /orders/1234, can be combined with a wildcard, for example https://example.com/orders/*, so you see all of them together.

To focus on one part of the page, use Filter to area and click the area you are interested in. To keep a heatmap for later, choose Save to My Journey Analytics.

Viewport sizes

The same page can look very different on a phone and a laptop. Heatmaps use the data from screens close to your own width; Viewport accuracy controls how close they need to be. At 90%, for example, you see data from screens up to 10% narrower or wider than yours. Resize your browser to see the heatmap for other screen sizes.

Fixed elements

Headers and banners that stay in place while the page scrolls need special handling. Fixed positioning calculation chooses whether clicks on them are shown where they were on screen, shown scrolled with the page, or hidden.

Saved heatmaps in the app

Open Heatmaps in the app to keep heatmaps for the pages you care about, and open them without visiting your site.

1. Select New heatmap, or Create your first heatmap.
2. Choose page: enter the page's full address.
3. Choose background: a screenshot of the page, or the live page in a frame.
4. Review and create.

If the page needs a sign-in, answer Yes, this page requires login when asked, and the background is taken from a session recording instead, so the signed-in page is shown. The heatmap can also be opened on your live site with Open in toolbar.

Screenshots and bot protection

Screenshot backgrounds are taken by a browser that visits your page. If your site's firewall or bot protection blocks it, the screenshot fails. Under Settings → Project → Heatmaps → Screenshot request cookie, generate a value our screenshot browser sends as a cookie, and allow requests with that cookie in your bot protection.

Privacy

Heatmaps record where people click, move and scroll, not what they type. Backgrounds taken from session recordings follow your session replay masking settings.