Настройка Optimizely для A/B-тестирования на сайте
Optimizely — энтерпрайз-платформа для экспериментирования с функциями Feature Experimentation (бывший Optimizely Full Stack) и Web Experimentation. Отличается мощными возможностями серверного тестирования и feature flags.
Optimizely Web: клиентская интеграция
<!-- Snippet добавляется в <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 })
// Feature flag с вариацией
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 интеграция
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 — тест можно остановить как только достигнута значимость, без inflated false positive rate (в отличие от классического NHST).
Срок выполнения
Настройка Optimizely Feature Experimentation с SDK, React интеграцией и метриками — 2–3 рабочих дня.