Налаштування VWO для A/B-тестування на сайті

Налаштування VWO для A/B-тестування

VWO (Visual Website Optimizer) — це платформа для A/B-тестування, мультивариантного тестування та персоналізації. Вона поєднує візуальний редактор (без коду) з можливостями розробника.

Встановлення VWO

<!-- Додайте синхронно перед </head> (важливо для запобігання мерехтінню) -->
<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 рекомендує додавати фрагмент перед усіма іншими скриптами для правильного 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',  // ключ кампанії
  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)
• Значення cookies
• Користувацькі змінні (передані через SDK)
• Геолокація
• Тип пристрою
• Повернення / новий відвідувач

// Передайте користувацькі змінні для таргетингу
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]
    })
  }
}])

// Встановіть користувацькі змінні перед завантаженням тесту
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
  })
}])

Теплові карти та запис сесій у 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 показує статистичну значущість в реальному часі. Налаштування:

• Рівень довіри: 95% (стандарт) або 99% для важливих змін
• Статистичний тест: Frequentist (за замовчуванням) або Bayesian (VWO SmartStats)

VWO SmartStats (Bayesian) — імовірнісний підхід, дозволяє припинити тест раніше без завищеної помилки типу I.

Час виконання

Встановлення VWO та створення вашого першого A/B-тесту з інтеграцією GA4 — 1 робочий день. Налаштування серверного SDK з функціональними прапорами — додатково 1–2 дні.