### Import and Configure Splithub AB Testing

Source: https://github.com/splithub-io/splithub-ab-testing/blob/main/README.md

Import the library, define your A/B test configuration, and initialize the tester. Ensure tests run only on designated pages by calling `runTestsForPage`.

```javascript
    // Import the library (using ES Module syntax)
    import ABTester from "splithub-ab-testing";
    
    // Define your global A/B test configuration
    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();
    }
```

--------------------------------

### Initialize ABTester Instance

Source: https://context7.com/splithub-io/splithub-ab-testing/llms.txt

Create an ABTester instance with an initial configuration array or initialize it empty for later configuration.

```javascript
import ABTester from "splithub-ab-testing";

// Initialize with test configuration
const tester = new ABTester([
  {
    id: "homepage-cta-test",
    type: "redirect",
    pages: ["/", "/landing"],
    status: "active",
    storage: "localStorage",
    cookieExpiration: 7,
    sendEvent: true,
    gaEventName: "HomepageCTATest",
    variants: [
      { name: "control", value: "/" },
      { name: "variant-a", value: "/landing-v2" }
    ]
  }
]);

// Or initialize empty and configure later
const emptyTester = new ABTester();
```

--------------------------------

### ABTester Constructor

Source: https://context7.com/splithub-io/splithub-ab-testing/llms.txt

Initializes a new ABTester instance with an optional array of test configuration objects.

```APIDOC
## Constructor: new ABTester(config)

### Description
Creates a new ABTester instance. The optional configuration array defines the A/B tests to be managed.

### Parameters
#### Request Body
- **config** (Array) - Optional - An array of test configuration objects defining the A/B tests.

### Request Example
const tester = new ABTester([{
  "id": "homepage-cta-test",
  "type": "redirect",
  "pages": ["/", "/landing"],
  "status": "active",
  "variants": [
    { "name": "control", "value": "/" },
    { "name": "variant-a", "value": "/landing-v2" }
  ]
}]);
```

--------------------------------

### Implement Full A/B Test Configuration

Source: https://context7.com/splithub-io/splithub-ab-testing/llms.txt

Defines multiple test types, storage strategies, and event handlers for a complete website integration.

```javascript
import ABTester from "splithub-ab-testing";

// Comprehensive A/B test configuration
const abTestConfig = [
  // Redirect test for homepage
  {
    id: "homepage-redesign",
    type: "redirect",
    pages: ["/", "/index.html"],
    status: "active",
    storage: "localStorage",
    sendEvent: true,
    gaEventName: "HomepageRedesign",
    variants: [
      { name: "original", value: "/" },
      { name: "redesign-v2", value: "/home-v2" }
    ]
  },
  // Edit test for pricing page
  {
    id: "pricing-layout",
    type: "edits",
    path: "/pricing",
    status: "active",
    storage: "cookie",
    cookieExpiration: 30,
    sendEvent: true,
    gaEventName: "PricingLayout",
    variants: [
      { name: "horizontal", value: "horizontal-cards" },
      { name: "vertical", value: "vertical-list" }
    ]
  },
  // Inactive test (won't run)
  {
    id: "future-test",
    type: "edits",
    path: "/about",
    status: "inactive",
    storage: "localStorage",
    variants: [
      { name: "A", value: "test-a" },
      { name: "B", value: "test-b" }
    ]
  }
];

// Initialize tester
const tester = new ABTester(abTestConfig);

// Set up edit test handlers before running
window.addEventListener("abTestEditsTriggered", (event) => {
  const { testId, variant } = event.detail;

  switch (testId) {
    case "pricing-layout":
      document.body.classList.add(`pricing-${variant.value}`);
      break;
  }
});

// Run tests when DOM is ready
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", () => {
    tester.runTestsForPage();
    console.log("Test results:", tester.results);
  });
} else {
  tester.runTestsForPage();
  console.log("Test results:", tester.results);
}
```

--------------------------------

### ABTester Class Constructor

Source: https://github.com/splithub-io/splithub-ab-testing/blob/main/README.md

Initializes the ABTester with a global configuration array. The configuration defines the A/B tests to be run.

```APIDOC
## ABTester Constructor

### Description
Initializes the ABTester with a global configuration array. The configuration defines the A/B tests to be run.

### Method
`new ABTester(config)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
const tester = new ABTester([
  {
    id: "test1",
    type: "redirect",
    pages: ["/page1", "/page2"],
    status: "active",
    storage: "cookie",
    cookieExpiration: 7,
    sendEvent: true,
    gaEventName: "ABTest1_Variant",
    variants: [
      { name: "control", value: "/pageA" },
      { name: "variantA", value: "/pageB" }
    ]
  }
]);
```

### Response
#### Success Response (200)
N/A (Constructor does not return a value directly, but initializes the object).

#### Response Example
N/A
```

