Running an A/B Test
Last updated February 12, 2026
This workflow sets up an A/B test for a layout experiment, tracks results through Web Analytics, and cleans up afterward.
terminal
vercel flags add new-pricing-layout --kind boolean \
--description "A/B test: new pricing page layout"flags.ts
import { flag } from 'flags/next';
import { vercelAdapter } from '@flags-sdk/vercel';
export const newPricingLayout = flag({
key: 'new-pricing-layout',
adapter: vercelAdapter(),
});The flag returns false until you configure targeting in the dashboard.
app/pricing/page.tsx
import { newPricingLayout } from '../../flags';
export default async function PricingPage() {
const useNewLayout = await newPricingLayout();
return useNewLayout ? <NewPricing /> : <CurrentPricing />;
}Add the FlagValues component to your layout so Web Analytics can correlate page views and events with flag values automatically:
app/layout.tsx
import { Suspense } from 'react';
import { FlagValues } from 'flags/react';
import { newPricingLayout } from '../flags';
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<body>
{children}
<Suspense fallback={null}>
<FlagValues values={{ 'new-pricing-layout': await newPricingLayout() }} />
</Suspense>
</body>
</html>
);
}See Web Analytics integration for more on tracking flag values.
terminal
vercel deployVisit the preview URL to confirm both layouts render correctly. If you've set up the Flags Explorer, you can toggle the flag in the toolbar.
terminal
vercel deploy --prodEnable the flag in the Production environment in the dashboard to start serving the new layout to users. Monitor results in Web Analytics by comparing metrics per variant.
When you've picked a winner, clean up:
- Remove the flag from code and keep only the winning layout
- Archive the flag:
terminal
vercel flags archive new-pricing-layout --yesWas this helpful?