From f018fb55c27091617e12e424b4c77ad6a59c41a3 Mon Sep 17 00:00:00 2001 From: Tyler Goerzen Date: Wed, 18 Mar 2026 15:54:02 -0700 Subject: [PATCH] feat(mixpanel-skill): add session replay prompt to Quick Start and Full Greenfield flows MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds a session replay nudge at the right moment in both implementation paths — after Live View verification, when the customer has confidence that events are flowing and is still in the init config mindset. Changes: - skill.md: Session replay offer added after Step 7 (Quick Start) and after Live View QA gate (Full Greenfield Phase 6). Includes client-side guard, default-masking reassurance, regulated-industry caveat (healthcare, fintech), and JS/Swift/Kotlin snippets. Both wrap-up sections (Step 8, Phase 8) now include a session replay verification step. - reference.md: New Session Replay section under SDK Implementation Guide with per-platform enable snippets, record_block_selector usage, privacy defaults, regulated-industry guidance, and verification steps. Co-Authored-By: Claude Sonnet 4.6 --- public/mixpanel-skill/reference.md | 50 ++++++++++++++++++++ public/mixpanel-skill/skill.md | 74 ++++++++++++++++++++++++++++++ 2 files changed, 124 insertions(+) diff --git a/public/mixpanel-skill/reference.md b/public/mixpanel-skill/reference.md index 97237eed51..4c0b059892 100644 --- a/public/mixpanel-skill/reference.md +++ b/public/mixpanel-skill/reference.md @@ -1470,6 +1470,56 @@ After deploying a new event (or batch), verify it is flowing correctly beyond a If you have access to a segmentation or query tool (e.g. Run-Segmentation-Query, Get-Property-Values), use it to confirm event volume and property value distribution. Otherwise, direct the customer to Mixpanel Reports and Lexicon to run these checks. +### Session Replay + +Session Replay records real user sessions alongside event data. It is off by default and enabled via a single init config option. Only offer this for client-side platforms (Web JS, iOS, Android, React Native) — it does not apply to server-side SDKs. + +**Enabling (per platform):** + +```js +// JavaScript (Browser) +mixpanel.init('YOUR_PROJECT_TOKEN', { + // ... existing config ... + record_sessions_percent: 100, // 0–100; start at 100 to verify, reduce later if needed +}) +``` + +```swift +// iOS (Swift) +Mixpanel.initialize(token: "YOUR_PROJECT_TOKEN", trackAutomaticEvents: true) +Mixpanel.mainInstance().sessionReplayProperties = ["record_sessions_percent": 100] +``` + +```kotlin +// Android (Kotlin) +val mixpanel = MixpanelAPI.getInstance(context, "YOUR_PROJECT_TOKEN", true) +mixpanel.startSessionRecording() +``` + +```tsx +// React Native — add to MixpanelProvider config + +``` + +**Privacy defaults:** All text content and form inputs are masked by default (`[****]`). Images and videos are blocked. These defaults cannot be overridden for password, email, tel, and hidden input types. + +**Selective blocking (sensitive screens):** Use `record_block_selector` to completely exclude a screen or element from recording: + +```js +mixpanel.init('YOUR_PROJECT_TOKEN', { + record_sessions_percent: 100, + record_block_selector: '.sensitive-screen, #checkout, #patient-records', +}) +``` + +**Regulated industries (healthcare, fintech, and similar):** Session Replay carries higher compliance risk even with default masking. Direct the customer to review their privacy notice with legal counsel before enabling. Use `record_block_selector` to exclude any screens with PHI, PII, or financial data. + +**Verification:** After enabling, open the Session Replay tab in Mixpanel and trigger a user flow. Recordings appear within ~1 minute of the session ending. If no recordings appear, confirm the init config is present and running on the client side (not server-rendered without hydration). + +**Notes:** +- Session Replay and Autocapture are independent — disabling one does not affect the other. +- `record_sessions_percent: 100` records all sessions. Reduce this value (e.g. to `10`) if volume or cost becomes a concern after initial validation. + --- #### JavaScript (Browser) diff --git a/public/mixpanel-skill/skill.md b/public/mixpanel-skill/skill.md index 4a5b48fbcb..0b5bd75134 100644 --- a/public/mixpanel-skill/skill.md +++ b/public/mixpanel-skill/skill.md @@ -331,6 +331,42 @@ This is an offer, not a gate. The user decides. **Do not proceed to "what's next" until at least one event is confirmed in Live View.** +**Session Replay — offer this for client-side platforms only (Web JS, iOS, Android, React Native). Skip for server-side implementations.** + +Once at least one event is confirmed in Live View, ask: + +> "Events are flowing — nice. While we're here, want to turn on Session Replay? It lets you watch real user sessions alongside your event data, and it takes one line. All text and form inputs are masked by default, so it's privacy-safe out of the box. Most teams find it valuable early — it shows exactly where users drop off before you have enough data for statistical significance in funnels. +> +> Just add `record_sessions_percent: 100` to your `mixpanel.init()` call. Start at 100% while verifying, then dial it down if volume becomes a cost concern." + +If the customer mentioned healthcare, fintech, or another regulated industry (from Pre-Flight research or earlier in the conversation), add: + +> "One caveat for your industry: Session Replay carries higher compliance risk even with default masking. Before turning it on, review your privacy notice with legal counsel. You can also use `record_block_selector` to exclude specific screens — like checkout, profile pages, or any screen with sensitive data — from ever being recorded." + +If enabling: + +```js +// JavaScript +mixpanel.init('YOUR_PROJECT_TOKEN', { + // ... existing config ... + record_sessions_percent: 100, // 0–100; start at 100 to verify, reduce later if needed +}) +``` + +```swift +// iOS (Swift) +Mixpanel.initialize(token: "YOUR_PROJECT_TOKEN", trackAutomaticEvents: true) +Mixpanel.mainInstance().sessionReplayProperties = ["record_sessions_percent": 100] +``` + +```kotlin +// Android (Kotlin) +val mixpanel = MixpanelAPI.getInstance(context, "YOUR_PROJECT_TOKEN", true) +mixpanel.startSessionRecording() +``` + +Note: Session Replay and Autocapture are independent — disabling one does not affect the other. + ### Developer Handoff Spec Generation (No Codebase Access Mode) **When to use:** User went through Quick Start discovery and planning but doesn't have codebase access (marked with `handoff_mode: true` at Codebase Access Check). @@ -393,6 +429,7 @@ Present prioritized next steps: 3. **Dev/prod project split** — Create a separate dev project before sending production traffic 4. **Analytics strategy** — Define KPIs and measurement framework (RAE framework available) 5. **Data governance** — Set up Lexicon, Data Standards, and Event Approval as you scale +6. **Session Replay** (if enabled) — Open the Session Replay tab in Mixpanel and confirm recordings are appearing. If no sessions appear after triggering user flows, check that `record_sessions_percent` is set and the init call is running on the client side. **If Developer Handoff Spec was generated (no codebase access path):** @@ -777,6 +814,42 @@ Place each `track()` call as close to the triggering action as possible — in t **Post-deploy verification (after each new event or batch):** Beyond Live View, confirm the event appears in Reports for the expected date range (e.g. run a segmentation or Insights query filtered by the event name and today's date). Check that key properties are populating with expected values. Event and property names are case-sensitive — zero results often mean a typo or casing mismatch. See `reference.md § Phase 8 — Post-Deploy Verification` for details. +**Session Replay — offer this for client-side platforms only (Web JS, iOS, Android, React Native). Skip for server-side implementations.** + +Now that events are confirmed flowing in Live View, offer Session Replay: + +> "Events are live — nice work. Want to turn on Session Replay while we're in the init config? It lets you watch real user sessions alongside your event data, and it takes one line. All text and form inputs are masked by default, so it's privacy-safe out of the box. Most teams wish they'd enabled it earlier. +> +> Add `record_sessions_percent: 100` to your `mixpanel.init()` call. Start at 100% to verify it's working, then reduce the sample rate later if volume becomes a cost concern." + +If the customer mentioned healthcare, fintech, or another regulated industry in Phase 0, add: + +> "One caveat for your industry: Session Replay carries higher compliance risk even with default masking. Before enabling, review your privacy notice with legal counsel. You can also use `record_block_selector` to exclude specific screens — like checkout, profile pages, or anything with sensitive data — from ever being recorded." + +If enabling: + +```js +// JavaScript +mixpanel.init('YOUR_PROJECT_TOKEN', { + // ... existing config ... + record_sessions_percent: 100, // 0–100; start at 100 to verify, reduce later if needed +}) +``` + +```swift +// iOS (Swift) +Mixpanel.initialize(token: "YOUR_PROJECT_TOKEN", trackAutomaticEvents: true) +Mixpanel.mainInstance().sessionReplayProperties = ["record_sessions_percent": 100] +``` + +```kotlin +// Android (Kotlin) +val mixpanel = MixpanelAPI.getInstance(context, "YOUR_PROJECT_TOKEN", true) +mixpanel.startSessionRecording() +``` + +Note: Session Replay and Autocapture are independent — disabling one does not affect the other. + **Output of this phase:** All tracking and initialization code written and placed in the codebase. At least one event confirmed arriving in Mixpanel Live View. Customer ready to wire up identity calls. ### Phase 7 — Identity Management @@ -930,6 +1003,7 @@ Next steps: - Add Lexicon descriptions for every event - Enable Data Standards and Event Approval in Project Settings - Schedule quarterly governance reviews +- (If Session Replay was enabled) Open the Session Replay tab in Mixpanel and confirm recordings are appearing. If none appear after triggering user flows, verify `record_sessions_percent` is set in the init call and the SDK is running client-side. **Output of this phase:** Lexicon populated, Data Standards enabled, Event Approval enabled, governance roles named and documented, `AGENTS.md` created. Implementation complete.