Heatmaps (Beta)

Heatmaps are currently in private, closed beta. For early access, please contact your Account Manager.

Overview

Heatmaps help you visualize user interactions on your web application, showing where users click the most. This feature enables teams to quickly identify areas of high engagement and friction, helping to optimize user experiences and improve conversion rates.

We offer two types of heatmaps:

Click Maps: These track clicks on individual site elements, providing precise insights into which modals, dropdowns, or features that users engage with the most. This element-level tracking helps you understand specific component usage.
Traditional Heatmaps: These overlay general activity on a page based on X,Y coordinates, giving you a broader view of user interaction patterns across the entire page layout.

Note: Traditional heatmaps may show some inaccuracies on modern websites due to dynamic elements like modals, dropdowns, fixed elements, and cookie banners that change the page layout. Click maps can be used to confirm and clarify these interactions by showing exactly which elements users are engaging with.

Future versions of heatmaps may also include hovers, scroll depth, and other interaction types.

Enabling Heatmaps does not affect billing. They are included with the Session Replay add-on and do not generate additional billable events.

How It Works

Heatmaps are powered by Session Replay data and automatically capture click interactions when enabled. Users can generate a Heatmap for specific pages to gain deeper insights into user engagement.

To function, Heatmaps require Session Replay to be enabled, as they rely on session replay data to track and visualize user clicks.

Heatmaps only capture data during sessions with recorded replays. If a page has limited replay coverage, the Heatmap may not offer meaningful insights.

⚠️

When clicks occur very close to page navigation events, the heatmap may occasionally show clicks on the wrong page. This happens because the timing between page changes and click events may not align perfectly. If you notice clicks appearing on the wrong page, try using a different backdrops to find the correct page state.

Implementation

Ensure you have Session Replay set up(see developer guide on implementing Session Replay), with the record_heatmap_data set to true.

Clicks recorded using record_heatmap_data will only capture clicks while an a session recording is in progress. These clicks are sent as $mp_click and will not be counted against your plan data allowance.

Example Usage

mixpanel.init('YOUR_PROJECT_TOKEN', {
  record_sessions_percent: 1, // Session Replay enabled, recording 1% of all sessions
  record_heatmap_data: true   // Enable Heatmap data collection
});

If you currently use Autocapture to track clicks, you can leverage these clicks to populate the Heatmaps without the record_heatmap_data init option.

Clicks captured by Autocapture are billable events that are counted against your plan data allowance.

Example Usage

mixpanel.init('YOUR_PROJECT_TOKEN', {
  autocapture: {
    pageview: "full-url",
    click: true, // click tracking enabled
    input: true,
    scroll: true,
    submit: true,
    capture_text_content: false,
  },
  record_sessions_percent: 1 // Session Replay enabled, recording 1% of all sessions
});

Clicks generated by record_heatmap_data are exempt from your plan data allowance. Clicks generated by Autocapture are billable events.

Using Heatmaps

From the Home page, find the Heatmaps section.

Choose a URL where you want to analyze user interactions and generate a Heatmap.

You can use wildcard selectors (*) in your URL to group multiple pages into a single heatmap. For example, if your URLs contain unique IDs like /products/123 and /products/456, you can use /products/* to analyze all product pages together.

To easily navigate back to a created Heatmap, you can click the title to rename the Heatmap.

Rotate through backdrops to view different states of your application for the same URL.

Use the Click Map and Heatmap toggles to show or hide each view. Click Maps help you see exactly which elements users click, which can clarify any inaccuracies in traditional heatmaps caused by dynamic page elements.
Click on any element in the Click Map to open a selection menu with three options:

View Events: View all click events recorded for this element
View Users: See a list of users who clicked this specific element
Review Replays: Watch session replays of users interacting with this element

Backdrops

Backdrops are snapshots of your application in various states (such as a modal open, a menu expanded, or different page layouts). Backdrops are pulled from session replays that match the URL you’re analyzing, helping you understand how different views or UI states affect user interactions.

Backdrops are subject to the same retention policies as your session replays. Once a session replay expires, it can no longer be used as a backdrop. If you don’t see enough backdrops (or can’t find the specific view or state you’re looking for), consider increasing your session replay sampling rate to capture a wider set of application states.

Session Replay Privacy Controls Features

Was this page useful?