I need to setup session replay in mixpanel using segment. we use segment’s next.js based library, i.e. analytics-next and use mixpanel as a destination (action). How do we setup session replay for such a setup.
Hi Makrand K., 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
To set up Mixpanel Session Replay when using Segment’s Next.js-based library (analytics-next) with Mixpanel as a destination, you must install and initialize the Mixpanel JavaScript SDK directly in your application. This is because Session Replay requires the Mixpanel SDK to be present client-side; simply forwarding events to Mixpanel via Segment’s Actions destination is not sufficient for capturing replays.Here’s how you can proceed:
1. Install the Mixpanel JavaScript SDK
Follow the Mixpanel Next.js integration guide to install the SDK and initialize it in your Next.js app. Make sure you use a recent version (v2.50.0 or later) to support Session Replay.
2. Enable Session Replay
When initializing the Mixpanel SDK, enable Session Replay by setting the record_sessions_percent option. For example, to record 1% of sessions: js import mixpanel from 'mixpanel-browser';LBKSmixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_TOKEN, { record_sessions_percent: 1 // Adjust as needed });LBKSSee details and options
3. Identity Management
Since you’re using Segment’s analytics-next, you’ll want to keep user/device IDs in sync between Segment and Mixpanel. However, the knowledge sources only provide detailed middleware examples for Segment’s analytics.js (not analytics-next). There is no explicit documentation for analytics-next middleware or for automatically propagating session replay properties from Segment to Mixpanel in a Next.js/analytics-next setup.What you can do:
- Ensure that Mixpanel’s SDK is initialized and running on the client.
- Use Segment’s identify and track calls as usual; these will be forwarded to Mixpanel as events.
- For best results, you may need to manually call mixpanel.identify() with the user ID when your app authenticates a user, to keep identities in sync.
4. Limitations
- Session Replay data is only captured by the Mixpanel SDK running in the browser. Events sent to Mixpanel via Segment’s Actions destination do not include replay data unless the Mixpanel SDK is present and configured on the client. - There is no official code sample for analytics-next middleware in the knowledge sources. If you need to propagate additional properties (like session replay IDs) from Mixpanel to Segment events, you may need to implement custom logic, but this is not documented for analytics-next.
Summary
- Install and initialize the Mixpanel JS SDK in your Next.js app. - Enable Session Replay via the record_sessions_percent option. - Keep user identities in sync by calling mixpanel.identify() when appropriate. - **Continue to use Segment’s analytics-next for event tracking; Mixpanel will receive events as a destination, but Session Replay requires the Mixpanel SDK to be present on the client.**For more details, see the official documentation: - Session Replay with a CDP - Next.js IntegrationIf you need more advanced identity or property propagation between Segment analytics-next and Mixpanel, you may need to consult Segment’s documentation or reach out to Mixpanel support, as the knowledge sources do not provide a direct solution for analytics-next middleware.
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.
