Redux AB Test: UI optimization that works

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
• Alternative Libraries
• Resources for A/B Testing with React
• API Reference
  • <Experiment />
  • <Variant />
• Tests
  • Running Tests

Installation

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

npm install redux-ab-test

Alternative Libraries

• react-experiments - “A JavaScript library that assists in defining and managing UI experiments in React” by Hubspot. Uses Facebook's PlanOut framework via Hubspot's javascript port.
• react-ab - “Simple declarative and universal A/B testing component for React” by Ola Holmström
• react-native-ab - “A component for rendering A/B tests in React Native” by Loch Wansbrough

Please let us know about alternate libraries not included here.

Resources for A/B Testing with React

• Product Experimentation with React and PlanOut on the HubSpot Product Blog
• Roll Your Own A/B Tests With Optimizely and React on the Tilt Engineering Blog
• Simple Sequential A/B Testing
• A/B Testing Rigorously (without losing your job)

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

• Product Experimentation with React and PlanOut on the HubSpot Product Blog
• Roll Your Own A/B Tests With Optimizely and React on the Tilt Engineering Blog
• Simple Sequential A/B Testing
• A/B Testing Rigorously (without losing your job)

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