A/B Testing Made Simple

Just add HTML attributes to your website and instantly start optimizing your conversion rates. No setup, no servers, no complexity - just results.

No credit card required • Free forever • Get started in 30 seconds

HTML Setup


<!-- Add A/B testing to any element -->
<button 
  data-ab-test="hero-button"
  data-ab-variations="Join Now,Get Started,Sign Up"
  data-ab-goal="click">
  Join Now
</button>

<!-- Test different headlines -->
<h1 
  data-ab-test="headline"
  data-ab-variations="Welcome,Get Started,Join Us"
  data-ab-goal="engagement">
  Welcome
</h1>

How It Works

Add Attributes

Just add data-ab-test attributes to any HTML element. No complex setup required.

Define Variations

Set different versions to test using data-ab-variations attribute.

Set Goals

Tell ABTestHero what success looks like with the data-ab-goal attribute.

Go Live

Include our script and watch your conversions improve automatically.

Developer Console Commands

// Initialize ABTestHero

ABTestHero.init({

apiKey: "your-api-key",

testMode: true

});

✓ ABTestHero initialized

// Start A/B testing

ABTestHero.start();

✓ Found 3 A/B tests

✓ Tests deployed successfully

ℹ Analytics tracking active

Complete Documentation

Testing Images & Buttons

Test different images, button colors, and styles:


<!-- Test button colors -->
<button data-ab-test="btn-color"
        data-ab-variations="red,blue,green"
        data-ab-goal="click"
        style="background: red">
  Click Me
</button>

<!-- Test images -->
<img data-ab-test="hero-img"
     data-ab-variations="hero1.jpg,hero2.jpg"
     src="hero1.jpg">

Testing Text & Headlines

Optimize headlines, descriptions, and copy:


<!-- Test headlines -->
<h1 data-ab-test="main-headline"
    data-ab-variations="Save Money,Get Discount,Special Offer"
    data-ab-goal="engagement">
  Save Money
</h1>

<!-- Test descriptions -->
<p data-ab-test="description"
   data-ab-variations="Short text,Longer detailed text">
  Short text
</p>

Console Commands

Test and debug from your browser console:


// Initialize ABTestHero
ABTestHero.init({
  apiKey: "your-api-key",
  testMode: true,
  endpoint: "https://abtesthero-api.tudodesk.workers.dev"
});

// Start testing
ABTestHero.start();

// Track custom events
ABTestHero.track("test-id", "conversion");

Going Live

Deploy your tests to production in 3 steps:

1. Include Script:

<script src="https://abtesthero-api.tudodesk.workers.dev/client/abtesthero-latest.js"></script>

2. Initialize:

ABTestHero.init({apiKey: "YOUR_API_KEY"});

3. Add Attributes:

data-ab-test="unique-id"
data-ab-variations="version1,version2"
data-ab-goal="click"

Goal Types

Click Goals

data-ab-goal="click"

Track when users click or tap elements

Conversion Goals

data-ab-goal="conversion"

Track purchases, signups, downloads

Engagement Goals

data-ab-goal="engagement"

Track time spent, scrolling, views

Complete Quick Start Template

index.html


<!DOCTYPE html>
<html>
<head>
    <script src="https://abtesthero-api.tudodesk.workers.dev/client/abtesthero-latest.js"></script>
</head>
<body>
    <!-- Your A/B tested content -->
    <h1 data-ab-test="hero-title"
        data-ab-variations="Welcome,Get Started,Join Us"
        data-ab-goal="engagement">Welcome</h1>
    
    <button data-ab-test="cta-button"
            data-ab-variations="Sign Up,Get Started,Join Now"
            data-ab-goal="click">Sign Up</button>

    <script>
        ABTestHero.init({
            apiKey: "YOUR_API_KEY_HERE",
            endpoint: "https://abtesthero-api.tudodesk.workers.dev"
        });
    </script>
</body>
</html>