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
pathorpagesto run tests only on designated pages. - Two Test Types —
redirect(send users to different URLs) andedits(show/hide page elements). - Persistent Variant Assignment — variants stored in
localStorageor cookies for consistent experience across sessions. - Google Analytics Integration — optionally send events via
gaorgtag.
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
| Field | Type | Description |
|---|---|---|
id | string | Unique identifier for the test |
type | "redirect" | "edits" | Test type |
path | string | Single page path where the test runs |
pages | string[] | Multiple page paths where the test runs |
status | "active" | Must be "active" to be processed |
storage | "localStorage" | "cookie" | How to persist the assigned variant |
cookieExpiration | number | Cookie lifetime in days (cookie storage only) |
sendEvent | boolean | Whether to send a Google Analytics event |
gaEventName | string | Custom 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)
| Parameter | Type | Description |
|---|---|---|
config | Array | Array of test configuration objects |
tester.setConfig(config)
Replaces the current test configuration.
| Parameter | Type | Description |
|---|---|---|
config | Array | New 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.