Simple A/B testing component for React
Switch branches/tags
Nothing to show
Clone or download
Latest commit 96cc7d9 Nov 23, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples/simple Update dependencies Nov 24, 2018
src Add componentDidUpdate() Nov 17, 2018
.babelrc Init Nov 10, 2018
.editorconfig Init Nov 10, 2018
.eslintrc Init Nov 10, 2018
.gitignore Init Nov 10, 2018
.travis.yml Init Nov 10, 2018
LICENSE Init Nov 10, 2018
README.md Add description Nov 24, 2018
package.json Update version Nov 24, 2018
rollup.config.js Init Nov 10, 2018
yarn.lock Update dependencies Nov 24, 2018

README.md

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

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