Running an A/B test
This workflow sets up a multi-variant layout experiment, tracks results through Web Analytics, and cleans up afterward.
vercel flags create new-pricing-layout --kind string \
--description "A/B test: new pricing page layout" \
--variant control="Current layout" --variant treatment="New layout"import { flag } from 'flags/next';
import { vercelAdapter } from '@flags-sdk/vercel';
export const newPricingLayout = flag<'control' | 'treatment'>({
key: 'new-pricing-layout',
adapter: vercelAdapter(),
});The flag returns one of the variants you created in the CLI, in this case control or treatment. If you want to rename a variant later, use vercel flags update.
import { newPricingLayout } from '../../flags';
export default async function PricingPage() {
const layoutVariant = await newPricingLayout();
return layoutVariant === 'treatment' ? <NewPricing /> : <CurrentPricing />;
}Add the FlagValues component to your layout so Web Analytics can correlate page views and events with flag values automatically:
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.
vercel deployUse vercel flags set to switch the preview environment between variants while you test:
vercel flags set new-pricing-layout --environment preview --variant control \
--message "Verify the control layout in preview"vercel flags set new-pricing-layout --environment preview --variant treatment \
--message "Verify the treatment layout in preview"Visit the preview URL after each change to confirm both layouts render correctly. If you've set up the Flags Explorer, you can still use it for local overrides.
Use vercel flags open to jump to the flag in the dashboard:
vercel flags open new-pricing-layoutIn the dashboard, configure the targeting rule that splits production traffic between the control and treatment variants.
vercel deploy --prodMonitor results in Web Analytics by comparing metrics for the control and treatment variants.
When you've picked a winner, clean up:
- Remove the flag from code and keep only the winning layout
- Archive the flag:
vercel flags archive new-pricing-layout --yesWas this helpful?