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: 26 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 (about 7 years ago)
- Last Synced: 2024-11-07T00:06:26.064Z (about 1 month 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
[![npm version](https://badge.fury.io/js/react-ab.svg)](http://badge.fury.io/js/react-ab)
[![Build Status](https://travis-ci.org/olahol/react-ab.svg)](https://travis-ci.org/olahol/react-ab)
[![Coverage Status](https://img.shields.io/coveralls/olahol/react-ab.svg?style=flat)](https://coveralls.io/r/olahol/react-ab)
[![Dependency Status](https://david-dm.org/olahol/react-ab/peer-status.svg)](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)
[![A/B Testing Demo](https://cdn.rawgit.com/olahol/react-ab/master/example/demo.gif "A/B Testing Demo")](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