Setting Up Optimizely for A/B Testing
Optimizely is an enterprise experimentation platform with Feature Experimentation (formerly Optimizely Full Stack) and Web Experimentation. It excels at server-side testing and feature flags.
Optimizely Web: Client Integration
<!-- Snippet added to <head> synchronously -->
<script src="https://cdn.optimizely.com/js/PROJECT_ID.js"></script>
// Get variation
const client = window.optimizely.get('data')
const variation = client?.getVariationMap()['experiment_key']?.key
// Variation assignment handler
window.optimizely = window.optimizely || []
window.optimizely.push({
type: 'addListener',
filter: { type: 'lifecycle', name: 'activated' },
handler: function(event) {
const experimentId = event.data.experimentId
const variationId = event.data.variationId
gtag('event', 'optimizely_activation', {
experiment_id: experimentId,
variation_id: variationId
})
}
})
Optimizely Feature Experimentation (Server-Side)
// Node.js SDK
const { createInstance } = require('@optimizely/optimizely-sdk')
const fetch = require('node-fetch')
// Get datafile (experiment configuration)
const datafile = await fetch(
`https://cdn.optimizely.com/datafiles/${SDK_KEY}.json`
).then(r => r.json())
const optimizely = createInstance({ datafile })
// Feature flag with variation
const decision = optimizely.decide(
userContext, // createUserContext(userId, { plan: 'premium' })
'checkout_redesign'
)
const isEnabled = decision.enabled
const buttonText = decision.variables['cta_text'] ?? 'Buy Now'
const checkoutFlow = decision.variationKey // 'control' | 'new_flow'
React Integration
import { OptimizelyProvider, useDecision } from '@optimizely/react-sdk'
function App() {
return (
<OptimizelyProvider
optimizely={optimizelyClient}
user={{ id: userId, attributes: { plan: user.plan } }}
>
<CheckoutPage />
</OptimizelyProvider>
)
}
function CheckoutPage() {
const [decision] = useDecision('checkout_redesign', { autoUpdate: true })
return decision.enabled && decision.variationKey === 'new_flow'
? <NewCheckoutFlow ctaText={decision.variables.cta_text} />
: <OldCheckoutFlow />
}
Edge Experimentation (Cloudflare Workers)
// Optimizely Agent + Cloudflare Worker
const { OptimizelyProvider } = require('@optimizely/optimizely-sdk/dist/optimizely.edge.min.js')
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
const userId = getUserId(request)
const decision = optimizely.decide(
optimizely.createUserContext(userId),
'hero_section_test'
)
// Modify HTML at Edge level
const response = await fetch(request)
const html = await response.text()
let modifiedHtml = html
if (decision.variationKey === 'variant_b') {
modifiedHtml = html.replace(
'id="hero-headline">Buy today',
'id="hero-headline">Special offer'
)
}
return new Response(modifiedHtml, response)
}
Mutex Groups (Mutually Exclusive Experiments)
// Two experiments on same page should not overlap
// Optimizely Groups prevent this
const group = optimizely.get('group', 'checkout_experiments_group')
// User enters only one experiment from the group
Metrics and Goals
// Track conversion
optimizely.track('purchase_completed', userId, { revenue: orderTotal * 100 })
optimizely.track('add_to_cart', userId, { value: productPrice })
// Custom metrics (Feature Experimentation)
userContext.trackEvent('checkout_step_completed', {
step: 'payment',
method: 'card'
})
Stats Engine
Optimizely uses Sequential Testing — stop as soon as significance is reached, without inflated false positive rate (unlike classical NHST).
Delivery Time
Setting up Optimizely Feature Experimentation with SDK, React integration, and metrics — 2–3 business days.