When to use rollout for A/B

Rollout flags are ideal for simple product experiments where you want to expose a variant to a percentage of users and measure the impact.

For complex statistical tests with multiple variants and conversion analysis, consider dedicated A/B testing tools integrated via webhook.

Basic setup

1. Create the flag

In the dashboard: New Flag → Type: Rollout with key experiment-new-cta.

Configure it to 50% — half the users will see the new variant.

2. Implement in code

const client = new CanaryGate(process.env.CANARYGATE_KEY!, {
  userId: user.id // Essential: stable userId for stickiness
})
await client.init()
 
const showNewCta = client.getFlag('experiment-new-cta')?.enabled ?? false

3. Render based on the variant

function HeroSection({ userId }: { userId: string }) {
  const showNewCta = client.getFlag('experiment-new-cta')?.enabled ?? false
 
  return (
    <section>
      <h1>Welcome</h1>
      {showNewCta ? (
        <Button>Get started — free</Button> // Variant B
      ) : (
        <Button>Create account</Button> // Variant A (control)
      )}
    </section>
  )
}

4. Measure the impact

Send the user’s group along with your analytics events:

const variant = client.getFlag('experiment-new-cta')?.enabled ? 'B' : 'A'
 
analytics.track('cta_clicked', {
  userId: user.id,
  variant,
  page: 'home'
})

Stickiness

The most important property for A/B is stickiness: the same user always sees the same variant. CanaryGate guarantees this through the deterministic hash of userId + flagKey.

Ending the experiment

When the test is done:

1. Choose the winner
2. If variant B won → set variant B’s code as the default and remove the flag
3. If variant A won → remove the flag without changing the default code