node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey »

redux-ab-test

Redux AB Test: UI optimization that works

npm version Build Status Dependency Status npm downloads

Support for testing multiple versions of your components with React and Redux.

  • Works great with React
  • Integrated with Redux
  • Supports multiple experiments and variations with a simple DSL
  • Respects precedence order when specifying audience and react-router criteria
  • Can be used for server rendering
  • Few dependencies, small (20k, 6k gzipped)

Installation

Redux AB Test is distributed via npm:

npm install --save redux-ab-test

API

import React, { Component } from 'react';
 
class App extends Component {
  render() {
    return (
      <Provider store={...}>
        <div>
          <h1> Welcome to my app! </h1>
          <h2> Checkout my amazing homepage! </h2>
 
          { /** Try out new versions of your homepage!  */ }
          <Experiment name="Cover Art Test">
 
            { /** Default homepage experience */ }
            <Variant name="Control" weight={50}>
              <RegularHomepage />
            </Variant>
 
            { /** Guided Onboarding Wizard */ }
            <Variant name="Guided Flow" weight={25}>
              <OnboarindHomepage />
            </Variant>
 
            { /** Modals for all of the things! */ }
            <Variant name="Modals Everywhere" weight={25}>
              <HomePageWithModals />
            </Variant>
 
          </Experiment>
        </div>
      </Provider>
    );
  }
}

Server-side rendering

redux-ab-test supports server-side rendering by default.

React-Redux

Experiments are stored in the redux store, which you can use to push play & win events to your analytics provider. Here's an example of a simle middleware that listens for those events and dispatches to window.trackEvent(<event name>, { <event data });

import { createStore, applyMiddleware, compose } from 'redux';
import { reactAbTest, reactAbTestInitialState, reduxAbTestMiddleware } from 'redux-ab-test';
import { createAction, handleActions } from 'redux-actions';
import { PLAY, WIN } = 'redux-ab-test';
 
// Create a middleware that listens for plays & wins 
const pushToAnalytics = store => next => action => {
  const output = next(action);
  switch(action.type) {
    case PLAY: {
      const experiment = action.payload.get('experiment');
      const variation  = action.payload.get('variation');
      window.trackEvent('Experiment Played', { ... })
      break;
    }
    case WIN: {
      const experiment    = action.payload.get('experiment');
      const variation     = action.payload.get('variation');
      const actionType    = action.payload.get('actionType');
      const actionPayload = action.payload.get('actionPayload');
      window.trackEvent('Experiment Won', { ... })
      break;
    }
  }
  return output;
};
 
const middlewares = [ reduxAbTestMiddleware, pushToAnalytics /*, thunk, promise, ...*/ ];
const finalCreateStore = compose(applyMiddleware.apply(this, middleware))(createStore);
const reducers = { reactAbTest };
export default finalCreateStore(reducers, {});
 

Please ★ on GitHub!

Table of Contents

Installation

redux-ab-test is compatible with React 0.15.x.

npm install redux-ab-test

Alternative Libraries

Please let us know about alternate libraries not included here.

Resources for A/B Testing with React

Please let us know about React A/B testing resources not included here.

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. When defined, this value is hashed to choose a variant if defaultVariantName or a stored value is not present. Useful for server side rendering.
      • Optional
      • Type: string
      • Example: "7cf61a4521f24507936a8977e1eee2d4"
    • defaultVariantName - Name of the default variant. When defined, this value is used to choose a variant if a stored value is not present. This property may be useful for server side rendering but is otherwise not recommended.
      • Optional
      • Type: string
      • Example: "A"

<Variant />

Variant container component.

  • Properties:
    • name - Name of the variant.
      • Required
      • Type: string
      • Example: "A"

Resources for A/B Testing with React

Please let us know about React A/B testing resources not included here.

Tests

Mocha tests are performed on the latest version of Node.

Please let me know if a different configuration should be included here.

Running Tests

Locally:

npm install
npm test