Heatmaps

Overview

LogRocket offers a few different ways to more visually understand the usage of your application.

Session Playback View

You can view the different types of Heatmaps we offer by using the tabs in the top righthand corner of when you are watching a session.

954954

You will need to pause the playback to view the heatmap, which will be overlayed on top of the video. You can scroll up and down within the video to see all parts of a page.

In the pane on the right side, you'll also see some useful statistics and metadata about the page. The type of data will be different depending on whether you are viewing a clickmap or a scrollmap.

📘

Aggregate Data

Even though the heatmap is being accessed from a specific session, we are aggregating data from all sessions within your current filter that have visited a particular page in order to compile the heatmap.

In some cases, we may not have enough data and/or not enough users have visited the page for us to provide a useful overlay.

Dashboards View

In addition to viewing these heatmaps within a session, you can also create and save heatmaps to Dashboards

To get started, navigate to either the Heatmaps or Dashboards tab and click 'Add Chart', then select Heatmap as a type. You will need to select the type of heatmap as well as enter a URL matching the page that you want to see a heatmap for.

10501050

You will see an image of a page matching the URL appear on the page. In the top right corner, you will see Lock and Refresh buttons. If the visual of the page does not match what you want, you can choose to Refresh the page to retrieve a new one. Once the page matches what you want to see, you can select the 'Lock' button to ensure that the page is locked and when you return to the chart, it will not change.

📘

URL definition for heatmaps

You can use "is", "contains", "like", "starts with", and "ends with" for the URL definition. If you use "is", the heatmap is most likely to show you exactly the page you are interested in. Please note that you must specify "http://" or "https://" if using the "is" option because it is an exact match.
If you are using the "like" operator, you can use the * character as a wildcard.

If you use "contains", there is a chance the page may not match what you had in mind.

Please note that we do not support anchors (#) or query parameters in our URLs here.

Heatmap Types

To learn more about each Heatmap type, you can view each page below: