something.md

autopilot-variations

AB testing client library.

BREAKING CHANGES

Version 2.x:

Not ready yet? Go to version 1.4.0.

Requirements:

• Version 2 now supports user-based experiments, using Wasabi, a Condé Nast hosted experiment platform.
• The API changes required a change in the actions helper
• A unique user ID is required to be passed to the action.requestExperimentAssignment

Wasabi:

Ask for a login in the #variation-testing channel in slack.

Tracking

• data-cn-test and data-cn-variation are automatically added to the Variant component.
• Reporting will be setup with mode-analytics

View Components

Require the client components via require('@condenast/autopilot-variations/lib/browser'); This module pulls in <Experiment/> and <Variation/> react components, as well as helpers for the experiment actions and application store integration.

Example usage

Requirements:

• Experiment Connector component which connects to a fluxible-store.
• componentWillMount to execute requestExperimentAssignment action
• Store handler for LOAD_EXPERIMENT_ASSIGNMENT.

All of these can be seen in example/components/Experiment

To include an experiment on a page, follow this pattern:

<Experiment experimentId="experiment-created-in-wasabi" brand="app-name-set-in-wasabi">
  <Variant isDefault={true} id="control-variation-in-wasabi">
    <Outbrain/>
  </Variant>
  <Variant id="test-variation-in-wasabi">
    <InternalRecirc items={this.props.trendingStories}/>
  </Variant>
</Experiment>

This repo also provides a few useful utilities for managing store state and actions for the experiments. These helpers are independent of either Flux or Redux and can be used with either framework

store Helper

loadExperimentAssignment

storeHelper.loadExperimentAssignment(state, response) => Object

The loadExperimentAssignment method takes as arguments the current application state as well as a response from the experiment API and merges any new data into the application state.

options

• state {Object} The current application state
• response {Object} The JSON response from the experiment API

returns

The updated application state

actions Helper

requestExperimentAssignment

actionsHelper.requestExperimentAssignment(context, payload) => Promise~Response → Object

The requestExperimentAssignment method takes a context object with a dispatch function and a payload with the parameters. It will dispatch the LOAD_EXPERIMENT_ASSIGNMENT action with the response, as well as Promise.Resolve with the response.

payload:

This object contains:

experiment object with experiment id, cache location and cache TTL user user ID used for the assignment brand brand/slug, used to decide which config to use on the API params optional params for segmentation