Skip to main content

splithub-ab-testing

npm: npmjs.com/package/splithub-ab-testing
Source: github.com/splithub-io/ab-easy

splithub-ab-testing is a free, open-source Node library for integrating A/B testing into your website with minimal setup. It supports both redirect and edits test types and lets you define a global configuration while triggering tests only on designated pages.

Features

  • Global Configuration — define all your A/B tests in one place.
  • Page-Specific Triggering — use path or pages to run tests only on designated pages.
  • Two Test Typesredirect (send users to different URLs) and edits (show/hide page elements).
  • Persistent Variant Assignment — variants stored in localStorage or cookies for consistent experience across sessions.
  • Google Analytics Integration — optionally send events via ga or gtag.

Installation

npm install splithub-ab-testing

Usage

Import and Global Configuration

import ABTester from "splithub-ab-testing";

const abTestConfig = [
{
id: "redirectTest1",
type: "redirect",
// Run this test only on the homepage and /special-page
pages: ["/", "/special-page"],
status: "active",
storage: "localStorage",
cookieExpiration: 7,
sendEvent: true,
gaEventName: "RedirectTest1",
variants: [
{ name: "A", value: "/variantA" },
{ name: "B", value: "https://splithub.io/variant_b" }
]
},
{
id: "editTest1",
type: "edits",
// Run this test only on the /features page
path: "/features",
status: "active",
storage: "localStorage",
cookieExpiration: 7,
sendEvent: false,
variants: [
{ name: "A", value: "hide" },
{ name: "B", value: "show" }
]
}
];

// Initialize the tester with the global configuration
const tester = new ABTester(abTestConfig);

// Run tests only for the current page (based on window.location.pathname)
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", () => tester.runTestsForPage());
} else {
tester.runTestsForPage();
}

You can generate your test configuration using the AB Test Config Builder or directly from your test settings in the Splithub dashboard.

Configuration Fields

FieldTypeDescription
idstringUnique identifier for the test
type"redirect" | "edits"Test type
pathstringSingle page path where the test runs
pagesstring[]Multiple page paths where the test runs
status"active"Must be "active" to be processed
storage"localStorage" | "cookie"How to persist the assigned variant
cookieExpirationnumberCookie lifetime in days (cookie storage only)
sendEventbooleanWhether to send a Google Analytics event
gaEventNamestringCustom GA event name
variants{ name: string, value: string }[]List of variants

If neither path nor pages is specified, the test runs on every page.

Test Types

redirect

Automatically redirects the user to a different URL based on their assigned variant.

{
id: "redirectTest1",
type: "redirect",
pages: ["/", "/landing"],
status: "active",
storage: "localStorage",
cookieExpiration: 7,
sendEvent: true,
gaEventName: "RedirectTest1",
variants: [
{ name: "A", value: "/variant-a" },
{ name: "B", value: "/variant-b" }
]
}

edits

Exposes the assigned variant via window.abTestResults and fires the abTestEditsTriggered custom event, allowing you to modify page elements based on the variant.

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

API Reference

new ABTester(config)

ParameterTypeDescription
configArrayArray of test configuration objects

tester.setConfig(config)

Replaces the current test configuration.

ParameterTypeDescription
configArrayNew array of test configuration objects

tester.runTestsForPage()

Iterates over the configuration and processes only those tests whose path or pages match the current window.location.pathname. Call this after the DOM is ready.

Google Analytics Integration

Set sendEvent: true and provide a gaEventName in the test config. The library sends events using either ga() or gtag() if either is available on the page.

License

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