# 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).

```javascript
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:

```html
<!-- 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

```html
<!-- 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

```html
<!-- 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

```html
<!-- 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

```html
<!-- 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

```html
<!-- 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:

```html
<!-- 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

```html
<!-- 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:**
```javascript
{
    splitDecision: "handl_split1" | "handl_split2",  // The assigned split group
    splitRatio: 50  // The configured split ratio percentage
}
```

#### Listening for the Event

```javascript
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

1. **Analytics Tracking**
   ```javascript
   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()
       });
   });
   ```

2. **Conversion Tracking**
   ```javascript
   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
           });
       }
   }
   ```

3. **Debugging Split Tests**
   ```javascript
   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');
   });
   ```

4. **Conditional Logic Based on Split**
   ```javascript
   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

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

```javascript
// 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!