@deriv-experiments/abcd

v1.3.1

Published

3 years ago

A minimalistic and easy-to-use A/B testing library that enables you to effortlessly set up and manage A/B tests on your website. It is designed to be straightforward, requiring minimal configuration, and ensuring a quick and efficient way to test differen

0High
0Medium
0Low

markwylde-deriv

ab tests ab test variants experiments

abcd - Simple and Lightweight A/B Testing Library

This is a minimalistic and easy-to-use A/B testing library that enables you to effortlessly set up and manage A/B tests on your website. It is designed to be straightforward, requiring minimal configuration, and ensuring a quick and efficient way to test different variations of your site.

Demo

Check out the interactive demo
Or watch the video:

Features

Simple integration with HTML
No dependencies
Lightweight
Cookie-based persistence of chosen variants

Installation

Option 1: Script Tag

You can include the abcd library in your project by adding the following script tag to your HTML file:

<script src="https://deriv-experiments.github.io/abcd/abcd.min.js" config="abTestsConfig.json"></script>

Ensure that you replace "abTestsConfig.json" with the correct path to your configuration file.

This will also put a abTests on the window.

<script type="application/javascript">
if (abTests.greeting === 'everyone') {
  alert('hello')
}
</script>

Option 2: npm Package

You can also install the abcd library as an npm package:

npm install @deriv-experiments/abcd

Then, import the library in your JavaScript or TypeScript code:

import abcd from '@deriv-experiments/abcd';

const tests = abcd([
  {
    "name": "header",
    "variants": {
      "control": 0.8,
      "visible": 0.2
    }
  },
  {
    "name": "greeting",
    "variants": {
      "control": 0.5,
      "everyone": 0.25,
      "testers": 0.25
    }
  }
]);

if (tests.greeting === 'everyone') {
  alert('hello')
}

Usage

1. Set up the A/B test configuration

Create a JSON configuration file for your A/B tests. This file will contain an array of test objects, where each test object has a name and a variants property. The variants property is an object that maps the variant names to their corresponding probabilities.

Example abTestsConfig.json:

[
  {
    "name": "header",
    "variants": {
      "control": 0.8,
      "visible": 0.2
    }
  },
  {
    "name": "greeting",
    "variants": {
      "control": 0.5,
      "everyone": 0.25,
      "testers": 0.25
    }
  }
]

2. Add A/B test elements to your HTML

Include the elements that you want to test in your HTML, and add the ab-test-name and ab-test-variant attributes to them. The ab-test-name attribute should match the test names defined in your configuration file, while the ab-test-variant attribute should correspond to the variant names.

Example HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
  <script src="https://deriv-experiments.github.io/abcd/abcd.min.js" config="abTestsConfig.json"></script>
</head>
<body>
  <div ab-test-name="header" ab-test-variant="visible">
    <h1>Greater</h1>
  </div>

  <div ab-test-name="greeting" ab-test-variant="control">
    Hello World
  </div>

  <div ab-test-name="greeting" ab-test-variant="everyone">
    Hello Everyone
  </div>

  <div ab-test-name="greeting" ab-test-variant="testers">
    Hello Testers
  </div>
</body>
</html>

3. Launch your tests

Once you have set up the configuration file and added the A/B test elements to your HTML, the library will automatically choose a variant for each test based on the probabilities defined in the configuration file. The chosen variants will persist

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme