🧪 Complete A/B Testing Demo

Demonstrating Phases 1-4: Core + Server + Client + Analytics

📡 Phase 2: Server-Side Detection (SSR)

Middleware assigned variant: This happens on the server BEFORE React renders

✓ Middleware ran at: 2026-03-25T18:07:21.449Z
✓ Server detected variant: none
✓ Cookie was set in middleware
✓ Available in getServerSideProps via isVariantServer()

View Server Code

export const getServerSideProps = withAbTesting(async (context) => {
  // Access variant server-side
  const variant = getVariantServer(context.req, 'example')
  
  // Can use for:
  // - Conditional data fetching
  // - Server-side analytics
  // - Redirects
  // - SEO optimization
  
  return {
    props: {
      serverDetectedVariant: variant,
      timestamp: new Date().toISOString()
    }
  }
})

⚛️ Phase 3: Client-Side Hooks (React)

useAbTest hook: Components can access A/B tests directly, no prop drilling!

⏳ Loading (hydration in progress)...

View Component Code

function MyComponent() {
  const { variant, isVariant, loading } = useAbTest('example')
  
  if (loading) return <Skeleton />
  
  return isVariant('variant') ? (
    <NewExperience />
  ) : (
    <OriginalExperience />
  )
}

📊 Phase 4: Analytics Tracking (GTM)

Automatic tracking to Google Tag Manager for data analysis:

✅ Auto-tracked Events:

ab_test_assignment - Fires when user gets assigned to a variant (automatic)
ab_test_conversion - Fires when user completes a goal (manual)

Try Conversion Tracking:

View Analytics Code

// 1. Automatic assignment tracking (happens in AbProvider)
// When user gets assigned to a variant, event fires automatically:
// {
//   event: 'ab_test_assignment',
//   ab_test_name: 'example',
//   ab_test_variant: 'control'
// }

// 2. Manual conversion tracking
import { useAbConversion } from '@/common/hooks/useAbConversion'

function MyComponent() {
  const trackConversion = useAbConversion('example')
  
  const handleSignup = async () => {
    await submitSignupForm()
    trackConversion('signup') // Track the conversion
  }
  
  const handlePurchase = async () => {
    const amount = await processPurchase()
    trackConversion('purchase', amount) // Track with value
  }
  
  return (
    <>
      <button onClick={handleSignup}>Sign Up</button>
      <button onClick={handlePurchase}>Purchase</button>
    </>
  )
}

💡 In Production:

Events automatically flow to Google Analytics
Analyze conversion rates by variant
Calculate statistical significance
Make data-driven decisions

🎨 Conditional Rendering Example

📊 Control Experience

You're seeing the ORIGINAL version of the page.

Classic layout
Standard colors
Familiar experience

🪆 No Prop Drilling Demo

Deeply nested components can access A/B tests without passing props:

Parent Component

(doesn't know about A/B tests)

Middle Component

(also doesn't know about A/B tests)

Deep Nested Component

✅ Can access A/B test directly with useAbTest()

Current variant: 

🛠️ Developer Tools

Manual overrides for testing and debugging:

View Code

const { overrideTest } = useAbContext()

// Override a test variant
overrideTest('example', 'variant')

// Cookie is automatically updated
// Components re-render with new variant

🔗 Query Parameter Overrides

URL parameters automatically override variants (set by middleware):

?ab_example=control - Force control version
?ab_example=variant - Force variant version
- Clear override (random assignment)

✓ Middleware parses ab_* query params

✓ Validates variant against config

✓ Updates cookie if valid

✓ Works on every page automatically

📊 Current State

Server Assignments

From getServerSideProps (Phase 2)

{
  "edge_ai_exit_intent": "variant"
}

Client Assignments

From AbContext (Phase 3)

{
  "edge_ai_exit_intent": "variant"
}

💡 Note: These should be identical! Server sets the cookie, client reads it. This proves the full-stack integration is working.