How to set up a b testing workflow on Vercel

Navigate to your Vercel dashboard and select your project. Go to Storage tab and click Create Database. Choose Edge Config and name it something like ab-testing-config. Click Create to set up your feature flag storage that will control your A/B tests.

In your project settings, go to Environment Variables. Add EDGE_CONFIG with the connection string from your Edge Config database. Also add VERCEL_ENV to distinguish between preview and production environments. Click Save to apply the changes.

In your local project, install the necessary packages:

npm install @vercel/edge-config @vercel/analytics

The @vercel/edge-config package allows you to read feature flags, while @vercel/analytics helps track conversion events for your experiments.

Create a new file lib/ab-testing.js and add:

import { get } from '@vercel/edge-config';

export async function getVariant(experimentId, userId) {
  const experiment = await get(experimentId);
  if (!experiment?.enabled) return 'control';
  
  const hash = simpleHash(userId + experimentId);
  return hash % 100 < experiment.percentage ? 'variant' : 'control';
}

function simpleHash(str) {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    hash = ((hash << 5) - hash + str.charCodeAt(i)) & 0xffffffff;
  }
  return Math.abs(hash);
}

Update your React component to use the A/B testing logic:

import { getVariant } from '../lib/ab-testing';
import { track } from '@vercel/analytics';

export default function HomePage({ variant, userId }) {
  const handleConversion = () => {
    track('conversion', { variant, experiment: 'homepage-cta' });
  };

  return (
    <div>
      {variant === 'variant' ? (
        <button onClick={handleConversion}>Try Free Now</button>
      ) : (
        <button onClick={handleConversion}>Get Started</button>
      )}
    </div>
  );
}

Create middleware.js in your project root:

import { NextResponse } from 'next/server';
import { getVariant } from './lib/ab-testing';

export async function middleware(request) {
  const userId = request.cookies.get('user-id')?.value || crypto.randomUUID();
  const variant = await getVariant('homepage-cta', userId);
  
  const response = NextResponse.next();
  response.cookies.set('user-id', userId);
  response.cookies.set('ab-variant', variant);
  
  return response;
}

Go back to your Vercel dashboard, open your Edge Config database, and click Add Item. Set the key as homepage-cta and value as:

{
  "enabled": true,
  "percentage": 50,
  "description": "Test CTA button text"
}

Click Save to activate your experiment with 50% traffic allocation.

Deploy your changes and go to Analytics in your Vercel dashboard. Set up custom events to track conversions and view the Events tab to see how each variant performs. Use the data to determine statistical significance and make decisions about rolling out the winning variant.