Heatmaps

A heatmap (or heat map) is a visualization of your user’s Session Replay data, where your user’s interactions (clicks) are represented by color in the image. Seeing where a user clicks helps you understand if users engage with your page the way you expect and if they are finding all of your call to actions (CTAs) and important buttons. Visualizing these interactions in a heatmap makes it easy to understand complex data at a glance. Taking the insights from heatmaps helps you make UI decisions to optimize your user experience and increase retention.

Prerequisites

To get started with heatmaps:

• You must be on the latest version of the SDK (v4.40.0 or later)
• Enable Session Replay.
• SettrackUserInteractions: true in the SDK initialization to enable action tracking.

Getting started

On the view list page, select your application and view.

This will take you to the heatmap page for a particular view. You can switch the view being shown with the View Name and Application selectors at the top. A heatmap displays the aggregate of where all users (sessions) clicked on a single view, with the view being a single page within an application. Each session is one user’s activity and includes everything they did, including all pages they viewed and all actions they clicked.

To adjust the filters (to look at specific geography, for example), you can add a filter from the panel on the left side.

Insights

The right panel helps you understand the data in the heatmap:

• The popularity of the selected page in the context of the selected application.
• The total number of unique users viewing the page.
• The actions on the page where a frustration signal occurred.

You can click into any of these queries to pivot to an analytical view of these data points.

Below the panel are all actions that occurred on the page, listed by frequency. When you click into an action, you can understand more about that interaction, for example:

• The number of times the user performed the action and where it falls in overall analytics of top actions on a given page.
• If that action had a frustration signal occurring on it (for example, if a user rage clicked on that button), you can view the associated frustration signals as well.

Next steps

After understanding analytics, the next step is to understand the action in the context of other data outside of heatmaps. This might mean pivoting to the RUM explorer or building a funnel that includes the action in order to analyze conversion rates. You can also watch associated session replays to visually see a user performing the action in the context of their overall session.

Troubleshooting

I am looking at a heatmap for a given view, but it’s showing me an unexpected page.

Heatmaps are based on RUM view names. Depending on how your RUM application is configured, many pages can start being grouped under the same view name, or you can start having very specific view names. If you think the default view name gathering is not sufficient, you can override it manually with the startView function.

The view that I selected is not showing the initial content.

Heatmaps are generated with Session Replay data. Datadog’s intelligent algorithm smartly picks a replay that is both recent and best matches the initial state of the page. In some cases, we might not be able to find the correct replay. To switch the background of your heatmap, you can use the Choose Background button to navigate through the different states of the page and find the one you are looking for.

On the action list on the side of my heatmap, I see an icon showing an element that is not visibile in the heatmap.

The tooltip on the icon says element is not visible. This means that the element is a common action on your page, but it’s not displayed on the background in the heatmap. To see that element, you can click Choose Background in the bottom right corner to switch the background of your heatmap to one where that element is present.

After attempting to create a heatmap, I see a “No Replay Data” state appear.

This means that Datadog could not find any Session Replays to use as a heatmap background that matches the current search filters. If you just started to record sessions with the Browser SDK, it may also take a few minutes for the Session Replay to be available for viewing.

After attempting to create a heatmap, I see a “Not enough data to generate a heatmap” state appear.

This means that Datadog was not able to match any user actions with the current selected replay. This happens for a variety of reasons, such as:

• Your application is not using the latest SDK version (>= 4.20.0).
• RUM actions are not enabled. Learn how to track user interactions.
• Your page has recently changed drastically.

All of the user information on the page is empty.

User information is not collected by default. Heatmaps use the user information available in your session data to display relevant insights on behavior. You can set up user information in RUM by following the steps in Modifying Data and Context.