A/B
Experiment Hooks

Install

Using npm:

npm i ab-react-hook

or using yarn:

yarn add ab-react-hook

When should I use A/B tests?

It's a very good question to ask before start doing A/B tests. The simple answer would be - when the sample size is statistically significant and you have a good traffic. To dig deeper into numbers use powercalculator made by booking to understand how long would it take you to run an A/B test and get a statistically significant result.

useExperiment()

• Define experiment variants and weights:

variants: [{
  name: "control", weight: 50 
}, {
  name: "test", weight: 50
}]

You can define as many variants as you want but it is recommended to keep two or max three variants for your experiment.

• Get the variant and send it to your analytics (google analytics, facebook analytics etc.), so you can aggregate results in a single place and analyze it later.

const AddToCartButtonExperiment = () => {
  const experimentConfig = {
    id: "3143106091",
    name: "add-to-cart-green",
    variants: [{ name: "control", weight: 50 }, { name: "test", weight: 50 }]
    enableForceExperiment: true
  };
 
  const variant = useExperiment(experimentConfig)

  if (variant.name === "control") {
     return <button class="black">Add to cart</button>;
  } else if (variant.name === "test") {
     return <button class="green">Add to cart</button>;
  }
}

useExperimentAsync()

const fetchVariant = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("test");
    }, 2000);
  });
}

function AsyncAddToCartButtonExperiment() {
  const { variant, isLoading } = useExperimentAsync({
    name: "exp1",
    fetchVariant,
    enableForceExperiment: true
  });

  if (isLoading) {
    return <div>loading...</div>;
  }

  if (variant.name === "control") {
     return <button class="black">Add to cart</button>;
  } else if (variant.name === "test") {
     return <button class="green">Add to cart</button>;
  }
}

Force experiment variant

If enableForceExperiment flag set to true you can seamlessly test all possible variants of the particular experiment without changing the code.

To force experiment variant add query parameter with experiment id and the variant name.

• Force single experiment variant:

/?et=exp_id:exp_variant

• Force multiple experiments:

/?et=exp_1:exp_variant_id,exp_2:exp_variant_id