Skip to main content

ab-easy

Source: github.com/splithub-io/ab-easy

Splithub AB Easy Testing is a free, open-source solution for quickly starting A/B testing on any HTML website — no bundler or npm required. Just build your configuration and add a script tag.

Overview​

Supports two test types:

  • Redirect — automatically send users to different URLs based on their assigned variant.
  • Edits — modify page elements (e.g., hide or show blocks) based on the assigned variant.

Variants are stored persistently using either cookies or localStorage, ensuring each user sees the same variant throughout their session. Google Analytics integration is also supported.

How It Works​

Step 1 — Build Your Configuration​

Use the AB Test Config Builder to define your test details (ID, type, status, variants). The builder generates code like this:

<script>
  window.abTestConfig = [
    {
      id: "redirectTest1",
      type: "redirect",
      path: "/",
      status: "active",
      storage: "localStorage",
      cookieExpiration: 7,
      sendEvent: true,
      gaEventName: "RedirectTest1",
      variants: [
        { name: "A", value: "/variantA" },
        { name: "B", value: "https://splithub.io/variant_b" }
      ]
    }
  ];
</script>

Step 2 — Add the Script to Your HTML​

Paste the configuration before the main ab-easy script:

<script>
  window.abTestConfig = [
    {
      id: "redirectTest1",
      type: "redirect",
      path: "/",
      status: "active",
      storage: "localStorage",
      cookieExpiration: 7,
      sendEvent: true,
      gaEventName: "RedirectTest1",
      variants: [
        { name: "A", value: "/variantA" },
        { name: "B", value: "https://splithub.io/variant_b" }
      ]
    }
  ];
</script>
<script src="https://splithub.io/scripts/ab.min.js"></script>

The script reads window.abTestConfig automatically on page load.

Step 3 — Use the Assigned Variant in Your Code​

For type: "edits" tests, the chosen variant is available via window.abTestResults and the abTestEditsTriggered custom event:

<!-- Example element to toggle -->
<div id="blockToToggle">This content may be hidden or shown based on the test variant.</div>

<script>
  // Option 1: Directly access the global variable
  const testResult = window.abTestResults && window.abTestResults.editTest1;
  if (testResult) {
    if (testResult.name === "A") {
      document.getElementById("blockToToggle").classList.add("hidden");
    } else {
      document.getElementById("blockToToggle").classList.remove("hidden");
    }
  }

  // Option 2: Listen for the custom event
  window.addEventListener("abTestEditsTriggered", function(e) {
    const { testId, variant } = e.detail;
    if (testId === "editTest1") {
      if (variant.name === "A") {
        document.getElementById("blockToToggle").classList.add("hidden");
      } else {
        document.getElementById("blockToToggle").classList.remove("hidden");
      }
    }
  });
</script>

Tests created inside the Splithub dashboard can generate a unique Direct Link for each variant. This enables:

  • Client-Side Testing — the split and redirect are executed on the client side for a faster, smoother experience.
  • Direct Data Sending — data is sent directly to the provided Direct Links for real-time aggregation.
  • Centralized Data Aggregation — all test data is consolidated in the Splithub platform for easy analysis.
  • Accelerated Redirect — client-side handling reduces latency and improves overall efficiency.

Getting Started​

Simply use the AB Test Config Builder to generate your configuration, then add the generated snippet to your HTML.

To customize or extend the library, clone the repository:

git clone https://github.com/splithub-io/ab-easy.git

License​

MIT — github.com/splithub-io/ab-easy