optimizely-experimentation

Optimizely Experimentation SDK

Overview

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

SDK Initialization

Basic Setup

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

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

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

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

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 />;
  }
}