Optimizely Experimentation SDK

Name: optimizely-experimentation
Rating: 65
Author: twofoldtech-dakota

Overview

This skill covers Optimizely Full Stack SDK patterns for feature flags, A/B testing, and event tracking.

SDK Initialization

Basic Setup

typescript

import { createInstance } from '@optimizely/optimizely-sdk';

const optimizelyClient = createInstance({
  sdkKey: process.env.NEXT_PUBLIC_OPTIMIZELY_SDK_KEY,
  datafileOptions: {
    autoUpdate: true,
    updateInterval: 60000, // 1 minute
  },
  eventBatchSize: 10,
  eventFlushInterval: 1000,
});

export default optimizelyClient;

React Provider Setup

tsx

import { OptimizelyProvider, createInstance } from '@optimizely/react-sdk';

const optimizely = createInstance({
  sdkKey: process.env.NEXT_PUBLIC_OPTIMIZELY_SDK_KEY,
});

function App() {
  return (
    <OptimizelyProvider
      optimizely={optimizely}
      user={{
        id: getUserId(),
        attributes: getUserAttributes(),
      }}
      timeout={500}
    >
      <YourApp />
    </OptimizelyProvider>
  );
}

Feature Flags

Using useDecision Hook

tsx

import { useDecision } from '@optimizely/react-sdk';

function FeatureComponent() {
  const [decision, clientReady] = useDecision('feature_key');

  if (!clientReady) {
    return <Skeleton />;
  }

  if (!decision.enabled) {
    return null;
  }

  return <NewFeature variables={decision.variables} />;
}

Typed Feature Variables

typescript

interface PricingVariables {
  discount: number;
  currency: string;
  showBadge: boolean;
}

function usePricingFeature() {
  const [decision, clientReady] = useDecision('pricing_feature');

  return {
    isReady: clientReady,
    isEnabled: decision.enabled,
    discount: decision.variables.discount as number,
    currency: decision.variables.currency as string,
    showBadge: decision.variables.showBadge as boolean,
  };
}

A/B Testing

Experiment with Variations

tsx

function CheckoutExperiment() {
  const [decision, clientReady] = useDecision('checkout_experiment');

  if (!clientReady) {
    return <CheckoutSkeleton />;
  }

  switch (decision.variationKey) {
    case 'single_page':
      return <SinglePageCheckout />;
    case 'express':
      return <ExpressCheckout />;
    default:
      return <StandardCheckout />;
  }
}

Server-Side Experiment

typescript

// pages/api/checkout.ts or app/api/checkout/route.ts
export async function getServerSideProps({ req }) {
  const userId = getUserId(req);
  const decision = optimizelyClient.decide('checkout_experiment', userId);

  return {
    props: {
      variation: decision.variationKey,
      userId,
    },
  };
}

Event Tracking

Basic Event

typescript

const userContext = optimizelyClient.createUserContext(userId, {
  membershipTier: user.tier,
  country: user.country,
});

userContext.trackEvent('purchase_completed', {
  revenue: 9900, // In cents
  currency: 'USD',
  itemCount: 3,
});

With React Hook

tsx

import { useTrackEvent } from '@optimizely/react-sdk';

function PurchaseButton({ amount }: { amount: number }) {
  const track = useTrackEvent();

  const handlePurchase = async () => {
    const result = await processPayment();

    if (result.success) {
      track('purchase_completed', {
        revenue: amount * 100,
        currency: 'USD',
      });
    }
  };

  return <button onClick={handlePurchase}>Purchase</button>;
}

Best Practices

•Use timeout in OptimizelyProvider for anti-flicker
•Check clientReady before rendering variations
•Use typed variables for type safety
•Track after success not before actions
•Never include PII in events or attributes
•Use environment variables for SDK keys