576 |
577 | #### `experimentDebugger.enable()`
578 |
579 | Attaches the debugging panel to the `` element.
580 |
581 | * **Return Type:** No return value
582 |
583 | #### `experimentDebugger.disable()`
584 |
585 | Removes the debugging panel from the `` element.
586 |
587 | * **Return Type:** No return value
588 |
589 | ### `mixpanelHelper`
590 |
591 | Sends events to [Mixpanel](https://mixpanel.com). Requires `window.mixpanel` to be set using [Mixpanel's embed snippet](https://mixpanel.com/help/reference/javascript).
592 |
593 | #### Usage
594 |
595 | When the [`
622 |
623 |
624 |
626 |
627 |
629 |
630 |
631 |
;
632 | }
633 | });
634 |
635 | ```
636 |
637 | #### `mixpanelHelper.enable()`
638 |
639 | Add listeners to `win` and `play` events and report results to Mixpanel.
640 |
641 | * **Return Type:** No return value
642 |
643 | #### `mixpanelHelper.disable()`
644 |
645 | Remove `win` and `play` listeners and stop reporting results to Mixpanel.
646 |
647 | * **Return Type:** No return value
648 |
649 | ### `segmentHelper`
650 |
651 | Sends events to [Segment](https://segment.com). Requires `window.analytics` to be set using [Segment's embed snippet](https://segment.com/docs/libraries/analytics.js/quickstart/#step-1-copy-the-snippet).
652 |
653 | #### Usage
654 |
655 | When the [`Section A
625 | Section B
628 |
682 |
683 |
684 |
686 |
687 |
689 |
690 |
691 |
;
692 | }
693 | });
694 |
695 | ```
696 |
697 | #### `segmentHelper.enable()`
698 |
699 | Add listeners to `win` and `play` events and report results to Segment.
700 |
701 | * **Return Type:** No return value
702 |
703 | #### `segmentHelper.disable()`
704 |
705 | Remove `win` and `play` listeners and stop reporting results to Segment.
706 |
707 | * **Return Type:** No return value
708 |
709 | ## How to contribute
710 | ### Requisites
711 | Before contribuiting you need:
712 | - [doctoc](https://github.com/thlorenz/doctoc) installed
713 |
714 | Then you can:
715 | - Apply your changes :sunglasses:
716 | - Build your changes with `npm run build`
717 | - Test your changes with `npm test`
718 | - Lint your changes with `npm run lint`
719 | - And finally open the PR! :tada:
720 |
721 | ### Browser Coverage
722 | [Karma](http://karma-runner.github.io/0.13/index.html) tests are performed on [Browserstack](https://www.browserstack.com/) in the following browsers:
723 |
724 | * IE 9, Windows 7
725 | * IE 10, Windows 7
726 | * IE 11, Windows 7
727 | * Opera (latest version), Windows 7
728 | * Firefox (latest version), Windows 7
729 | * Chrome (latest version), Windows 7
730 | * Safari (latest version), OSX Yosemite
731 | * Android Browser (latest version), Google Nexus 7, Android 4.1
732 | * Mobile Safari (latest version), iPhone 6, iOS 8.3
733 |
734 | [Mocha](https://mochajs.org/) tests are performed on the latest version of [Node](https://nodejs.org/en/).
735 |
736 | Please [let us know](https://github.com/pushtell/react-ab-test/issues/new) if a different configuration should be included here.
737 |
738 | ### Running Tests
739 |
740 | Locally:
741 |
742 | ```bash
743 |
744 | npm test
745 |
746 | ```
747 |
748 | On [Browserstack](https://www.browserstack.com/):
749 |
750 | ```bash
751 |
752 | BROWSERSTACK_USERNAME=YOUR_USERNAME BROWSERSTACK_ACCESS_KEY=YOUR_ACCESS_KEY npm test
753 |
754 | ```
755 |
--------------------------------------------------------------------------------
/circle.yml:
--------------------------------------------------------------------------------
1 | general:
2 | branches:
3 | only:
4 | - master
--------------------------------------------------------------------------------
/documentation-images/debugger-animated-2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pushtell/react-ab-test/b52e06e8d6c90b21f6fb14ca98cd06b514f5b737/documentation-images/debugger-animated-2.gif
--------------------------------------------------------------------------------
/examples/browser/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | Section A
685 | Section B
688 | Table of Contents
4 | 5 | - [Running this example](#running-this-example) 6 | 7 | 8 | 9 | ### Running this example 10 | 11 | 1. Clone the [react-ab-test repository](https://github.com/pushtell/react-ab-test) 12 | 2. Change to the [./example/browser](https://github.com/pushtell/react-ab-test/tree/master/example/browser) directory 13 | 2. Run `npm install` to install dependencies 14 | 3. Run `npm start` 15 | 4. Open [http://localhost:8080](http://localhost:8080) in your browser -------------------------------------------------------------------------------- /examples/browser/app.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | var Experiment = require("../../lib/Experiment"); 4 | var Variant = require("../../lib/Variant"); 5 | var experimentDebugger = require("../../lib/debugger"); 6 | 7 | experimentDebugger.enable(); 8 | 9 | var App = React.createClass({ 10 | render() { 11 | return
12 |
14 |
15 |
17 |
18 |
20 |
21 |
23 |
24 |
26 |
27 |
29 |
30 |
;
31 | }
32 | });
33 |
34 | ReactDOM.render(Experiment 1
13 |Variant A
16 |Variant B
19 |Experiment 2
22 |Variant X
25 |Variant Y
28 |
13 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/examples/browser/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-browser",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "server.js",
6 | "dependencies": {
7 | "react": "^0.14.0",
8 | "react-dom": "^0.14.0",
9 | "webpack-dev-server": "*"
10 | },
11 | "devDependencies": {},
12 | "scripts": {
13 | "start": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config ./webpack.example.config.js"
14 | },
15 | "repository": {
16 | "type": "git",
17 | "url": "git+https://github.com/pushtell/react-ab-test.git"
18 | },
19 | "author": "",
20 | "license": "MIT"
21 | }
22 |
--------------------------------------------------------------------------------
/examples/browser/webpack.example.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require("webpack");
2 | var path = require("path");
3 |
4 | module.exports = {
5 | entry: {
6 | index: path.resolve(__dirname, './app.jsx')
7 | },
8 | output: {
9 | path: __dirname,
10 | filename: 'bundle.js'
11 | },
12 | resolve: {
13 | extensions: ['', '.js', '.jsx']
14 | },
15 | module: {
16 | loaders: [
17 | {
18 | test: /\.jsx?$/,
19 | exclude: /(node_modules)/,
20 | loader: 'babel',
21 | query: {
22 | cacheDirectory: true,
23 | presets: ["stage-1", "es2015", "react"]
24 | }
25 | }, {
26 | exclude: /node_modules/,
27 | loader: 'regenerator-loader',
28 | test: /\.jsx$/
29 | }
30 | ],
31 | postLoaders: [
32 | {
33 | loader: "transform?envify"
34 | }
35 | ],
36 | plugins: [
37 | new webpack.optimize.UglifyJsPlugin()
38 | ]
39 | },
40 | devtool: 'inline-source-map'
41 | };
--------------------------------------------------------------------------------
/examples/isomorphic/Component.jsx:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 | var Experiment = require("../../lib/Experiment");
3 | var Variant = require("../../lib/Variant");
4 |
5 | module.exports = React.createClass({
6 | propTypes: {
7 | userIdentifier: React.PropTypes.string.isRequired
8 | },
9 | render: function(){
10 | return
14 |
17 |
15 |
16 |
11 |
12 |
13 |
15 |
16 |
18 |
19 |
;
20 | }
21 | });
--------------------------------------------------------------------------------
/examples/isomorphic/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | Section A
14 | Section B
17 | Table of Contents
4 | 5 | - [Running this example](#running-this-example) 6 | 7 | 8 | 9 | ### Running this example 10 | 11 | 1. Clone the [react-ab-test repository](https://github.com/pushtell/react-ab-test) 12 | 2. Change to the [./example/isomorphic](https://github.com/pushtell/react-ab-test/tree/master/example/isomorphic) directory 13 | 2. Run `npm install` to install dependencies 14 | 3. Run `npm start` 15 | 4. Open [http://localhost:8080](http://localhost:8080) in your browser 16 | -------------------------------------------------------------------------------- /examples/isomorphic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example-isomorphic", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "server.js", 6 | "dependencies": { 7 | "express": "^4.13.3", 8 | "envify": "^3.4.0", 9 | "express-session": "^1.11.3", 10 | "react": "^0.14.0", 11 | "react-dom": "^0.14.0", 12 | "webpack": "^1.12.2", 13 | "ejs": "^2.3.4" 14 | }, 15 | "devDependencies": {}, 16 | "scripts": { 17 | "start": "webpack --config webpack.example.config.js; node server.js" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/pushtell/react-ab-test.git" 22 | }, 23 | "author": "", 24 | "license": "MIT" 25 | } 26 | -------------------------------------------------------------------------------- /examples/isomorphic/server.js: -------------------------------------------------------------------------------- 1 | require("babel-core/register")({only: /Component|www/}); 2 | 3 | var express = require('express'); 4 | var session = require('express-session'); 5 | var React = require("react"); 6 | var ReactDOMServer = require("react-dom/server"); 7 | var Component = require("./Component.jsx"); 8 | var abTestsEmitter = require("../../lib/emitter"); 9 | 10 | var app = express(); 11 | 12 | app.set('view engine', 'ejs'); 13 | 14 | app.use(session({ 15 | secret: 'keyboard cat', 16 | resave: false, 17 | saveUninitialized: true 18 | })); 19 | 20 | app.get('/', function (req, res) { 21 | var reactElement = React.createElement(Component, {userIdentifier: req.sessionID}); 22 | var reactString = ReactDOMServer.renderToString(reactElement); 23 | 24 | // important to prevent memory leaks 25 | abTestsEmitter.rewind(); 26 | res.render('template', { 27 | sessionID: req.sessionID, 28 | reactOutput: reactString 29 | }); 30 | }); 31 | 32 | app.use(express.static('www')); 33 | 34 | app.listen(8080); 35 | -------------------------------------------------------------------------------- /examples/isomorphic/views/template.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |<%- reactOutput %>
11 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/isomorphic/webpack.example.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require("webpack");
2 | var path = require("path");
3 |
4 | module.exports = {
5 | entry: {
6 | index: path.resolve(__dirname, './www/app.jsx')
7 | },
8 | output: {
9 | path: path.resolve(__dirname, './www'),
10 | filename: 'bundle.js'
11 | },
12 | resolve: {
13 | extensions: ['', '.js', '.jsx']
14 | },
15 | module: {
16 | loaders: [
17 | {
18 | test: /\.jsx?$/,
19 | exclude: /(node_modules)/,
20 | loader: 'babel',
21 | query: {
22 | cacheDirectory: true,
23 | presets: ["stage-1", "es2015", "react"]
24 | }
25 | }
26 | ],
27 | postLoaders: [
28 | {
29 | loader: "transform?envify"
30 | }
31 | ]
32 | },
33 | devtool: 'inline-source-map'
34 | };
--------------------------------------------------------------------------------
/examples/isomorphic/www/app.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var ReactDOM = require('react-dom');
3 | var Component = require("../Component.jsx");
4 |
5 | var container = document.getElementById("react-mount");
6 |
7 | ReactDOM.render(Table of Contents
'; ./node_modules/babel-cli/bin/babel.js --presets es2015,stage-1,react --plugins add-module-exports ./src --out-dir ./lib; ./node_modules/webpack/bin/webpack.js --config webpack.standalone.config.js", 73 | "lint": "eslint .", 74 | "lint:fix": "eslint --fix ." 75 | }, 76 | "repository": { 77 | "type": "git", 78 | "url": "git+https://github.com/pushtell/react-ab-test.git" 79 | }, 80 | "author": "", 81 | "license": "MIT", 82 | "bugs": { 83 | "url": "https://github.com/pushtell/react-ab-test/issues" 84 | }, 85 | "homepage": "https://github.com/pushtell/react-ab-test#readme" 86 | } 87 | -------------------------------------------------------------------------------- /src/CoreExperiment.jsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import warning from 'fbjs/lib/warning'; 4 | import emitter from "./emitter"; 5 | import Variant from "./Variant"; 6 | 7 | export default class CoreExperiment extends Component { 8 | static propTypes = { 9 | name: PropTypes.string.isRequired, 10 | value: PropTypes.oneOfType([ 11 | PropTypes.string, 12 | PropTypes.func 13 | ]).isRequired 14 | }; 15 | 16 | win = () => { 17 | emitter.emitWin(this.props.name); 18 | }; 19 | 20 | state = {}; 21 | 22 | displayName = "Pushtell.CoreExperiment"; 23 | 24 | constructor(props) { 25 | super(); 26 | 27 | let children = {}; 28 | React.Children.forEach(props.children, element => { 29 | if (!React.isValidElement(element) || element.type.displayName !== "Pushtell.Variant") { 30 | let error = new Error("Pushtell Experiment children must be Pushtell Variant components."); 31 | error.type = "PUSHTELL_INVALID_CHILD"; 32 | throw error; 33 | } 34 | children[element.props.name] = element; 35 | emitter.addExperimentVariant(props.name, element.props.name); 36 | }); 37 | emitter.emit("variants-loaded", props.name); 38 | this.state.variants = children; 39 | } 40 | 41 | componentWillReceiveProps(nextProps) { 42 | if (nextProps.value !== this.props.value || nextProps.children !== this.props.children) { 43 | let value = typeof nextProps.value === "function" ? nextProps.value() : nextProps.value; 44 | let children = {}; 45 | React.Children.forEach(nextProps.children, element => { 46 | children[element.props.name] = element; 47 | }); 48 | this.setState({ 49 | value: value, 50 | variants: children 51 | }); 52 | } 53 | } 54 | 55 | componentWillMount() { 56 | let value = typeof this.props.value === "function" ? this.props.value() : this.props.value; 57 | if (!this.state.variants[value]) { 58 | if ("production" !== process.env.NODE_ENV) { 59 | warning(true, 'Experiment “' + this.props.name + '” does not contain variant “' + value + '”'); 60 | } 61 | } 62 | emitter._incrementActiveExperiments(this.props.name); 63 | emitter.setActiveVariant(this.props.name, value); 64 | emitter._emitPlay(this.props.name, value); 65 | this.setState({ 66 | value: value 67 | }); 68 | this.valueSubscription = emitter.addActiveVariantListener(this.props.name, (experimentName, variantName) => { 69 | this.setState({ 70 | value: variantName 71 | }); 72 | }); 73 | } 74 | 75 | componentWillUnmount() { 76 | emitter._decrementActiveExperiments(this.props.name); 77 | this.valueSubscription.remove(); 78 | } 79 | 80 | render() { 81 | return this.state.variants[this.state.value] || null; 82 | } 83 | }; 84 | -------------------------------------------------------------------------------- /src/Experiment.jsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import PropTypes from 'prop-types'; 3 | import CoreExperiment from "./CoreExperiment"; 4 | import emitter from "./emitter"; 5 | import crc32 from "fbjs/lib/crc32"; 6 | 7 | let store; 8 | 9 | const noopStore = { 10 | getItem: function(){}, 11 | setItem: function(){} 12 | }; 13 | 14 | if (typeof window !== 'undefined' && 'localStorage' in window && window['localStorage'] !== null) { 15 | try { 16 | let key = '__pushtell_react__'; 17 | window.localStorage.setItem(key, key); 18 | if (window.localStorage.getItem(key) !== key) { 19 | store = noopStore; 20 | } else { 21 | window.localStorage.removeItem(key); 22 | store = window.localStorage; 23 | } 24 | } catch (e) { 25 | store = noopStore; 26 | } 27 | } else { 28 | store = noopStore; 29 | } 30 | 31 | emitter.addActiveVariantListener(function (experimentName, variantName, skipSave) { 32 | if (skipSave) { 33 | return; 34 | } 35 | store.setItem('PUSHTELL-' + experimentName, variantName); 36 | }); 37 | 38 | export default class Experiment extends Component { 39 | static propTypes = { 40 | name: PropTypes.string.isRequired, 41 | defaultVariantName: PropTypes.string, 42 | userIdentifier: PropTypes.string 43 | }; 44 | 45 | static displayName = "Pushtell.Experiment"; 46 | 47 | win = () => { 48 | emitter.emitWin(this.props.name); 49 | }; 50 | 51 | getSelectedVariant = () => { 52 | /* 53 | 54 | Choosing a weighted variant: 55 | For C, A, B with weights 2, 4, 8 56 | 57 | variants = A, B, C 58 | weights = 4, 8, 2 59 | weightSum = 14 60 | weightedIndex = 9 61 | 62 | AAAABBBBBBBBCC 63 | ========^ 64 | Select B 65 | 66 | */ 67 | 68 | // Sorted array of the variant names, example: ["A", "B", "C"] 69 | const variants = emitter.getSortedVariants(this.props.name); 70 | // Array of the variant weights, also sorted by variant name. For example, if 71 | // variant C had weight 2, variant A had weight 4, and variant B had weight 8 72 | // return [4, 8, 2] to correspond with ["A", "B", "C"] 73 | const weights = emitter.getSortedVariantWeights(this.props.name); 74 | // Sum the weights 75 | const weightSum = weights.reduce((a, b) => { 76 | return a + b; 77 | }, 0); 78 | // A random number between 0 and weightSum 79 | let weightedIndex = typeof this.props.userIdentifier === 'string' ? Math.abs(crc32(this.props.userIdentifier) % weightSum) : Math.floor(Math.random() * weightSum); 80 | // Iterate through the sorted weights, and deduct each from the weightedIndex. 81 | // If weightedIndex drops < 0, select the variant. If weightedIndex does not 82 | // drop < 0, default to the last variant in the array that is initially assigned. 83 | let selectedVariant = variants[variants.length - 1]; 84 | for (let index = 0; index < weights.length; index++) { 85 | weightedIndex -= weights[index]; 86 | if (weightedIndex < 0) { 87 | selectedVariant = variants[index]; 88 | break; 89 | } 90 | } 91 | emitter.setActiveVariant(this.props.name, selectedVariant); 92 | return selectedVariant; 93 | } 94 | 95 | getLocalStorageValue = () => { 96 | if(typeof this.props.userIdentifier === "string") { 97 | return this.getSelectedVariant(); 98 | } 99 | const activeValue = emitter.getActiveVariant(this.props.name); 100 | if(typeof activeValue === "string") { 101 | return activeValue; 102 | } 103 | const storedValue = store.getItem('PUSHTELL-' + this.props.name); 104 | if(typeof storedValue === "string") { 105 | emitter.setActiveVariant(this.props.name, storedValue, true); 106 | return storedValue; 107 | } 108 | if(typeof this.props.defaultVariantName === 'string') { 109 | emitter.setActiveVariant(this.props.name, this.props.defaultVariantName); 110 | return this.props.defaultVariantName; 111 | } 112 | return this.getSelectedVariant(); 113 | } 114 | 115 | render() { 116 | return
114 |
;
136 | } else if(experimentNames.length > 0){
137 | return ×
115 | {experimentNames.map(experimentName => {
116 | var variantNames = Object.keys(this.state.experiments[experimentName]);
117 | if(variantNames.length === 0) {
118 | return;
119 | }
120 | return
121 |
;
133 | })}
134 | {experimentName}
122 | -
123 | {variantNames.map(variantName => {
124 | return
- 125 | 129 | 130 | })} 131 |
This panel is hidden on production builds.
135 |
138 | {experimentNames.length} Active Experiment{experimentNames.length > 1 ? "s" : ""}
139 |
;
140 | } else {
141 | return null;
142 | }
143 | }
144 | });
145 |
146 | module.exports = {
147 | enable() {
148 | attachStyleSheet();
149 | let body = document.getElementsByTagName('body')[0];
150 | let container = document.createElement('div');
151 | container.id = 'pushtell-debugger';
152 | body.appendChild(container);
153 | ReactDOM.render(
112 | {this.props.text}
113 |
114 | )
115 | }
116 | });
117 | let App = React.createClass({
118 | render: function(){
119 | return
223 |
;
226 | }
227 | });
228 | yield new Promise(function(resolve, reject){
229 | ReactDOM.render(