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.

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.

Metrics View

In addition to viewing these heatmaps within a session, you can also create and save heatmaps to dashboards within the Metrics tab.

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

📘

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.

Then, you can choose the type of heatmap you want to see. For more detailed information on each type, check the links below.

Heatmap Types

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