next-client-split

Utility for configuring and running ab tests in nextjs applications

Table of contents

• Installation
• Usage
• Props

Installation

npm

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

yarn

1yarn add @amoapps/next-client-split

Usage

1import { useCallback } from 'react';
2import NextClientSplit from '@amoapps/next-client-split';
3
4const splitGroups = {
5  splitTestName: {
6    // test name
7    coverage: 0.5, // what proportion of users should get into the test (0 - 0%, 1 - 100%, 0.5 - 50%...)
8    path: ['/start-path/url'], // split test start url
9    options: [
10      // distribution options
11      {
12        id: 'option_1_id',
13        url: '/option_1/url',
14        weight: 50, // what proportion of users should get into this option
15        // (if option1.weight = 60 && option2.weight = 20 -> option1.weight = 75% of users && option1.weight = 25%)
16        // (if option1.weight = 1 && option2.weight = 3 && option3.weight = 1 -> option1.weight = 20% of users && option1.weight = 60% && option3.weight = 20%)
17      },
18      {
19        id: 'option_2_id',
20        url: '/option_2/url',
21        weight: 50,
22      },
23    ],
24    condition: { urlQuery: [], cookie: [], common: [] },
25  },
26};
27
28function NextClientSplitExample() {
29  const handleSplitGroupHit = useCallback((splitResult) => {
30    console.log({
31      name: splitResult.name,
32      option: splitResult.option,
33    });
34  }, []);
35
36  return (
37    <>
38      <NextClientSplit
39        groups={splitGroups}
40        onHit={handleSplitGroupHit}
41        contentElement=".content"
42      />
43
44      <div className="content">Some content here</div>
45    </>
46  );
47}
48
49export 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