Utility for configuring and running ab tests in reactjs applications
npm
npm install @amoapps/react-client-split --save
yarn
yarn add @amoapps/react-client-split
import { useCallback } from 'react';
import ReactClientSplit from '@amoapps/react-client-split';
import { useRouter } from 'next/router';
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 ReactClientSplitExample() {
const router = useRouter();
const currentPath = router.asPath;
const handleSplitGroupHit = useCallback((splitResult) => {
console.log({
name: splitResult.name,
option: splitResult.option,
});
return true;
}, []);
const handleSplitRedirect = useCallback((splitResult) => {
// redirect to `splitResult`
}, []);
return (
<>
<ReactClientSplit
groups={splitGroups}
onHit={handleSplitGroupHit}
onRedirect={handleSplitRedirect}
contentElement=".content"
currentPath={currentPath}
/>
<div className="content">Some content here</div>
</>
);
}
export default ReactClientSplitExample;
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 | |
onRedirect | function |
||
getIsEnabled | function |
||
currentPath | string |
Current page URL |