--------------------------------

### Configure Variant Persistence Storage

Source: https://context7.com/splithub-io/splithub-ab-testing/llms.txt

Choose between cookie-based storage with expiration or localStorage for indefinite persistence.

```javascript
import ABTester from "splithub-ab-testing";

const storageExamples = [
  // Cookie storage with 14-day expiration
  {
    id: "cookie-test",
    type: "edits",
    path: "/pricing",
    status: "active",
    storage: "cookie",
    cookieExpiration: 14,
    variants: [
      { name: "A", value: "annual-first" },
      { name: "B", value: "monthly-first" }
    ]
  },
  // localStorage (persists indefinitely)
  {
    id: "localstorage-test",
    type: "edits",
    path: "/features",
    status: "active",
    storage: "localStorage",
    variants: [
      { name: "A", value: "compact-view" },
      { name: "B", value: "expanded-view" }
    ]
  }
];

const tester = new ABTester(storageExamples);
tester.runTestsForPage();

// Variants are stored as:
// Cookie: "abTest_cookie-test=A" (expires in 14 days)
// localStorage: localStorage.getItem("abTest_localstorage-test") === "A"
```

--------------------------------

### Execute Tests with runTestsForPage

Source: https://context7.com/splithub-io/splithub-ab-testing/llms.txt

Process and run active tests matching the current page path. It is recommended to execute this on DOMContentLoaded for optimal performance.

```javascript
import ABTester from "splithub-ab-testing";

const abTestConfig = [
  {
    id: "feature-page-test",
    type: "edits",
    path: "/features",
    status: "active",
    storage: "localStorage",
    sendEvent: true,
    gaEventName: "FeaturePageVariant",
    variants: [
      { name: "A", value: "layout-grid" },
      { name: "B", value: "layout-list" }
    ]
  }
];

const tester = new ABTester(abTestConfig);

// Run on DOMContentLoaded for best performance
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", () => tester.runTestsForPage());
} else {
  tester.runTestsForPage();
}
```

--------------------------------

### Update Configuration with setConfig

Source: https://context7.com/splithub-io/splithub-ab-testing/llms.txt

Dynamically update the global test configuration using an array of test objects. This method throws an error if the input is not an array.

```javascript
import ABTester from "splithub-ab-testing";

const tester = new ABTester();

// Define new configuration
const newConfig = [
  {
    id: "pricing-page-test",
    type: "edits",
    path: "/pricing",
    status: "active",
    storage: "cookie",
    cookieExpiration: 14,
    sendEvent: true,
    gaEventName: "PricingPageTest",
    variants: [
      { name: "A", value: "show-annual" },
      { name: "B", value: "show-monthly" }
    ]
  },
  {
    id: "checkout-flow-test",
    type: "redirect",
    pages: ["/checkout", "/cart"],
    status: "active",
    storage: "localStorage",
    sendEvent: false,
    variants: [
      { name: "original", value: "/checkout" },
      { name: "simplified", value: "/checkout-v2" }
    ]
  }
];

// Update configuration
tester.setConfig(newConfig);
```

--------------------------------

### ABTester Methods

Source: https://github.com/splithub-io/splithub-ab-testing/blob/main/README.md

API reference for the methods available on the ABTester class, including setConfig and runTestsForPage.

```APIDOC
## ABTester Methods

### Description
Provides methods to manage the A/B testing configuration and execution.

### Methods

#### `setConfig(config)`

##### Description
Update the global test configuration with a new array of test objects.

##### Parameters
- **config** (Array) - Required - A new array of test configuration objects.

##### Request Example
```javascript
const newConfig = [
  {
    id: "test2",
    type: "edits",
    path: "/homepage",
    status: "active",
    storage: "localStorage",
    variants: [
      { name: "control", value: { backgroundColor: "white" } },
      { name: "variantB", value: { backgroundColor: "blue" } }
    ]
  }
];
abTesterInstance.setConfig(newConfig);
```

#### `runTestsForPage()`

##### Description
Processes and runs tests that match the current page based on the `path` or `pages` properties defined in the configuration.

##### Parameters
None

##### Request Example
```javascript
abTesterInstance.runTestsForPage();
```

### Internal Helpers
Methods like `setCookie`, `getCookie`, `sendGAEvent`, and `getTestVariant` handle the low-level operations such as storage and event dispatching. These are typically not called directly by the user.
```

