A heatmap (or heat map) is a visualization of your user’s interactions overlaid on Session Replay data. There are three different types of heatmaps:

• Click maps: View user interactions (clicks) to understand how users engage with your page.
• Top Elements: View a ranking of up to the top 10 most interacted-with elements on a given page.
• Scroll maps: View how far users scroll down a page, including where the average fold of a page falls. The average fold is the lowest point on a page that a user can see on their device without scrolling.

Use heatmaps to review complex data at a glance and gain insights around optimizing your user experience.

Prerequisites

To get started with heatmaps:

1. Verify your SDK version:
   • For Click maps, you must be on the latest version of the SDK (v4.40.0 or later).
   • For Scroll maps, you must be on (v4.50.0 or later).
2. Enable Session Replay.
3. SettrackUserInteractions: true in the SDK initialization to enable action tracking (required for Clickmaps).

Getting started

Navigate to Digital Experience > Real User Monitoring > Session Replay > Heatmaps. Select your application and view.

On the Real User Monitoring landing page, select your application from the application selector and view. To the left of the timeframe selector, you can select the type of heatmap you would like to view: Top elements, Click map, or Scroll map.

Navigate to Digital Experience > Product Analytics > Heatmaps. Select your application and view.

From this page, you can select the type of heatmap (Top elements, Click map, Scroll map) you would like to see for a particular view.

Click on a view name for a more detailed look at the related heatmap.

You have the following additional view options:

• To switch the view being shown, use the View Name and Application selectors at the top.
• To change the device view, use the Device type selector.
• To filter by action name, use the Filter actions by dropdown.
• To add more granular filters, like a specific geography for example, click the Add Filter button.

Top Elements

Top Elements heatmaps aggregate click actions on a given view by displaying the elements that are most interacted with, in addition to their interaction rank. The ranking on the map itself corresponds to the action name on the side.

Hover over any action name in the panel to highlight the corresponding action on the map.

Click maps

A Click map shows you the actions most interacted with on a given view by aggregating user click actions from sessions and visualizing them as blobs on the map.

On the left is a list of 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.

From this view, you can also click the Start a Funnel button to identify user drop off.

Scroll maps

Scroll maps display the aggregate scroll activity on a given page. Use Scroll maps to see where the average fold of the page falls, and how many users scroll to a given depth. You can drag the floating blue bar on a Scroll map to the depth you wish to assess.

The panel to the left of the Scroll map provides high-level insights with direct links to query results, such as a link to a list of views where the user scrolled past a given percentile. Below the insight panel is a minimap of the page and a distribution graph displaying granular scroll data, useful for identifying where the biggest drop-off occurs.

Screenshots

A screenshot is the state of a view at a particular point in time. Changing the screenshot shows different results, depending on the screenshot selected. You can also save screenshots so that everyone in your organization can analyze the same view state.

Changing screenshots

From the heatmap view, click the Change Screenshot button. A dropdown appears with three options.

Choose from screenshots previously saved by you or your teammates. This helps ensure everyone in your organization analyzes the same view state.

Capture a screenshot directly from your live application. Use this option when the state you need—such as an open modal, a hover menu, or a specific scroll position—does not exist in your recorded replays.

Prerequisite: Install the Datadog Test Recorder Chrome extension before using this option. The extension loads your live application in an embedded browser within Datadog, letting you navigate to the exact page and UI state you want to capture.

1. Click Take new screenshot.

2. Navigate to the page you want to capture in the embedded browser.

3. Scroll and interact with the page to display the content you want.

4. Select a masking level to prevent sensitive data from appearing in your heatmap screenshot. Individual element-level privacy settings configured in your code still take precedence. For more information, see Privacy options.

5. Click Take Screenshot. A preview of the screenshot opens.

6. Review the preview and click Confirm to apply the screenshot to your heatmap.

Select a screenshot from a recorded Session Replay.

1. Click Grab from replay.

