react-split-testing

Simple A/B testing component for React.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-split-testing
72331.2.35 years ago6 years agoMinified + gzip package size for react-split-testing in KB

Readme

react-split-testing
NPM Scrutinizer Code Quality Build Status GitHub Issues Gitter License
A/B testing, also called split testing, is an experiment where two (or more) variants of a webpage are shown to users at random, and is used as a means of determining which variant leads to a better performance. Once a variant wins, it is then shown to all users.

Wrap components in <Variant /> and nest in <Experiment />. A variant is chosen randomly and saved to local storage.
<Experiment name="My Example">
  <Variant name="A">
    <div>Version A</div>
  </Variant>
  <Variant name="B">
    <div>Version B</div>
  </Variant>
</Experiment>

Example (Demo)

Table Of Contents

- [npm](#npm)
- [yarn](#yarn)
- <Experiment /> - <Variant />

Installation

npm

npm install react-split-testing

yarn

yarn add react-split-testing

Usage

import { Experiment, Variant } from 'react-split-testing'

class App extends Component {
  render() {
    return (
      <Experiment
        ref="experiment"
        name="My experiment"
        onChoice={(experimentName, variantName) => console.log(experimentName, variantName)}
      >
        <Variant name="A">
          <div>Section A</div>
        </Variant>
        <Variant name="B">
          <div>Section B</div>
        </Variant>
      </Experiment>
    )
  }
}

back to top

Server Rendering

A <Experiment /> with a userIdentifier property will choose a consistent <Variant /> suitable for server side rendering.

Example

import { Experiment, Variant } from 'react-split-testing'

class App extends Component {
  render() {
    return (
      <Experiment name="My experiment" userIdentifier={this.props.userIdentifier}>
        <Variant name="A">
          <div>Section A</div>
        </Variant>
        <Variant name="B">
          <div>Section B</div>
        </Variant>
      </Experiment>
    )
  }
}

back to top

API Reference

<Experiment />

Experiment container component. Children must be of type Variant.
  • Properties:
name - Name of the experiment.
* **Required**
* **Type:** `string`
* **Example:** `"My Example"`
userIdentifier - Distinct user identifier. Useful for server side rendering.
* **Optional**
* **Type:** `string`
* **Example:** `"lMMaTqA8ODe7c36hhf2N"`
variantName - Name of the variant. When defined, this value is used to choose a variant. This property may be useful for server side rendering.
* **Optional**
* **Type:** `string`
* **Example:** `"A"`
onChoice - Called when a Variant has been chosen for your Experiment.
* **Optional**
* **Type:** `function`
* **Example:** `(experimentName, variantName) => { console.log(experimentName, variantName) }`
onRawChoice - Same as onChoice, but the objects passed are React component instances.
* **Optional**
* **Type:** `function`
* **Example:** `(experiment, variant) => { console.log(experimentName.getName(), variant.props.name) }`
  • Methods:
getName() - Returns the Experiment name. getActiveVariant() - Returns the currently displayed Variant. getActiveVariantName() - Returns the currently displayed Variant name. getVariant(variantName) - Returns the instance of the specified Variant name.
back to top

<Variant />

Variant container component.
  • Properties:
name - Name of the variant.
* **Required**
* **Type:** `string`
* **Example:** `"A"`
weight - The variants will be chosen according to the ratio of the numbers, for example variants A, B, C with weights 1, 2, 2 will be chosen 20%, 40%, and 40% of the time, respectively.
* **Optional**
* **Type:** `number`
* **Default:** `1`
* **Example:** `2`
  • Methods:
getName() - Returns the Variant name. getWeight() - Returns the Variant weight.
back to top

License

MIT