Keel Docs
Contributing

A/B Testing

How to run A/B tests on the marketing site using PostHog feature flags.

A/B Testing

We use PostHog feature flags for A/B testing on the marketing site. Feature flags are evaluated server-side in Next.js middleware for zero-flicker rendering.

Setting Up a Test

1. Create a Feature Flag in PostHog

  1. Go to PostHog dashboard → Feature Flags
  2. Create a new flag (e.g., hero-headline-test)
  3. Set the rollout percentage (e.g., 50/50 split)
  4. Add variant names (e.g., control, variant-a)

2. Evaluate in Middleware

// middleware.ts
import { PostHog } from 'posthog-node';

const posthog = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY!);

export async function middleware(request: NextRequest) {
  const distinctId = request.cookies.get('ph_id')?.value || crypto.randomUUID();

  const flag = await posthog.getFeatureFlag('hero-headline-test', distinctId);

  // Rewrite to variant page or pass flag via header
  const response = NextResponse.next();
  response.headers.set('x-hero-variant', flag as string);
  return response;
}

3. Read the Flag in Your Component

import { headers } from 'next/headers';

export default function HeroSection() {
  const headersList = headers();
  const variant = headersList.get('x-hero-variant');

  const headline = variant === 'variant-a'
    ? 'Quant Trading Made Simple'
    : 'Build. Backtest. Deploy.';

  return <h1>{headline}</h1>;
}

Measuring Results

  1. PostHog automatically tracks page views per variant
  2. Set up a conversion goal (e.g., sign-up button click)
  3. View results in PostHog → Experiments

Promoting a Winner

  1. Update the component to always use the winning variant
  2. Remove the feature flag check from middleware
  3. Archive the flag in PostHog

On this page

A/B TestingSetting Up a Test1. Create a Feature Flag in PostHog2. Evaluate in Middleware3. Read the Flag in Your ComponentMeasuring ResultsPromoting a Winner