@amoapps/next-client-split

next-client-split

Utility for configuring and running ab tests in nextjs applications

Table of contents

• Installation
• Usage
• Props

Installation

npm

npm install @amoapps/next-client-split --save

yarn

yarn add @amoapps/next-client-split

Usage

import { useCallback } from 'react';
import NextClientSplit from '@amoapps/next-client-split';

const splitGroups = {
  splitTestName: {
    // test name
    coverage: 0.5, // what proportion of users should get into the test (0 - 0%, 1 - 100%, 0.5 - 50%...)
    path: ['/start-path/url'], // split test start url
    options: [
      // distribution options
      {
        id: 'option_1_id',
        url: '/option_1/url',
        weight: 50, // what proportion of users should get into this option
        // (if option1.weight = 60 && option2.weight = 20 -> option1.weight = 75% of users && option1.weight = 25%)
        // (if option1.weight = 1 && option2.weight = 3 && option3.weight = 1 -> option1.weight = 20% of users && option1.weight = 60% && option3.weight = 20%)
      },
      {
        id: 'option_2_id',
        url: '/option_2/url',
        weight: 50,
      },
    ],
    condition: { urlQuery: [], cookie: [], common: [] },
  },
};

function NextClientSplitExample() {
  const handleSplitGroupHit = useCallback((splitResult) => {
    console.log({
      name: splitResult.name,
      option: splitResult.option,
    });
  }, []);

  return (
    <>
      <NextClientSplit
        groups={splitGroups}
        onHit={handleSplitGroupHit}
        contentElement=".content"
      />

      <div className="content">Some content here</div>
    </>
  );
}

export default NextClientSplitExample;

Props

Name	Type	Default Value	Description
splitGroups	{}		config
contentElement	string		CSS selector of the element that contains the content that will be changed based on the results of the split test
onHit	function		function that will be called in case of getting into a split group
getIsEnabled	function