How to A/B Test Your Website

Create Your Free Account

Head to abee.pro/login and sign in with your email. No credit card needed — manual mode is completely free.

Create a Site

Click “Add Site” and give it a name. This represents the website you're testing. You can add the domain too, but it's optional.

Create a Goal

Before you can test, you need to define what success looks like. Go to your site's Goals page and create one.

Give it a name (like “Signup Button Click”) and a key (like signup_click). The key is what you'll use in your tracking code.

Create an Experiment

Now the fun part. Go to Experiments and click “New Experiment.”

Give it a name (like “Hero Button Test”) and select your goal. Leave “Auto-Optimize” off — that's the AI mode. We're doing this manually.

Define Your Variations

This is where you set up what you're testing. You need at least two variations:

• Control: Your current/original version
• Variant: The new version you want to test

Set the traffic split — 50/50 is standard. This means half your visitors see the control, half see the variant.

Add the Code to Your Site

After creating the experiment, click the “Integrate” button to see the code snippets. There are two ways to integrate, depending on your setup:

Option A: Frontend (Browser)

Best for client-side apps (React, Vue, vanilla JS). The system uses a cookie to remember which variation each visitor was assigned. As long as the cookie exists, they'll see the same variation.

// Fetch which variation this visitor should see
// The cookie handles sticky assignment automatically
const response = await fetch(
  'https://app.abee.pro/api/public/YOUR_SITE_ID/experiments/hero_button_test',
  { credentials: 'include' }  // Important: sends/receives cookies
);
const { variation } = await response.json();

// Use variation.value to render your content
document.getElementById('hero-button').innerText = variation.value;

// Track conversion when the goal is completed
document.getElementById('hero-button').addEventListener('click', () => {
  fetch('https://app.abee.pro/api/public/YOUR_SITE_ID/goal/signup_click', {
    method: 'POST',
    credentials: 'include'  // Cookie identifies which variation they saw
  });
});

Option B: Backend (Server-Side)

Best for SSR frameworks (Next.js, Remix, etc.) or when you need more control. You pass a visitor ID in the URL — this is how the system knows who's who. Use any stable identifier (user ID, session ID, or generate a UUID and store it).

// Server-side: pass visitor ID explicitly
// Same visitor ID = same variation every time
const visitorId = getOrCreateVisitorId(request); // Your logic

const response = await fetch(
  `https://app.abee.pro/api/public/YOUR_SITE_ID/experiments/hero_button_test?visitor=${visitorId}`
);
const { variation } = await response.json();

// Render the page with this variation
return renderPage({ buttonText: variation.value });

// Track conversion (also pass visitor ID)
await fetch(
  `https://app.abee.pro/api/public/YOUR_SITE_ID/goal/signup_click?visitor=${visitorId}`,
  { method: 'POST' }
);

Pro Tip: Use Variations as Keys

Variation values don't have to be content. They can be keys that your app uses to decide what to do. This makes manual mode incredibly powerful — you can test anything, not just text.

// Use variation.value as a key to control behavior
const { variation } = await response.json();

if (variation.value === 'algorithm_v2') {
  results = await searchWithNewAlgorithm(query);
} else {
  results = await searchWithCurrentAlgorithm(query);
}

// Or use it to pick a component
const CheckoutFlow = variation.value === 'checkout_short'
  ? ShortCheckout
  : LongCheckout;

This turns A/B testing into a general-purpose experimentation tool. Test layouts, features, algorithms, flows — anything where you want to compare “this vs that” with real user data.

Start the Experiment

Once your code is deployed, go back to the experiment page and click the Play button to start it. The status will change from “Draft” to “Running.”

Watch the Results Come In

As visitors hit your page, you'll see the numbers update in real-time:

• Views: How many visitors saw each variation
• Conversions: How many clicked the button
• Conversion Rate: Conversions ÷ Views
• Confidence: How sure we are there's a real difference