Split Testing Guide

What is Split Testing?

Split testing (also known as A/B testing) allows you to show different content to different visitors on your website. This feature helps you test which version of your content performs better - whether it's different headlines, call-to-action buttons, pricing, or any other element.

How It Works

The split testing feature automatically divides your website visitors into two groups:

Group A (handl_split1): Shows your control/original content
Group B (handl_split2): Shows your test content

Important: The split ratio controls how many visitors see the control version (Group A). For example, if you set handl_split_ratio = 90, then 90% of visitors will see the control version and 10% will see the test version.

Once a visitor is assigned to a group, they'll consistently see the same version across all pages on your website.

Setup Instructions

1. Configure Split Ratio

Set the percentage of visitors who should see the control version (Group A). The default is 50% (50/50 split).

window.handl_split_ratio = 70; // 70% see control version, 30% see test version

Common split ratios:

50 - Equal split (50% each)
70 - 70% control, 30% test
80 - 80% control, 20% test
90 - 90% control, 10% test

2. Add CSS Classes to Your Content

Wrap the content you want to test with the appropriate CSS classes:

<!-- Control version (Group A) -->
<div class="handl_split1">
    <h1>Original Headline</h1>
    <p>Original description text</p>
    <button class="btn-primary">Original CTA</button>
</div>

<!-- Test version (Group B) -->
<div class="handl_split2">
    <h1>New Headline</h1>
    <p>New description text</p>
    <button class="btn-secondary">New CTA</button>
</div>

Real-World Examples

Example 1: Headline Testing

Goal: Test which headline converts more visitors to sign up

<!-- Control headline -->
<div class="handl_split1">
    <h1>Get Your Free Trial Today</h1>
    <p>Start using our platform with a 30-day free trial</p>
</div>

<!-- Test headline -->
<div class="handl_split2">
    <h1>Join 10,000+ Happy Customers</h1>
    <p>Start using our platform with a 30-day free trial</p>
</div>

Example 2: Call-to-Action Button Testing

Goal: Test different button colors and text

<!-- Control CTA -->
<div class="handl_split1">
    <button class="btn-blue">Start Free Trial</button>
</div>

<!-- Test CTA -->
<div class="handl_split2">
    <button class="btn-green">Get Started Now</button>
</div>

Example 3: Pricing Display Testing

Goal: Test different pricing presentations

<!-- Control pricing -->
<div class="handl_split1">
    <div class="pricing-card">
        <h2>Pro Plan</h2>
        <div class="price">$29/month</div>
        <ul>
            <li>Feature 1</li>
            <li>Feature 2</li>
        </ul>
    </div>
</div>

<!-- Test pricing -->
<div class="handl_split2">
    <div class="pricing-card">
        <h2>Pro Plan</h2>
        <div class="price">$29/month</div>
        <div class="savings">Save $120/year</div>
        <ul>
            <li>Feature 1</li>
            <li>Feature 2</li>
        </ul>
    </div>
</div>

Example 4: Form Testing

Goal: Test different form layouts

<!-- Control form -->
<div class="handl_split1">
    <form>
        <input type="email" placeholder="Enter your email">
        <input type="text" placeholder="Your name">
        <button type="submit">Subscribe</button>
    </form>
</div>

<!-- Test form -->
<div class="handl_split2">
    <form>
        <input type="text" placeholder="Your name">
        <input type="email" placeholder="Enter your email">
        <button type="submit">Get Started</button>
    </form>
</div>

Example 5: Hero Section Testing

Goal: Test different hero section layouts

<!-- Control hero -->
<div class="handl_split1">
    <div class="hero">
        <h1>Transform Your Business</h1>
        <p>Our platform helps you grow faster</p>
        <button>Learn More</button>
    </div>
</div>

<!-- Test hero -->
<div class="handl_split2">
    <div class="hero">
        <h1>Grow Your Business 10x Faster</h1>
        <p>Join thousands of successful businesses</p>
        <button>Start Growing</button>
    </div>
</div>

Best Practices

1. Test One Element at a Time

Focus on testing one specific element (headline, button, image) rather than multiple changes at once. This helps you identify what's driving the difference in performance.

2. Run Tests Long Enough

Allow your tests to run for at least 1-2 weeks to get statistically significant results. Don't make decisions based on just a few days of data.

3. Set Clear Goals

Before starting a test, define what success looks like:

More sign-ups?
Higher click-through rates?
Increased time on page?
More purchases?

4. Monitor Performance

Track your key metrics during the test to ensure the test version isn't hurting your overall performance.

Advanced Usage

Testing Multiple Elements

You can test multiple elements on the same page:

<!-- Header testing -->
<div class="handl_split1">
    <header>Control Header</header>
</div>
<div class="handl_split2">
    <header>New Header</header>
</div>

<!-- Footer testing -->
<div class="handl_split1">
    <footer>Control Footer</footer>
</div>
<div class="handl_split2">
    <footer>New Footer</footer>
</div>

Testing Different Page Layouts

<!-- Control layout -->
<div class="handl_split1">
    <div class="sidebar-left">
        <nav>Navigation</nav>
    </div>
    <div class="main-content">
        <h1>Content</h1>
    </div>
</div>

<!-- Test layout -->
<div class="handl_split2">
    <div class="main-content">
        <h1>Content</h1>
    </div>
    <div class="sidebar-right">
        <nav>Navigation</nav>
    </div>
</div>

Troubleshooting

Visitors See Both Versions

