Heatmaps

Heatmaps uses Session Replay to provide a visual representation of user engagement on your website or application over time. Analyze event patterns to identify trends, anomalies, and areas of your product that drive the most engagement.

Customers with the Session Replay addon can use Heatmaps. All users with View permissions can create Heatmaps.

Use the following map types, depending on your use case.

Prerequisites

Before you create a heatmap, ensure your Amplitude instrumentation meets the following requirements.

Session Replay

Heatmaps requires these minimum SDK versions:

• Session Replay Browser SDK Plugin: 1.7.0.
• Session Replay Standalone SDK: 1.14.0.

Heatmap data requirements

Heatmaps appear after Amplitude collects enough replay click data across your site: at least 10 separate pages, with about 500 tracked replay clicks on each page. These thresholds are approximate and may change as Heatmaps evolves.

No server-side identifiers

Heatmaps requires Amplitude's default device identifiers from the Browser SDK and doesn't support device identifiers from server-side SDKs or third-party data sources.

Create a development project (optional)

Amplitude recommends that you create a separate development project to test Heatmapping without impacting your production environment.

Create a heatmap

To create a new Heatmap:

1. Navigate to Heatmaps in the left navigation in Amplitude.
2. Click + New Heatmap.
3. Choose a Heatmap type. You can update the map type at any point.
4. Select the URL to analyze. Use the following URL matching options to target the pages you care about.
   • Exact match: Matches the URL exactly as you specify it. Ideal for single URLs. For example, https://amplitude.com.
   • Pattern match: Uses wildcards to match more than one URL with a similar pattern. Useful for targeting dynamic paths. For example, https://amplistore/products/* matches /products/shoes and /product/accessories.
   • Contains: Matches URLs that contain a specific keyword or segment anywhere in the URL. Useful for common themes. For example, /search?q= matches the search results page for any user query.
   • Starts with: Matches all URLs that begin with a specific prefix. Useful for capturing sections of a site. For example, https://amplitude.com/blog captures the /blog page and all subpages.
5. Select or create a Segment using user properties or cohorts to narrow the focus to a specific set of users.
6. Optionally, select different device types to understand how users interact on devices of different widths.
7. Choose a background for your heatmap. Backgrounds are snapshots of a session replay and represent the page's state during replay collection. Each heatmap generates eight backgrounds, based on the state of the page that generates the most actions during a session.

Map types

Heatmaps provides three views that help you understand how users engage with a specific page.

Click map

Click maps provide a color-coded display of the clicks, or "heat" on your page. Areas with few clicks appear blue, while busier areas appear green, yellow, orange, and red in order of increasing clicks.

Click map Microscope

Highlight an area of the click map to access Microscope. From there, you can:

• View the events in the highlighted area for deeper visibility into user actions, or create a chart to further analyze trends and behaviors across your data.
• View replays of user sessions that contain the events in your selection to combine the quantitative insights from Heatmaps with the qualitative context from Session Replay.
• Create a cohort of users who interact with a specific area of a page. For more information, go to Behavioral Cohorts.

Selector map

The Selector view displays a wire frame of clickable elements on the page, ranked by number of clicks in descending order. Select an element on the map or in the list to watch Session Replays of those events, view the raw events, or create a cohort of users who engaged with the selector.

Selector map Microscope

Select a ranked element on the page to access Microscope. From there, you can:

• View the events associated with the element area for deeper visibility into user actions, or create a chart to further analyze trends and behaviors across your data.
• View replays of user sessions that contain an interaction with the selected element to combine the quantitative insights from Heatmaps with the qualitative context from Session Replay.
• Create a cohort of users who interact with a specific element. For more information, go to Behavioral Cohorts.

Scroll map

The scroll map shows the number of sessions and percentage of sessions that have scrolled that part of the page into their viewport. Use the handle on the slider to adjust the scroll depth.

The scroll map also shows the average fold of your page: the amount of the page that appeared on a user's device without the need to scroll.

On the list to the right of the map, click Watch Replays to view Session Replays where the session scrolled at least that much of your page.