Настройка VWO для A/B-тестирования на сайте

Настройка VWO для A/B-тестирования на сайте

VWO (Visual Website Optimizer) — платформа для A/B тестирования, мультивариантных тестов и персонализации. Сочетает визуальный редактор (без кода) с возможностями разработчика.

Установка VWO

<!-- Синхронное добавление до </head> (важно для предотвращения flicker) -->
<script>
  window.VWO = window.VWO || [];
  VWO.push(["getVariationName", {}]);
</script>
<script type="text/javascript" id="vwoCode">
window._vwo_code=(function() {
  var account_id=ACCOUNT_ID, version=2.1,
  settings_tolerance=2000,hide_element='body',
  /* ... VWO snippet ... */
})();
</script>

VWO рекомендует добавлять snippet до всех других скриптов для корректного anti-flicker.

Создание A/B теста через API

// VWO JavaScript SDK для серверного тестирования
const VWO = require('vwo-node-sdk')

const vwoInstance = VWO.launch({
  settingsFile: await getSettingsFile(accountId, sdkKey),
  logger: {
    level: 'ERROR'
  }
})

// Получить вариант для пользователя
const variantName = vwoInstance.activate(
  'checkout_redesign',  // campaign key
  userId,               // уникальный ID пользователя
  {
    customVariables: { plan: user.plan },
    variationTargetingVariables: { device: 'mobile' }
  }
)
// variantName = 'Control' | 'Variant1' | null

// Отслеживание цели конверсии
if (purchaseCompleted) {
  vwoInstance.track(
    'checkout_redesign',
    userId,
    'purchase_completed',
    { revenueValue: orderTotal }
  )
}

Таргетинг аудиторий

VWO поддерживает гибкий таргетинг без дополнительного кода:

• URL условия (contains, matches regex)
• Cookie значения
• Custom variables (переданные через SDK)
• Геолокация
• Тип устройства
• Возвращающийся / новый посетитель

// Передача custom variables для таргетинга
window.VWO = window.VWO || []
window.VWO.push(['onVariationApplied', function(data) {
  if (data && data[1]) {
    // data[1] = номер вариации
    gtag('event', 'vwo_experiment', {
      campaign: data[0],
      variation: data[1]
    })
  }
}])

// Установить custom variables до загрузки теста
window._vwo_campaignData = {
  user_plan: 'premium',
  cart_value: 5000
}

Интеграция с GA4

// При назначении вариации
window.VWO = window.VWO || []
window.VWO.push(['onVariationApplied', function(data) {
  const campaignId = data[0]
  const variationId = data[1]

  // Отправить в GA4 как пользовательское свойство
  gtag('set', 'user_properties', {
    [`vwo_${campaignId}`]: variationId
  })

  // Или как событие
  gtag('event', 'vwo_assignment', {
    campaign_id: campaignId,
    variation_id: variationId
  })
}])

Heatmaps и Session Recordings в VWO

VWO включает встроенные тепловые карты и записи сессий без дополнительного инструмента:

// Программное начало записи для конкретного сегмента
VWO.push(['startRecording', {
  recordFor: 60,  // следующие 60 секунд
  reason: 'checkout_abandonment'
}])

Velocity: функциональные флаги

VWO Feature Rollout для постепенного выпуска фич:

const isEnabled = vwoInstance.isFeatureEnabled('new_checkout_flow', userId)
const buttonText = vwoInstance.getFeatureVariableValue(
  'new_checkout_flow',
  'cta_text',
  userId
)

Отчёты и значимость

VWO показывает статистическую значимость в реальном времени. Настройки:

• Confidence level: 95% (стандарт) или 99% для важных изменений
• Statistical test: Frequentist (по умолчанию) или Bayesian (VWO SmartStats)

VWO SmartStats (Bayesian) — вероятностный подход, позволяет остановить тест раньше без inflated Type I error.

Срок выполнения

Установка VWO, создание первого A/B теста с интеграцией GA4 — 1 рабочий день. Настройка серверного SDK с feature flags — дополнительно 1–2 дня.