How to Use JavaScript Activator for A/B Testing

Introduction

JavaScript Activator is a powerful tool for implementing A/B testing by conditionally loading different JavaScript files based on user segments. This approach allows you to test different versions of functionality, track performance, and make data-driven decisions. This guide will show you how to set up A/B testing scenarios using JavaScript Activator.

Understanding A/B Testing with JavaScript Activator

A/B testing involves showing different versions of your website to different users and measuring which performs better. JavaScript Activator enables this by:

• Loading different scripts for different user segments
• Conditionally executing code based on user groups
• Maintaining test groups consistently across sessions
• Allowing easy tracking and measurement

Basic A/B Test Setup

Step 1: Create Test Groups

First, define how users will be assigned to test groups:

// Simple 50/50 split
function getABTestGroup() {
  // Use a cookie or localStorage to maintain consistency
  if (localStorage.getItem('ab_test_group')) {
    return localStorage.getItem('ab_test_group');
  }
  
  // Assign new users randomly
  const group = Math.random() < 0.5 ? 'A' : 'B';
  localStorage.setItem('ab_test_group', group);
  return group;
}

Step 2: Load Different Scripts Based on Group

Use JavaScript Activator to load different scripts:

const testGroup = getABTestGroup();

if (testGroup === 'A') {
  // Load version A script
  JavaScriptActivator.load({
    script: 'https://example.com/version-a.js',
    condition: () => true
  });
} else {
  // Load version B script
  JavaScriptActivator.load({
    script: 'https://example.com/version-b.js',
    condition: () => true
  });
}

Advanced A/B Testing Scenarios

Multiple Variants

Test more than two variants:

function getMultiVariantGroup() {
  if (localStorage.getItem('ab_variant')) {
    return localStorage.getItem('ab_variant');
  }
  
  const random = Math.random();
  let variant;
  
  if (random < 0.33) {
    variant = 'control';
  } else if (random < 0.66) {
    variant = 'variant1';
  } else {
    variant = 'variant2';
  }
  
  localStorage.setItem('ab_variant', variant);
  return variant;
}

const variant = getMultiVariantGroup();

switch(variant) {
  case 'control':
    JavaScriptActivator.load({ script: 'control-version.js' });
    break;
  case 'variant1':
    JavaScriptActivator.load({ script: 'variant-1.js' });
    break;
  case 'variant2':
    JavaScriptActivator.load({ script: 'variant-2.js' });
    break;
}

Weighted Distribution

Assign users unevenly to test groups:

function getWeightedGroup() {
  if (localStorage.getItem('ab_group')) {
    return localStorage.getItem('ab_group');
  }
  
  const random = Math.random();
  let group;
  
  // 70% to group A, 30% to group B
  if (random < 0.7) {
    group = 'A';
  } else {
    group = 'B';
  }
  
  localStorage.setItem('ab_group', group);
  return group;
}

Tracking and Analytics

Logging Test Events

Track which version users see and their interactions:

const testGroup = getABTestGroup();

// Log assignment
console.log('AB Test Group:', testGroup);
if (typeof gtag !== 'undefined') {
  gtag('event', 'ab_test_assignment', {
    'test_name': 'checkout_flow',
    'variant': testGroup
  });
}

// Load appropriate script
if (testGroup === 'A') {
  JavaScriptActivator.load({
    script: 'version-a.js',
    onLoad: () => {
      // Track that version A loaded
      trackEvent('ab_test_version_loaded', { variant: 'A' });
    }
  });
} else {
  JavaScriptActivator.load({
    script: 'version-b.js',
    onLoad: () => {
      // Track that version B loaded
      trackEvent('ab_test_version_loaded', { variant: 'B' });
    }
  });
}

Conversion Tracking

Track conversions for each variant:

function trackConversion(eventName) {
  const testGroup = localStorage.getItem('ab_test_group');
  
  // Send to analytics
  if (typeof gtag !== 'undefined') {
    gtag('event', eventName, {
      'ab_test_group': testGroup,
      'test_name': 'checkout_optimization'
    });
  }
  
  // Or send to custom analytics
  fetch('/api/track-conversion', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      event: eventName,
      group: testGroup,
      timestamp: new Date().toISOString()
    })
  });
}

// Track when user completes checkout
document.addEventListener('checkoutComplete', () => {
  trackConversion('checkout_completed');
});

Conditional Feature Testing

Testing New Features

Test new features with a subset of users:

function shouldShowNewFeature() {
  const testGroup = getABTestGroup();
  return testGroup === 'B'; // Only show to group B
}

if (shouldShowNewFeature()) {
  JavaScriptActivator.load({
    script: 'new-feature.js',
    condition: () => true
  });
} else {
  // Load standard version or nothing
  JavaScriptActivator.load({
    script: 'standard-feature.js',
    condition: () => true
  });
}

Server-Side Assignment

For more reliable assignment, use server-side logic:

// Server returns test group in page HTML
const serverAssignedGroup = document.body.dataset.abGroup;

if (serverAssignedGroup === 'A') {
  JavaScriptActivator.load({ script: 'version-a.js' });
} else if (serverAssignedGroup === 'B') {
  JavaScriptActivator.load({ script: 'version-b.js' });
}

Best Practices

• Maintain Consistency: Use cookies or localStorage to keep users in the same group across sessions
• Test Duration: Run tests long enough to collect statistically significant data
• Sample Size: Ensure you have enough users in each group for valid results
• Clear Objectives: Define success metrics before starting the test
• Documentation: Document which tests are running and their configurations
• Clean Up: Remove test code after the test is complete and a winner is determined

Common A/B Testing Use Cases

• Checkout Flow: Test different checkout processes
• Call-to-Action Buttons: Test different CTA text, colors, and placements
• Product Recommendations: Test different recommendation algorithms
• Form Designs: Test different form layouts and fields
• Pricing Displays: Test different ways of showing prices
• Navigation Menus: Test different menu structures

Troubleshooting

Users Seeing Wrong Version

• Check localStorage/cookie persistence
• Verify group assignment logic
• Clear cache and test again

Inconsistent Results

• Ensure script loading is reliable
• Check for race conditions in script loading
• Verify tracking is working correctly

Conclusion

JavaScript Activator provides a flexible foundation for implementing A/B tests. By conditionally loading different scripts based on user groups, you can test various features and functionality while maintaining consistent user experiences. Remember to track results properly, maintain user group consistency, and analyze data to make informed decisions about which versions perform better.