tell me more about heatmap and how to use it
tell me more about heatmap and how to use it
tell me more about heatmap and how to use it
Hi Bradley A., Please stand by as I search the Mixpanel knowledge base for an AI-powered answer. I normally take about 15 seconds or so. In case AI cannot answer your question, feel free to reach out to Mixpanel support at mixpanel.com/get-support. If you have follow-up questions for this thread, please tag me again with your question: @kapa.ai <follow-up question> 👋
Feel free to ask a follow-up question once I've answered by mentioning me with @kapa.ai
Heatmaps in Mixpanel are visual tools that help you understand where users interact most on your web application. They use color gradients (from green to red) to show areas of high and low engagement, making it easy to spot which parts of your page attract the most clicks or attention. This can help you identify opportunities for optimization, such as moving important elements to more prominent locations or fixing confusing UI components.
Types of Heatmaps
Mixpanel offers two main types of heatmaps (currently in private beta): 1. Click Maps: Track clicks on individual site elements, showing exactly which buttons, links, or features users engage with the most. 2. Traditional Heatmaps: Overlay general activity based on X,Y coordinates, providing a broader view of interaction patterns across the page. Note that these may be less accurate on dynamic pages with modals or changing layouts, so click maps can help clarify specific element interactions Heatmaps for Web (Beta).
How to Use Heatmaps in Mixpanel
1. Enable Session Replay and Heatmap Data Collection
Heatmaps rely on Session Replay data. You must enable Session Replay and set the record_heatmap_data option to true during Mixpanel SDK initialization. For example:
js
mixpanel.init('YOUR_PROJECT_TOKEN', {
record_sessions_percent: 1, // Enable Session Replay for 1% of sessions
record_heatmap_data: true // Enable Heatmap data collection
});
```LBKS Alternatively, if you use Autocapture to track clicks, you can populate heatmaps with those events, but note that Autocapture clicks are billable, while clicks from `record_heatmap_data` are not [Heatmaps for Web (Beta)](https://docs.mixpanel.com/docs/session-replay/heatmaps).LBKS2. **Accessing and Analyzing Heatmaps**
- From the Mixpanel Home page, go to the Heatmaps section.
- Choose a URL to analyze. You can use wildcards (e.g., `/products/*`) to group similar pages.
- Rotate through different "backdrops" to view various states of your application (like modals open/closed).
- Use toggles to switch between Click Map and Heatmap views.
- Click on any element in the Click Map to:
- View all click events for that element
- See a list of users who clicked it
- Watch session replays of those interactions [Using Heatmaps](https://docs.mixpanel.com/docs/session-replay/heatmaps#using-heatmaps).
Limitations
- Heatmaps only capture data during sessions with recorded replays. If replay coverage is limited, insights may be less meaningful. - Heatmaps show what users are doing, but not why—for deeper analysis, combine them with session replays to see the full user journey Drawbacks of heat maps.
Availability
Mixpanel’s heatmaps are currently in private, closed beta. For access, contact your Account Manager Heatmaps for Web (Beta).---In summary, Mixpanel heatmaps are powerful for visualizing user engagement and identifying areas for improvement, especially when combined with session replays for a complete picture of user behavior.
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.
We use segment to track. Do I need to follow the same instructions?
kapa.ai We use segment to track. Do I need to follow the same instructions?
Let me check the knowledge base for you again. One moment! 📚
If you use Segment to track data, you cannot rely solely on Segment to enable Mixpanel Heatmaps and Session Replay. You must still install the Mixpanel JavaScript SDK directly in your application and enable Session Replay and Heatmap data collection there. Segment alone does not capture the session replay or heatmap data required by Mixpanel.**Key steps:**1. Install the Mixpanel JavaScript SDK in your app, even if Segment is already present. 2. Enable Session Replay and Heatmap by initializing the SDK with the appropriate options:
js
mixpanel.init('YOUR_PROJECT_TOKEN', {
record_sessions_percent: 1, // Enable Session Replay
record_heatmap_data: true // Enable Heatmap data collection
});
```LBKS3. **Connect Segment and Mixpanel**:
To keep user identity and event data in sync between Segment and Mixpanel, you should add middleware to Segment’s SDK. This ensures that user/device IDs and session replay properties are properly linked. Here’s an example middleware snippet:
js analytics.addSourceMiddleware(({ payload, next, integrations }) => { if (payload.obj.type === 'track' || payload.obj.type === 'page') { if (window.mixpanel) { const segmentDeviceId = payload.obj.anonymousId; // Choose the correct ID management version for your setup: mixpanel.register({ $device_id: segmentDeviceId, distinct_id: segmentDeviceId }); // or for simplified ID merge: // mixpanel.register({ $device_id: segmentDeviceId, distinct_id: "$device:" + segmentDeviceId }); const sessionReplayProperties = mixpanel.get_session_recording_properties(); payload.obj.properties = { ...payload.obj.properties, ...sessionReplayProperties }; } } if (payload.obj.type === 'identify') { if (window.mixpanel) { const userId = payload.obj.userId; mixpanel.identify(userId); } } next(payload); });
Even if you use Segment, you must install and initialize the Mixpanel SDK with Session Replay and Heatmap options in your app. Segment alone does not provide the necessary data for these features. Middleware is needed to sync identity and event data between Segment and Mixpanel for accurate analysis.LBKSFor more details, see the official documentation on [Session Replay with a CDP](https://docs.mixpanel.com/docs/session-replay/implement-session-replay/session-replay-web#session-replay-with-a-cdp).
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.