Heatmaps

Overview

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

Session Playback View

You can create a heatmap based on the current page from session replay using the Create Heatmap option in the Tools menu:

This will open the heatmap creation view (see next section) with certain values pre-filled based on the session you were viewing.

Creating a Heatmap

To get started, navigate to either the Heatmaps tab and click 'Add Chart'. 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. You can use either the 'Visited URL' option or select from a Saved Definition.

You will see an image of a page matching the URL appear. In the top left 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.

Understanding the Data

Below the visual of the heatmap, you'll see a list of sessions that visited the page as well as a table of the Most Clicked Elements on the page, sorted by number of clicks. These are reflected visually on the image of the page above.

You can click an element to filter the sessions list to sessions in which that particular element was clicked.

Heatmap Types

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

Clickmaps

Scrollmaps

Conversion Rate Heatmap

Hovermaps