react-ab

by olahol

olahol /react-ab

Simple declarative and universal A/B testing component for React.

423 Stars 23 Forks Last release: Not found 31 Commits 11 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react-ab

npm version Build Status Coverage Status Dependency Status Size

Simple declarative and universal A/B testing component for React.

Demo

A/B Testing Demo

Install

npm install react-ab --save

or

bower install react-ab --save

Examples

Using Mixpanel.

var Experiment = require("react-ab").Experiment
  , Variant = require("react-ab").Variant;

var App = React.createClass({ choice: function (experiment, variant, index) { mixpanel.register({ "tagline": variant }); }

, click: function (e) { mixpanel.track("click"); }

, render: function () { return (

A A/B testing component for React

A vertically integrated React component

One weird React component that will increase your metrics by 100%!

React AB component
); } });

Using Google Universal Analytics. Requires a Custom Dimension.

var Experiment = require("react-ab").Experiment
  , Variant = require("react-ab").Variant;

var randomGoogle = function () { // base randomness off analytics.js client id. // https://developers.google.com/analytics/devguides/platform/user-id#clientid-userid var clientId = tracker.get("clientId"); return (parseFloat(clientId, 10) % 100) / 100; };

var App = React.createClass({ choice: function (experiment, variant) { var dimension = 1; // Index of your custom dimension. ga("set", "dimension" + dimension, experiment + ": " + variant); }

, click: function (e) { ga("send", "event", "click", "link"); }

, render: function () { return (

A A/B testing component for React

A vertically integrated React component

One weird React component that will increase your metrics by 100%!

React AB component
); } });

Universality is achieved by setting

get, set, clear
. Here is an example server side with Express.js and using ES6:
import express from "express";
import cookieParser from "cookie-parser";

import React from "react/addons"; import { Experiment, Variant } from "react-ab";

var App = React.createClass({ choice: function (experiment, variant, index) { console.log(experiment, variant, index); }

, render: function () { return (

A A/B testing component for React

A vertically integrated React component

One weird React component that will increase your metrics by 100%!

); } });

var app = express();

app.use(cookieParser());

app.get("/", function (req, res) { res.send(React.renderToString( req.cookies[x]} set={(x, y) => res.cookie(x, y)} clear={res.clearCookie} />)); });

app.listen(3000);

API

Experiment

Props

name

Name of experiment, this prop is required. Should be something that describes the category being tested like color or title.

onChoice

Callback that fires when a variant is chosen. Gets arguments

experiment
name
,
variant name
,
variant index
and
was retrieved?
.
was
retrieved?
is true if the variant was retrieved using the
get
prop usually from a cookie.
random

Random function, should return a number in the range [0, 1). The default uses

crypto.getRandomValues()
when available and falls back on
Math.random
.
get

A function that takes an

experiment
and returns a
variant
. By default uses browser cookies.
set

A function that takes an

experiment
and
variant
and stores it. By default uses browser cookies.
clear

A function that clears/unsets an

experiment
. By default uses browser cookies.

Context

get, set, clear, random
can also be set from
context
. If these props exists they overwrite
context
.
randomExperiment

random
function taken from
context
.
getExperiment

get
function taken from
context
.
setExperiment

set
function taken from
context
.
clearExperiment

clear
function taken from
context
.

Methods

getVariant()

Returns the name of the current variant.

chooseVariant()

Choose a new variant.

clearCookie()

Clear the experiment cookie.

Variant

Props

name

Name of variant, this props is required. Should be something descriptive of the attribute the variant represent like red or large.


MIT Licensed

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.