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