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 original content
Group B (handl_split2): Shows your test content

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 test version (Group B). The default is 50% (50/50 split).

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

Common split ratios:

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

2. Add CSS Classes to Your Content

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

<!-- Original 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

<!-- Original 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

<!-- Original 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

<!-- Original 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

<!-- Original 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

<!-- Original 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>Original Header</header>
</div>
<div class="handl_split2">
    <header>New Header</header>
</div>

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

Testing Different Page Layouts

<!-- Original 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.

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');
    }
});

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!