Skip to content

Conversation

Udit-takkar
Copy link
Contributor

@Udit-takkar Udit-takkar commented Jul 1, 2025

feat: Add PostHog booking funnel analytics and session replays

Fixes: https://linear.app/calcom/issue/CAL-6220/posthog-tracking
Fixes: #22971

Summary

This PR implements focused PostHog integration for Cal.com booking flows, replacing the previous comprehensive event tracking approach with targeted funnel analytics and session replays. The integration is controlled by a team-based feature flag (posthog-booking-tracking) and only activates for booking pages when enabled.

Key Changes:

  • Funnel Analytics: Track 4 critical booking steps: booking_started, form_filled, payment_initiated, booking_completed
  • Session Replays: Enable visual debugging for booking pages only when feature flag is active
  • Feature Flag Control: Team-based rollout with posthog-booking-tracking flag
  • Simplified Architecture: Removed complex distributed tracing in favor of focused event tracking
  • Privacy-First: Session recording only on booking flows, not site-wide

The implementation focuses on actionable insights for conversion optimization rather than comprehensive event logging, leveraging PostHog's built-in funnel analysis capabilities.

Review & Testing Checklist for Human

  • Test complete booking flow end-to-end to ensure no regressions in core booking functionality
  • Verify PostHog integration doesn't cause runtime errors when feature flag is enabled/disabled
  • Review session replay privacy settings and ensure sensitive data is properly masked
  • Test feature flag logic - confirm tracking only activates for teams with flag enabled
  • Validate funnel events fire correctly at each booking step (form fill, payment, completion)

Recommended Test Plan:

  1. Create a test team and enable posthog-booking-tracking feature flag
  2. Configure PostHog project key in environment
  3. Complete several test bookings while monitoring browser console and PostHog dashboard
  4. Test both successful and failed booking scenarios
  5. Verify session replays capture booking interactions without sensitive data exposure

Diagram

%%{ init : { "theme" : "default" }}%%
graph TB
    subgraph "Booking Flow"
        BookingPage["📄 Booking Page"]
        HandleNewBooking["packages/features/bookings/lib/handleNewBooking.ts"]:::major-edit
        UseBookings["packages/features/bookings/Booker/components/hooks/useBookings.ts"]:::major-edit
        EventManager["packages/lib/EventManager.ts"]:::minor-edit
    end
    
    subgraph "PostHog Integration"
        BookingProvider["packages/features/ee/event-tracking/lib/posthog/bookingProvider.tsx"]:::major-edit
        BookingProviderDynamic["packages/features/ee/event-tracking/lib/posthog/bookingProviderDynamic.tsx"]:::major-edit
        BookingEventTracker["packages/lib/posthog/bookingEventTracker.ts"]:::major-edit
        PostHogProvider["packages/features/ee/event-tracking/lib/posthog/provider.tsx"]:::minor-edit
    end
    
    subgraph "App Integration"
        AppProviders["apps/web/lib/app-providers-app-dir.tsx"]:::minor-edit
    end
    
    subgraph "Documentation"
        Docs["examples/posthog-booking-integration.md"]:::major-edit
    end
    
    subgraph "Cleanup"
        PaymentSuccess["packages/lib/payment/handlePaymentSuccess.ts"]:::minor-edit
        WebhookScheduler["packages/features/webhooks/lib/handleWebhookScheduledTriggers.ts"]:::minor-edit
        ScheduleTrigger["packages/features/webhooks/lib/scheduleTrigger.ts"]:::minor-edit
    end

    BookingPage --> AppProviders
    AppProviders --> BookingProviderDynamic
    BookingProviderDynamic --> BookingProvider
    BookingProvider --> PostHogProvider
    
    UseBookings --> BookingEventTracker
    HandleNewBooking --> BookingEventTracker
    
    BookingEventTracker --> PostHogProvider
    
    subgraph Legend
        L1["Major Edit"]:::major-edit
        L2["Minor Edit"]:::minor-edit
        L3["Context/No Edit"]:::context
    end

classDef major-edit fill:#90EE90
classDef minor-edit fill:#87CEEB
classDef context fill:#FFFFFF
Loading

Notes

  • Feature Flag Required: The posthog-booking-tracking feature flag must be created and enabled for teams before this integration will activate
  • PostHog Project Key: A valid PostHog project key must be configured in environment variables for tracking to work
  • Privacy Considerations: Session replays are configured to mask sensitive form inputs, but should be reviewed for compliance
  • Performance Impact: Minimal - tracking only activates for booking pages with feature flag enabled
  • Backward Compatibility: Existing logging and error handling remain unchanged

Session Details:

Testing Screenshots:
Local Development Server Running

- Add PostHogBookingTracker for client and server-side event tracking
- Integrate tracking into booking creation, calendar events, payments, webhooks
- Add comprehensive event properties for debugging and analytics
- Create PostHog dashboard queries and integration documentation
- Enable monitoring of booking conversion funnel and error tracking

Co-Authored-By: udit@cal.com <udit222001@gmail.com>
Copy link
Contributor

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

Copy link

vercel bot commented Jul 1, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments
Name Status Preview Comments Updated (UTC)
cal ⬜️ Ignored (Inspect) Visit Preview Jul 2, 2025 9:14am
cal-eu ⬜️ Ignored (Inspect) Visit Preview Jul 2, 2025 9:14am

@keithwillcode keithwillcode added core area: core, team members only enterprise area: enterprise, audit log, organisation, SAML, SSO labels Jul 1, 2025
Copy link

delve-auditor bot commented Jul 1, 2025

No security or compliance issues detected. Reviewed everything up to b0697f4.

Security Overview
  • 🔎 Scanned files: 10 changed file(s)
Detected Code Changes

The diff is too large to display a summary of code changes.

Reply to this PR with @delve-auditor followed by a description of what change you want and we'll auto-submit a change to this PR to implement it.

- Add BookingPostHogProvider with team-based feature flag control
- Implement simplified funnel tracking for 4 key booking steps:
  - booking_started: Initial booking attempt
  - form_filled: User completes booking form
  - payment_initiated: Payment process begins
  - booking_completed: Successful booking creation
- Enable session replays only for booking pages when feature flag active
- Remove complex distributed event tracking in favor of focused analytics
- Add comprehensive documentation for setup and usage
- Maintain backward compatibility with existing logging systems

Behind feature flag: posthog-booking-tracking

Co-Authored-By: udit@cal.com <udit222001@gmail.com>
Copy link
Contributor

This PR is being marked as stale due to inactivity.

@github-actions github-actions bot added the Stale label Jul 17, 2025
Copy link
Contributor

coderabbitai bot commented Jul 17, 2025

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.


🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

linear bot commented Aug 8, 2025

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
core area: core, team members only enterprise area: enterprise, audit log, organisation, SAML, SSO Stale
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Posthog tracking
2 participants