Heatmaps (Beta)

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.

Our initial version of Heatmaps is a click map, which means it specifically tracks clicks on individual site elements rather than just overlaying general activity on a page. This provides more precise insights into which modals, dropdowns, or features that users engage with the most. Future versions 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.

Implementation

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

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.

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
});

Using Heatmaps

1. From the Home page, find the Heatmaps section

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

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