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

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 (
      <div>
        <Experiment onChoice={this.choice} name="tagline">
          <Variant name="normal">
            <h1> A A/B testing component for React </h1>
          </Variant>
          <Variant name="enterprise">
            <h1> A vertically integrated React component </h1>
          </Variant>
          <Variant name="lies">
            <h1> One weird React component that will increase your metrics by 100%! </h1>
          </Variant>
        </Experiment>
        <a onClick={this.click} href="//github.com/olahol/react-ab">React AB component</a>
      </div>
    );
  }
});

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 (
      <div>
        <Experiment onChoice={this.choice} random={randomGoogle} name="tagline">
          <Variant name="normal">
            <h1> A A/B testing component for React </h1>
          </Variant>
          <Variant name="enterprise">
            <h1> A vertically integrated React component </h1>
          </Variant>
          <Variant name="lies">
            <h1> One weird React component that will increase your metrics by 100%! </h1>
          </Variant>
        </Experiment>
        <a onClick={this.click} href="//github.com/olahol/react-ab">React AB component</a>
      </div>
    );
  }
});

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 (
      <div>
        <Experiment {...this.props} onChoice={this.choice} name="tagline">
          <Variant name="normal">
            <h1> A A/B testing component for React </h1>
          </Variant>
          <Variant name="enterprise">
            <h1> A vertically integrated React component </h1>
          </Variant>
          <Variant name="lies">
            <h1> One weird React component that will increase your metrics by 100%! </h1>
          </Variant>
        </Experiment>
      </div>
    );
  }
});

var app = express();

app.use(cookieParser());

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

app.listen(3000);