--------------------------------

### setConfig Method

Source: https://context7.com/splithub-io/splithub-ab-testing/llms.txt

Updates the global test configuration for the ABTester instance.

```APIDOC
## Method: setConfig(config)

### Description
Updates the global test configuration with a new array of test objects. Throws an error if the provided configuration is not an array.

### Parameters
#### Request Body
- **config** (Array) - Required - An array of test configuration objects.

### Request Example
tester.setConfig([
  {
    "id": "pricing-page-test",
    "type": "edits",
    "path": "/pricing",
    "status": "active",
    "variants": [
      { "name": "A", "value": "show-annual" },
      { "name": "B", "value": "show-monthly" }
    ]
  }
]);
```

--------------------------------

### Implement Redirect Test Type

Source: https://context7.com/splithub-io/splithub-ab-testing/llms.txt

Redirect tests automatically navigate users to variant URLs. The library handles relative-to-absolute URL conversion and prevents redundant redirects.

```javascript
import ABTester from "splithub-ab-testing";

const redirectTestConfig = [
  {
    id: "landing-page-redirect",
    type: "redirect",
    pages: ["/", "/home"],
    status: "active",
    storage: "localStorage",
    cookieExpiration: 7,
    sendEvent: true,
    gaEventName: "LandingPageRedirect",
    variants: [
      { name: "control", value: "/" },
      { name: "variant-b", value: "/landing-new" },
      { name: "variant-c", value: "https://example.com/external-landing" }
    ]
  }
];

const tester = new ABTester(redirectTestConfig);
tester.runTestsForPage();
// User is automatically redirected to assigned variant URL
```

--------------------------------

### runTestsForPage Method

Source: https://context7.com/splithub-io/splithub-ab-testing/llms.txt

Executes active tests that match the current page path.

```APIDOC
## Method: runTestsForPage()

### Description
Processes and runs all active tests that match the current page based on the 'path' or 'pages' properties in the configuration. It compares window.location.pathname against the test targets.

### Request Example
tester.runTestsForPage();
```

--------------------------------

### Enable Google Analytics Event Tracking

Source: https://context7.com/splithub-io/splithub-ab-testing/llms.txt

Set 'sendEvent: true' to automatically track test assignments. Supports custom event names and integrates with standard GA/gtag implementations.

```javascript
import ABTester from "splithub-ab-testing";

const analyticsConfig = [
  {
    id: "conversion-test",
    type: "edits",
    path: "/signup",
    status: "active",
    storage: "localStorage",
    sendEvent: true,
    gaEventName: "SignupPageVariant", // Custom event name
    variants: [
      { name: "control", value: "original-form" },
      { name: "simplified", value: "short-form" }
    ]
  }
];

const tester = new ABTester(analyticsConfig);
tester.runTestsForPage();

// GA Event sent automatically:
// Category: "ABTest"
// Action: "SignupPageVariant" (or test id if gaEventName not specified)
// Label: "control" or "simplified" (variant name)

// For gtag:
// gtag("event", "SignupPageVariant", {
//   event_category: "ABTest",
//   event_label: "control"
// });
```

--------------------------------

### Implement Edit Tests with Event Listeners

Source: https://context7.com/splithub-io/splithub-ab-testing/llms.txt

Use the 'edits' type to modify page elements based on assigned variants. Listen for the 'abTestEditsTriggered' event to apply UI changes dynamically.

```javascript
import ABTester from "splithub-ab-testing";

const editTestConfig = [
  {
    id: "hero-section-test",
    type: "edits",
    path: "/",
    status: "active",
    storage: "localStorage",
    sendEvent: true,
    gaEventName: "HeroSectionTest",
    variants: [
      { name: "A", value: "show-video" },
      { name: "B", value: "show-image" }
    ]
  }
];

const tester = new ABTester(editTestConfig);

// Listen for edit test results
window.addEventListener("abTestEditsTriggered", (event) => {
  const { testId, variant } = event.detail;

  if (testId === "hero-section-test") {
    if (variant.value === "show-video") {
      document.querySelector(".hero-image").style.display = "none";
      document.querySelector(".hero-video").style.display = "block";
    } else {
      document.querySelector(".hero-video").style.display = "none";
      document.querySelector(".hero-image").style.display = "block";
    }
  }
});

// Access results directly after running tests
tester.runTestsForPage();
const heroResult = tester.results["hero-section-test"];
console.log("Assigned variant:", heroResult?.name, heroResult?.value);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.