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.
Dashboards View
In addition to viewing these heatmaps within a session, you can also create and save heatmaps to Dashboards
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:
Updated 6 months ago