A/B Testing with Feature Flags

import { useFlag } from '@rollgate/sdk-react';

function CheckoutButton() {
  // 50% of users see the new checkout
  const showNewCheckout = useFlag('experiment-new-checkout', false);

  if (showNewCheckout) {
    return (
      <button
        onClick={() => {
          trackEvent('checkout_started', { variant: 'B' });
          startNewCheckout();
        }}
        className="bg-green-600 text-white px-6 py-3 rounded-lg"
      >
        Quick Checkout
      </button>
    );
  }

  return (
    <button
      onClick={() => {
        trackEvent('checkout_started', { variant: 'A' });
        startLegacyCheckout();
      }}
      className="bg-blue-600 text-white px-4 py-2 rounded"
    >
      Proceed to Checkout
    </button>
  );
}

import { RollgateProvider } from '@rollgate/sdk-react';

export default function Layout({ children }) {
  const user = useCurrentUser();

  return (
    <RollgateProvider
      apiKey="rg_client_..."
      user={user ? {
        id: user.id, // Consistent identifier
        attributes: {
          plan: user.plan,
          country: user.country,
        }
      } : undefined}
    >
      {children}
    </RollgateProvider>
  );
}

import { useFlag } from '@rollgate/sdk-react';

function useExperiment(flagKey: string) {
  const variant = useFlag(flagKey, false) ? 'treatment' : 'control';

  useEffect(() => {
    // Track experiment exposure
    gtag('event', 'experiment_viewed', {
      experiment_id: flagKey,
      variant_id: variant,
    });
  }, [flagKey, variant]);

  return variant;
}

// Track conversion
function trackConversion(flagKey: string, variant: string) {
  gtag('event', 'purchase', {
    experiment_id: flagKey,
    variant_id: variant,
    value: orderTotal,
    currency: 'EUR',
  });
}

import mixpanel from 'mixpanel-browser';
import { useFlag } from '@rollgate/sdk-react';

function useExperiment(flagKey: string) {
  const isEnabled = useFlag(flagKey, false);
  const variant = isEnabled ? 'B' : 'A';

  useEffect(() => {
    // Set user property for segmentation
    mixpanel.people.set({
      [`experiment_${flagKey}`]: variant,
    });

    // Track exposure event
    mixpanel.track('Experiment Viewed', {
      experiment: flagKey,
      variant,
    });
  }, [flagKey, variant]);

  return { variant, isEnabled };
}

import { useFlag } from '@rollgate/sdk-react';
import { AnalyticsBrowser } from '@segment/analytics-next';

const analytics = AnalyticsBrowser.load({ writeKey: '...' });

function trackExperiment(flagKey: string, variant: 'A' | 'B') {
  analytics.track('Experiment Viewed', {
    experimentId: flagKey,
    variantId: variant,
  });
}

function trackConversion(flagKey: string, variant: 'A' | 'B', revenue: number) {
  analytics.track('Order Completed', {
    experimentId: flagKey,
    variantId: variant,
    revenue,
  });
}