diff --git a/pages/docs/tracking-methods/sdks/javascript/javascript-replay.mdx b/pages/docs/tracking-methods/sdks/javascript/javascript-replay.mdx index f73d894236..16c4be6a0e 100644 --- a/pages/docs/tracking-methods/sdks/javascript/javascript-replay.mdx +++ b/pages/docs/tracking-methods/sdks/javascript/javascript-replay.mdx @@ -172,28 +172,34 @@ mixpanel.get_session_replay_url(); // https://mixpanel.com/projects/replay-redirect?replay_id=19307d78e24394fe15-0cd98d8fd9ad1d-1f525636-4b9600-19307d78e28194fe15&distinct_id=123&token=my-project-token ``` -## Heatmaps +## Heatmaps, Rage Clicks, and Dead Clicks (Web Only) -To supplement your Session Replay data, enable [Heatmaps](/docs/session-replay/heatmaps) data collection. The current Heatmap functions as a click map, tracking user interactions with individual site elements. +The `record_heatmap_data` option (Web only; not available on mobile) enables three types of interaction tracking during replay sessions: -Enable Heatmap data collection by setting `record_heatmap_data` to `true` during library initialization. +1. **Click events** - Captures user clicks to populate click heatmaps +2. **Rage clicks** - Captures multiple rapid clicks on the same element (`$mp_rage_click`) +3. **Dead clicks** - Captures clicks on unresponsive elements (`$mp_dead_click`) -Ensure Session Replay is enabled, as Heatmaps only collect data during sessions with recorded replays. If a page has limited replay coverage, the resulting Heatmap may provide limited or less meaningful insights. +These events are only captured when a session recording is in progress, and they are exempt from your plan data allowance. -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. +**Important:** Session Replay must be enabled for `record_heatmap_data` to work. Heatmaps only collect data during sessions with recorded replays. If a page has limited replay coverage, the resulting Heatmap may provide limited or less meaningful insights. **Example Usage** ```javascript Javascript mixpanel.init('YOUR_PROJECT_TOKEN', { record_sessions_percent: 1, // Session Replay must be enabled for Heatmap - record_heatmap_data: true // Enable Heatmap data collection + record_heatmap_data: true // Enable Heatmap, Rage Click, and Dead Click collection }); ``` -If you use [Autocapture](/docs/tracking-methods/autocapture) to track clicks, you can leverage these clicks to populate the Heatmaps without setting the `record_heatmap_data` option during library initialization. + + Events generated by `record_heatmap_data` (clicks, rage clicks, dead clicks) are exempt from your plan data allowance. + -Clicks captured by Autocapture are billable events that are counted against your plan data allowance. +### Alternative: Using Autocapture for Heatmaps + +If you use [Autocapture](/docs/tracking-methods/autocapture) to track clicks, you can leverage these clicks to populate Heatmaps without enabling `record_heatmap_data`. Autocapture also supports rage and dead click detection. **Example Usage** @@ -211,9 +217,7 @@ mixpanel.init('YOUR_PROJECT_TOKEN', { }); ``` - - Clicks generated by `record_heatmap_data` are exempt from your plan data allowance. Clicks generated by [Autocapture](/docs/tracking-methods/autocapture) are billable events. - +Clicks captured by Autocapture are billable events that are counted against your plan data allowance. ## Debugging