2. Click an action event on the right to select a different snapshot for your heatmap.

3. If the session does not contain the action that leads to the desired screenshot, return to the list of replays by clicking Choose Another Replay.

4. Click Take Screenshot to apply the screenshot at the paused point to the heatmap.

Saving screenshots

Screenshots taken using Grab from replay or Take new screenshot are automatically saved and become the default view for anyone in your organization who opens the heatmap. To also save the screenshot auto-picked from a recent replay, click Save on the current screenshot.

You can save multiple screenshots for the same view (for example: default view, open navigation menu, open modal) and switch between screenshots saved by teammates.

To remove the currently saved screenshot and revert to an auto-picked one from a recent replay, click Unpin on the current screenshot.

Analyzing heatmaps beyond replay retention

In Product Analytics, click data outlives the Session Replay used as a background. See Data retention. To view a heatmap for a period older than your replay retention:

1. Set the date range to a period within the last 30 days, so a heatmap renders with a background from a recent replay.
2. Click Save on the current screenshot to pin it.
3. Set the date range back to the period you want to analyze.

Your older click data appears on the pinned screenshot. You can also use Take new screenshot to capture a specific state from your live application.

Note: The background reflects your application as it looked recently, not as it looked during the period you are analyzing. If your page layout changed in between, clicks can appear over the wrong elements.

Data retention

A heatmap combines two pieces of data (the overlay - clicks and scrolls, and the background screenshot), and Datadog retains each for a different period:

A heatmap needs both to render. If you select a time frame where click data still exists but no replay remains to use as a background, the heatmap shows “No Replay Data” even though you can still query those actions in the Analytics Explorer.

In Product Analytics, if you expect to analyze a view over a period longer than 30 days, save a screenshot for it while replays are still available. Saving a screenshot extends the retention of the replay behind it to 15 months, so the heatmap keeps rendering for as long as Datadog retains your Product Analytics click data. See Analyzing heatmaps beyond replay retention.

In RUM, action events expire after 30 days, so heatmaps are not available beyond that window.

For the retention periods that apply to other data types, see Data retention periods. To extend retention on individual replays, see Extend data retention.

Next steps

After analyzing heatmaps, the next step is to understand the user action by exploring related data. Watch associated session replays to see user actions in the context of their overall session, or navigate to an Analytics explorer in RUM or Product Analytics to analyze your user data.

Troubleshooting

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

Heatmaps are based on view names. Depending on how your application is configured, many pages can start being grouped under the same view name, or you can start having specific view names.

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

Heatmaps are generated with Session Replay data. Datadog’s intelligent algorithm picks a replay that is both recent and best matches the initial state of the page. In some cases, this replay might not be the one you want to use. To switch the snapshot of your heatmap, use the Change Snapshot button to navigate through the different states of a replay and find the one you want. If the replay you’re viewing does not have the snapshot you’re looking for, you can use the Choose Another Replay button to select another replay of the same view.

On the action list on the side of my heatmap, I see an icon showing an element that is not visible 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 snapshot in the heatmap. To see that element, you can click Change Snapshot in the top right corner to switch the snapshot of your heatmap to one where that element is present.

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

The “No Replay Data” state means that Datadog could not find any Session Replay to use as a heatmap background. Common causes:

• Your selected time frame is older than your Session Replay retention, which is 30 days by default. Click data can still exist, but no replay remains to use as a background. See Analyzing heatmaps beyond replay retention.
• No replay matches your current search filters.
• You recently started recording with the Browser SDK, and the replay is not yet available. This can take a few minutes.

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).
• 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.

Further reading

Documentation, liens et articles supplémentaires utiles:

Session Replay for BrowsersDOCUMENTATION Session Replay for MobileDOCUMENTATION Capture and analyze custom heatmaps in Session ReplayBLOG Visualize user interactions with your pages by using Scrollmaps in Datadog HeatmapsBLOG