How to Set Up a Simple A/B Test on Your Website

A/B testing sounds more complicated than it actually is. You don’t need to be a developer or invest in expensive tools to set one up. All you need is a website, some simple logic, and a clear goal. In this guide, you’ll get a step-by-step walkthrough on how to set up an A/B test on your own website and analyze the results afterward.

What Is A/B Testing?

A/B testing is a method used to compare two versions of something, such as a headline, a button, or a landing page, to see which one performs better. Users are randomly split into two groups: one sees version A, the other sees version B. You then measure which variation generates more clicks, purchases, form submissions, or other measurable actions.

The Goal of the Test

Before you start, you should be clear about what you want to find out. An A/B test without a clear goal is like checking the temperature without knowing whether you should pack shorts or a winter jacket. What are you trying to improve? More clicks, higher conversions, increased engagement?

You might be wondering:

• Do you get more clicks with a green button than a blue one?
• Which headline leads to the highest conversion rate?
• Does a new image create more engagement?

Step by Step: How to Do It

1. Create Two Versions of the Content

You need two variations of whatever you want to test. This could be an entire page, a paragraph, a button, a headline, or simply an image.

Example in HTML:

<div id="variantA" style="display: none;">
  <h2>Free demo – get access now</h2>
</div>

<div id="variantB" style="display: none;">
  <h2>Try it free for 14 days</h2>
</div>

2. Display a Random Version with JavaScript

Use a simple script to display one version randomly, while ensuring the same user always sees the same version.

<script>
  function getABVariant() {
    let variant = localStorage.getItem('abTestVariant');
    if (!variant) {
      variant = Math.random() < 0.5 ? 'A' : 'B';
      localStorage.setItem('abTestVariant', variant);
    }
    return variant;
  }

  const variant = getABVariant();
  document.getElementById('variant' + variant).style.display = 'block';
</script>

You can also use cookies instead of localStorage if you prefer, or if you want the test to work across browser sessions and logins.

3. Track the Variant and User Actions

To analyze the results, you need to know who saw what and what actions they took.

If you use Google Analytics 4 (GA4), you can send a custom event like this:

<script>
  gtag('event', 'ab_test_view', {
    'event_category': 'A/B Test',
    'event_label': 'Variant ' + variant
  });
</script>

You can also send separate conversion events, for example when someone clicks the CTA button:

JavaScript: 

document.querySelector('#ctaButton').addEventListener('click', function() {
  gtag('event', 'cta_click', {
    'event_label': 'Variant ' + variant
  });
});

How to Do This in WordPress

There are several ways to do this, depending on how technical you are:

1. Without a Plugin (Manual Method)

Add the HTML and JavaScript code directly into a WordPress block, either in a post/page or through a widget.

• Use the “Custom HTML” block for the code
• Add both variants in the same block
• Paste the JavaScript below the content or in the header/footer using a plugin such as Insert Headers and Footers

2. With a Plugin

You can also use a plugin that allows you to do this more visually and with greater control:

• Nelio A/B Testing – Built specifically for WordPress, supporting page content, widgets, menus, and even themes.
• Split Hero – A simple solution for testing different landing page variations.
• AB Press Optimizer – Drag-and-drop based and user-friendly, though premium is required for full functionality.

The advantage of using a plugin is that statistics and analytics are built in, without needing to code or manually integrate Analytics.

Tips for the Best Results

• Test one thing at a time – this makes it easier to understand what actually influenced the result.
• Don’t stop the test too early – wait until you have enough traffic and data.
• Ensure statistical significance – otherwise the results may just be random.
• Document your hypothesis beforehand – this helps avoid “inventing” conclusions afterward.

Summary

You don’t need to be a developer to get started with A/B testing. With just a few lines of JavaScript and a simple structure, you can learn a lot about what actually works, not just what you think works. And if you use WordPress, there are tools that make the process even easier.