Skip to Content
PlatformVariations

Variations

Variations extend feature flags beyond simple on/off switches, enabling A/B testing, multi-variant experiments, and dynamic configuration management.

What Are Variations?

Variations allow you to assign different values to users based on targeting rules. Instead of just true/false, you can assign any value: strings, numbers, JSON objects, or custom variants.

// Simple variation usage
const variant = getFeatureVariation('button-color', user)
// Returns: 'blue', 'green', 'red', etc.
 
switch (variant) {
  case 'blue':
    return <BlueButton />
  case 'green':
    return <GreenButton />
  case 'red':
    return <RedButton />
  default:
    return <DefaultButton />
}

Types of Variations

1. A/B Testing Variations

Compare two versions of a feature.

// A/B test for pricing
const variant = getFeatureVariation('pricing-test', user)
 
if (variant === 'control') {
  showOriginalPricing()
} else if (variant === 'variant-a') {
  showDiscountedPricing()
}

2. Multi-Variant Experiments

Test multiple versions simultaneously.

// Multi-variant test
const variant = getFeatureVariation('onboarding-flow', user)
 
switch (variant) {
  case 'control':
    return <OriginalOnboarding />
  case 'variant-a':
    return <ShortOnboarding />
  case 'variant-b':
    return <VideoOnboarding />
  case 'variant-c':
    return <InteractiveOnboarding />
  default:
    return <OriginalOnboarding />
}

3. Configuration Variations

Dynamic configuration values.

// Dynamic configuration
const maxRetries = getFeatureVariation('max-retries', user)
const timeout = getFeatureVariation('api-timeout', user)
const theme = getFeatureVariation('app-theme', user)
 
// Use the values
apiClient.setTimeout(timeout)
apiClient.setMaxRetries(maxRetries)
app.setTheme(theme)

4. Content Variations

Dynamic content delivery.

// Content variations
const welcomeMessage = getFeatureVariation('welcome-message', user)
const buttonText = getFeatureVariation('cta-button-text', user)
 
return (
  <div>
    <h1>{welcomeMessage}</h1>
    <button>{buttonText}</button>
  </div>
)

Creating Variations

In the Dashboard

  1. Navigate to Features in your DarkFeature dashboard
  2. Click “Create Feature”
  3. Choose “Variation” as the type
  4. Define your variants:
    • Control: "original"
    • Variant A: "new-design"
    • Variant B: "minimal-design"

Variation Configuration

{
  "name": "button-design-test",
  "type": "variation",
  "variants": {
    "control": {
      "value": "original",
      "weight": 25
    },
    "variant-a": {
      "value": "new-design",
      "weight": 25
    },
    "variant-b": {
      "value": "minimal-design",
      "weight": 25
    },
    "variant-c": {
      "value": "bold-design",
      "weight": 25
    }
  },
  "targeting": {
    "rules": [
      {
        "attribute": "user.country",
        "operator": "in",
        "value": ["US", "CA", "UK"]
      }
    ]
  }
}

A/B Testing with Variations

Setting Up an A/B Test

// Define your experiment
const experiment = {
  name: 'pricing-page-test',
  variants: ['control', 'variant-a', 'variant-b'],
  metrics: ['conversion-rate', 'revenue-per-user'],
  duration: '2 weeks',
}
 
// Track experiment exposure
df.track('experiment-exposed', {
  experiment: 'pricing-page-test',
  variant: variant,
  userId: user.userId,
})

Measuring Results

// Track conversion events
df.track('conversion', {
  experiment: 'pricing-page-test',
  variant: variant,
  userId: user.userId,
  revenue: 99.99,
  timestamp: Date.now(),
})

Statistical Significance

// Check if results are statistically significant
const results = await df.getExperimentResults('pricing-page-test')
 
if (results.isSignificant) {
  console.log(`Winner: ${results.winner}`)
  console.log(`Confidence: ${results.confidence}%`)
} else {
  console.log('Need more data for statistical significance')
}

Advanced Variation Strategies

Progressive Rollout

// Gradually increase variant exposure
const rolloutPercentage = getFeatureVariation('rollout-percentage', user)
 
if (rolloutPercentage <= 10) {
  // 10% of users see new variant
  return <NewVariant />
} else {
  // 90% see control
  return <ControlVariant />
}

User Segmentation

// Different variants for different user segments
const userSegment = getUserSegment(user)
const variant = getFeatureVariation('personalized-content', {
  ...user,
  segment: userSegment,
})
 
switch (variant) {
  case 'new-user':
    return <NewUserContent />
  case 'returning-user':
    return <ReturningUserContent />
  case 'premium-user':
    return <PremiumUserContent />
  default:
    return <DefaultContent />
}

Geographic Variations

// Location-based variations
const variant = getFeatureVariation('localized-content', {
  ...user,
  country: user.country,
  language: user.language,
})
 
// Different content for different regions
if (variant === 'us-english') {
  return <USEnglishContent />
} else if (variant === 'uk-english') {
  return <UKEnglishContent />
} else if (variant === 'spanish') {
  return <SpanishContent />
}

Best Practices

Variant Naming

// ✅ Good naming
'control'
'variant-a'
'variant-b'
'new-design'
'minimal-layout'
 
// ❌ Avoid
'v1'
'test'
'new'
'better'

Weight Distribution

// Equal distribution (recommended for A/B tests)
{
  "control": { "weight": 25 },
  "variant-a": { "weight": 25 },
  "variant-b": { "weight": 25 },
  "variant-c": { "weight": 25 }
}
 
// Unequal distribution (for gradual rollouts)
{
  "control": { "weight": 90 },
  "variant-a": { "weight": 10 }
}

Statistical Significance

// Ensure adequate sample size
const minSampleSize = 1000 // per variant
const experimentDuration = '2 weeks'
 
// Monitor statistical significance
const results = await df.getExperimentResults('my-test')
if (results.sampleSize < minSampleSize) {
  console.log('Need more data')
}

Cleanup Strategy

// Remove old variants after experiment
if (variant === 'deprecated-variant') {
  // Fallback to control
  return <ControlVariant />
}

Performance Considerations

Caching Variations

// Variations are cached like flags
const variant = await df.getFeatureVariation('my-test', user)
 
// Subsequent calls are fast
const sameVariant = await df.getFeatureVariation('my-test', user)
// Returns cached result

Batch Evaluation

// Evaluate multiple variations at once
const variations = await df.evaluateMultipleVariations(
  ['button-test', 'pricing-test', 'layout-test'],
  user,
)
 
// Use results
const buttonVariant = variations['button-test']
const pricingVariant = variations['pricing-test']

Monitoring and Analytics

Variation Exposure Tracking

// Track when users see variations
df.track('variation-exposed', {
  featureKey: 'button-test',
  variant: variant,
  userId: user.userId,
  timestamp: Date.now(),
})

Conversion Tracking

// Track conversions per variant
df.track('conversion', {
  featureKey: 'pricing-test',
  variant: variant,
  userId: user.userId,
  revenue: 99.99,
  conversionType: 'purchase',
})

Performance Metrics

// Track performance per variant
df.track('performance', {
  featureKey: 'new-ui',
  variant: variant,
  userId: user.userId,
  loadTime: 1200,
  errorRate: 0.01,
})

Next Steps

Last updated on
Feature FlagsTargeting Rules