Make sure you have the correct CSS classes (handl_split1 and handl_split2)
Check that the split testing is properly initialized

Split Ratio Not Working

Verify that handl_split_ratio is set correctly
Clear browser cookies to reset the test assignment

Content Not Showing

Check that your CSS classes are properly applied
Ensure the split testing script is loaded before your content

Analytics Integration

The split testing feature automatically triggers events that you can track in your analytics:

UTMSimpleSplitTestInitialized - Fired when split testing is set up
The assigned split group is stored in cookies for tracking

You can use these events to track conversion rates for each version in your analytics platform.

UTMSimpleSplitTestInitialized Event

This event is triggered when split testing is initialized and includes detailed information about the split assignment.

Event Details

Event Name: UTMSimpleSplitTestInitialized

Event Data:

{
    splitDecision: "handl_split1" | "handl_split2",  // The assigned split group
    splitRatio: 50  // The configured split ratio percentage
}

Listening for the Event

document.addEventListener('UTMSimpleSplitTestInitialized', function(event) {
    console.log('Split Decision:', event.detail.splitDecision);
    console.log('Split Ratio:', event.detail.splitRatio);
    
    // Track in Google Analytics
    if (typeof gtag !== 'undefined') {
        gtag('event', 'split_test_assigned', {
            'split_group': event.detail.splitDecision,
            'split_ratio': event.detail.splitRatio
        });
    }
    
    // Track in Facebook Pixel
    if (typeof fbq !== 'undefined') {
        fbq('track', 'CustomEvent', {
            event_name: 'split_test_assigned',
            split_group: event.detail.splitDecision,
            split_ratio: event.detail.splitRatio
        });
    }
});

Use Cases

Analytics Tracking

document.addEventListener('UTMSimpleSplitTestInitialized', function(event) {
    // Send to your analytics platform
    analytics.track('Split Test Assigned', {
        splitGroup: event.detail.splitDecision,
        splitRatio: event.detail.splitRatio,
        timestamp: new Date().toISOString()
    });
});

Conversion Tracking

document.addEventListener('UTMSimpleSplitTestInitialized', function(event) {
    // Store split group for later conversion tracking
    sessionStorage.setItem('splitGroup', event.detail.splitDecision);
});

// Later, when tracking conversions
function trackConversion() {
    const splitGroup = sessionStorage.getItem('splitGroup');
    if (splitGroup) {
        analytics.track('Purchase', {
            splitGroup: splitGroup,
            value: 99.99
        });
    }
}

Debugging Split Tests

document.addEventListener('UTMSimpleSplitTestInitialized', function(event) {
    console.log('🔬 Split Test Debug Info:');
    console.log('  - Assigned Group:', event.detail.splitDecision);
    console.log('  - Split Ratio:', event.detail.splitRatio + '%');
    console.log('  - Test Version:', event.detail.splitDecision === 'handl_split2' ? 'B' : 'A');
});

Conditional Logic Based on Split

document.addEventListener('UTMSimpleSplitTestInitialized', function(event) {
    if (event.detail.splitDecision === 'handl_split2') {
        // Apply special styling or functionality for test group
        document.body.classList.add('test-version');
    }
});

Event Timing

The event is fired:

When the page loads and split testing is initialized
After the split decision is made and stored in cookies
Before the content is displayed to the visitor

Best Practices

Listen Early: Add your event listener as early as possible in your page load
Handle Missing Data: Always check if event.detail exists before accessing properties
Track Consistently: Use the same event data structure across all your analytics platforms
Debug Mode: Add console logging during development to verify split assignments

// Complete example with error handling
document.addEventListener('UTMSimpleSplitTestInitialized', function(event) {
    if (!event.detail) {
        console.warn('Split test event missing detail data');
        return;
    }
    
    const { splitDecision, splitRatio } = event.detail;
    
    // Track in multiple analytics platforms
    if (typeof gtag !== 'undefined') {
        gtag('event', 'split_test_assigned', {
            split_group: splitDecision,
            split_ratio: splitRatio
        });
    }
    
    if (typeof fbq !== 'undefined') {
        fbq('track', 'CustomEvent', {
            event_name: 'split_test_assigned',
            split_group: splitDecision,
            split_ratio: splitRatio
        });
    }
    
    // Store for later use
    sessionStorage.setItem('splitTestData', JSON.stringify({
        splitDecision,
        splitRatio,
        assignedAt: new Date().toISOString()
    }));
});

Conclusion

Split testing is a powerful way to optimize your website's performance. Start with simple tests like headlines and buttons, then gradually test more complex elements as you become comfortable with the process.

Remember: The goal is to improve your website's performance, so always test with a clear hypothesis and measure the results!

Craft CMS creates dialog when page refreshed or navigated

Split Testing Guide

What is Split Testing?

How It Works

Setup Instructions

1. Configure Split Ratio

2. Add CSS Classes to Your Content

Real-World Examples

Example 1: Headline Testing

Example 2: Call-to-Action Button Testing

Example 3: Pricing Display Testing

Example 4: Form Testing

Example 5: Hero Section Testing

Best Practices

1. Test One Element at a Time

2. Run Tests Long Enough

3. Set Clear Goals

4. Monitor Performance

Advanced Usage

Testing Multiple Elements

Testing Different Page Layouts

Troubleshooting

Visitors See Both Versions

Split Ratio Not Working

Content Not Showing

Analytics Integration

UTMSimpleSplitTestInitialized Event

Event Details

Listening for the Event

Use Cases

Event Timing

Best Practices

Conclusion