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

Server-Side Experiment

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

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

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