@noths/ab-splitter

ab-splitter

Description

This AB-testing tool facilitates the use of AB-testing for NOTHS and relies on the ab-cookie being set via the minymizer tool from NOTHS. Using this tool, once your initial ab-test is set up, you will be able to enable and disable the test via Google Tag Manager (GTM).

In your app, use the AB-testing tool like so:

import ABSplitter from '@noths/ab-splitter';

const onCorrectPage = 'Add a condition here to define when AB-test should run';

if (onCorrectPage) {
  const currentExperiment = new ABSplitter({
    // This experiment name must be the same as the one used in the <script>
    name: 'EXPERIMENT_NAME',
  });

  currentExperiment.submitTracking();
  currentExperiment.run({
    whenEnabled: () => {
      console.log('AB-Test enabled');
    },
    whenDisabled: () => {
      console.log('AB-Test disabled');
    },
  });
}

Add the following snippet with the correct data to GTM to enable the AB-test:

<script>
  const experimentName = 'EXPERIMENT_NAME';
  window.__NOTHS_ABTEST_EXPERIMENT_DATA = window.__NOTHS_ABTEST_EXPERIMENT_DATA || {};
  window.__NOTHS_ABTEST_EXPERIMENT_DATA[experimentName] = {
    // Enable and disable the ab-test here
    isEnabled: true,
    // You can get this ID from the Google Experiments Section in Google Analytics
    id: 'EXPERIMENT_ID',
    variants: {
      // Use the ticket number for reference, this should be the same as the values
      // used in the Google Experiments Section in Google Analytics
      control: 'TICKET_NUMBER.0',
      experiment: 'TICKET_NUMBER.1',
    },
    // Optional: To change how to split the traffic, send an array with 8 unique numbers between 0-15
    // Default: [8,9,10,11,12,13,14,15]
    variantBucketNumbers: [1, 3, 5, 7, 9, 11, 13, 15],
  };
</script>

Important The methods run and submitTracking must only be used after GTM has run on the page! Otherwise the necessary values from __NOTHS_ABTEST_EXPERIMENT_DATA that are depenent on GTM will not be available and the AB-test will not run.

Development

# Install dependencies
npm i

# Create a build for the client
npm run build

Info about the package

This package can be used only on the client.