Intermediate
How to set up a b testing workflow on Vercel
Quick Answer
Set up A/B testing on Vercel by creating feature flags in your dashboard, implementing conditional rendering in your code, and configuring audience targeting. Vercel's Edge Config and Analytics provide the infrastructure to run experiments and measure results effectively.
Prerequisites
- Vercel account and project deployed
- Basic understanding of React/Next.js
- Git repository connected to Vercel
- Node.js and npm installed locally
1
Enable Edge Config for Feature Flags
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.Tip
Edge Config provides ultra-low latency access to your feature flags from edge functions worldwide.
2
Configure Environment Variables
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.Tip
Set different Edge Config databases for staging and production to test experiments safely.
3
Install Required Dependencies
In your local project, install the necessary packages:
The
npm install @vercel/edge-config @vercel/analyticsThe
@vercel/edge-config package allows you to read feature flags, while @vercel/analytics helps track conversion events for your experiments.4
Create A/B Testing Utility Functions
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);
}Tip
Use a consistent user ID (like session ID or user ID) to ensure users always see the same variant.
5
Implement A/B Test in Your Components
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>
);
}Tip
Always track both the variant and experiment name in your analytics events for proper analysis.
6
Set Up Edge Function for User Assignment
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;
}Tip
Middleware runs at the edge, ensuring fast A/B test assignment before page rendering.
7
Configure Your Experiment in Edge Config
Go back to your Vercel dashboard, open your Edge Config database, and click Add Item. Set the key as
Click Save to activate your experiment with 50% traffic allocation.
homepage-cta and value as:{
"enabled": true,
"percentage": 50,
"description": "Test CTA button text"
}Click Save to activate your experiment with 50% traffic allocation.
Tip
Start with a small percentage (10-20%) and gradually increase as you gain confidence in your experiment.
8
Monitor Results and Analyze Data
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.
Tip
Wait for statistical significance before concluding experiments - typically requires at least 100 conversions per variant.
Troubleshooting
Edge Config returns null values
Check that your
EDGE_CONFIG environment variable is correctly set and that you've deployed your project after adding the variable.Users seeing different variants on page refresh
Ensure you're using a consistent user identifier in cookies and that your middleware is properly setting the
user-id cookie.Analytics events not appearing
Verify that
@vercel/analytics is properly imported and initialized. Check that you're calling track() with the correct event name and properties.Experiment not running in production
Make sure your Edge Config is connected to the production environment and that the experiment is enabled with
"enabled": true in your configuration.Ready to get started with Vercel?
Put this tutorial into practice. Visit Vercel and follow the steps above.
Visit Vercel →