VWO setup for website A/B testing

Setting Up VWO for A/B Testing

VWO (Visual Website Optimizer) is a platform for A/B testing, multivariate testing, and personalization. It combines a visual editor (no-code) with developer capabilities.

VWO Installation

<!-- Add synchronously before </head> (important for flicker prevention) -->
<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 recommends adding the snippet before all other scripts for proper anti-flicker.

Creating an A/B Test via API

// VWO JavaScript SDK for server-side testing
const VWO = require('vwo-node-sdk')

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

// Get variant for user
const variantName = vwoInstance.activate(
  'checkout_redesign',  // campaign key
  userId,               // unique user ID
  {
    customVariables: { plan: user.plan },
    variationTargetingVariables: { device: 'mobile' }
  }
)
// variantName = 'Control' | 'Variant1' | null

// Track conversion goal
if (purchaseCompleted) {
  vwoInstance.track(
    'checkout_redesign',
    userId,
    'purchase_completed',
    { revenueValue: orderTotal }
  )
}

Audience Targeting

VWO supports flexible targeting without extra code:

• URL conditions (contains, matches regex)
• Cookie values
• Custom variables (passed via SDK)
• Geolocation
• Device type
• Returning / new visitor

// Pass custom variables for targeting
window.VWO = window.VWO || []
window.VWO.push(['onVariationApplied', function(data) {
  if (data && data[1]) {
    // data[1] = variation number
    gtag('event', 'vwo_experiment', {
      campaign: data[0],
      variation: data[1]
    })
  }
}])

// Set custom variables before test loads
window._vwo_campaignData = {
  user_plan: 'premium',
  cart_value: 5000
}

GA4 Integration

// On variation assignment
window.VWO = window.VWO || []
window.VWO.push(['onVariationApplied', function(data) {
  const campaignId = data[0]
  const variationId = data[1]

  // Send to GA4 as user property
  gtag('set', 'user_properties', {
    [`vwo_${campaignId}`]: variationId
  })

  // Or as event
  gtag('event', 'vwo_assignment', {
    campaign_id: campaignId,
    variation_id: variationId
  })
}])

Heatmaps and Session Recordings in VWO

VWO includes built-in heatmaps and session recordings without an additional tool:

// Programmatically start recording for specific segment
VWO.push(['startRecording', {
  recordFor: 60,  // next 60 seconds
  reason: 'checkout_abandonment'
}])

Velocity: Feature Flags

VWO Feature Rollout for gradual feature release:

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

Reports and Significance

VWO shows statistical significance in real-time. Settings:

• Confidence level: 95% (standard) or 99% for important changes
• Statistical test: Frequentist (default) or Bayesian (VWO SmartStats)

VWO SmartStats (Bayesian) — probabilistic approach, allows stopping test early without inflated Type I error.

Delivery Time

Installing VWO and creating your first A/B test with GA4 integration — 1 business day. Setting up server SDK with feature flags — additional 1–2 days.