Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/olahol/react-ab
Simple declarative and universal A/B testing component for React.
https://github.com/olahol/react-ab
ab-testing javascript react universal
Last synced: 7 days ago
JSON representation
Simple declarative and universal A/B testing component for React.
- Host: GitHub
- URL: https://github.com/olahol/react-ab
- Owner: olahol
- Created: 2014-05-28T19:17:33.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-09-27T17:05:19.000Z (over 7 years ago)
- Last Synced: 2025-01-05T10:06:01.065Z (14 days ago)
- Topics: ab-testing, javascript, react, universal
- Language: JavaScript
- Homepage:
- Size: 156 KB
- Stars: 431
- Watchers: 8
- Forks: 24
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-react-components-all - react-ab - Simple declarative and universal A/B testing component for React. (Uncategorized / Uncategorized)
- awesome-react-components - react-ab - Simple declarative and universal A/B testing component for React. (UI Utilities / Test User Behavior)
- awesome-list - react-ab - Simple declarative and universal A/B testing component for React. (UI Utilites / Test User Behavior)
- awesome-react-components - react-ab - Simple declarative and universal A/B testing component for React. (UI Utilities / Test User Behavior)
- awesome-react-components - react-ab - Simple declarative and universal A/B testing component for React. (UI Utilities / Test User Behavior)
README
# react-ab
[](http://badge.fury.io/js/react-ab)
[](https://travis-ci.org/olahol/react-ab)
[](https://coveralls.io/r/olahol/react-ab)
[](https://david-dm.org/olahol/react-ab)
[![Size][size-image]][size-url]
> Simple declarative and universal A/B testing component for React.
### [Demo](https://olahol.github.io/react-ab/example)
[](http://olahol.github.io/react-ab/example)
## Install
```bash
npm install react-ab --save
```
or
```bash
bower install react-ab --save
```
## Examples
Using [Mixpanel](https://mixpanel.com/).
```js
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](http://www.google.com/analytics/). Requires
a [Custom Dimension](https://support.google.com/analytics/answer/2709829?hl=en).
```js
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:
```js
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
[size-image]: https://badge-size.herokuapp.com/olahol/react-ab/master/react-ab.js
[size-url]: https://github.com/olahol/react-ab/reab-ab.js