Налаштування Optimizely для A/B-тестування
Optimizely — це корпоративна платформа експериментування з Feature Experimentation (раніше Optimizely Full Stack) та Web Experimentation. Вона відзначається потужними можливостями серверного тестування та функціональних прапорів.
Optimizely Web: клієнтська інтеграція
<!-- Фрагмент додається до <head> синхронно -->
<script src="https://cdn.optimizely.com/js/PROJECT_ID.js"></script>
// Отримайте варіацію
const client = window.optimizely.get('data')
const variation = client?.getVariationMap()['experiment_key']?.key
// Обробник призначення варіації
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 (серверна)
// Node.js SDK
const { createInstance } = require('@optimizely/optimizely-sdk')
const fetch = require('node-fetch')
// Отримайте datafile (конфігурація експериментів)
const datafile = await fetch(
`https://cdn.optimizely.com/datafiles/${SDK_KEY}.json`
).then(r => r.json())
const optimizely = createInstance({ datafile })
// Функціональний прапор з варіацією
const decision = optimizely.decide(
userContext, // createUserContext(userId, { plan: 'premium' })
'checkout_redesign'
)
const isEnabled = decision.enabled
const buttonText = decision.variables['cta_text'] ?? 'Купити зараз'
const checkoutFlow = decision.variationKey // 'control' | 'new_flow'
React інтеграція
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'
)
// Змініть HTML на рівні Edge
const response = await fetch(request)
const html = await response.text()
let modifiedHtml = html
if (decision.variationKey === 'variant_b') {
modifiedHtml = html.replace(
'id="hero-headline">Купіть сьогодні',
'id="hero-headline">Спеціальна пропозиція'
)
}
return new Response(modifiedHtml, response)
}
Групи Mutex (взаємовиключні експерименти)
// Два експерименти на одній сторінці не повинні перекриватися
// Optimizely Groups запобігають цьому
const group = optimizely.get('group', 'checkout_experiments_group')
// Користувач входить лише в один експеримент з групи
Метрики та цілі
// Відстеження конверсії
optimizely.track('purchase_completed', userId, { revenue: orderTotal * 100 })
optimizely.track('add_to_cart', userId, { value: productPrice })
// Користувацькі метрики (Feature Experimentation)
userContext.trackEvent('checkout_step_completed', {
step: 'payment',
method: 'card'
})
Stats Engine
Optimizely використовує Sequential Testing — зупиніть, як тільки досягнута значущість, без завищеного false positive rate (на відміну від класичного NHST).
Час виконання
Налаштування Optimizely Feature Experimentation з SDK, React інтеграцією та метриками — 2–3 робочих дні.