react-scientist v1.0.1

👩‍🔬 React Scientist

Simple React components for split testing and analytics

Installation

$ npm install react-scientist
$ yarn add react-scientist

Components

Experiment

Props

Usage

import React from 'react';
import { render } from 'react-dom';
import { Experiment } from 'react-scientist';

// Override the static `onStart` method to listen when users are enrolled in an experiment.
// NOTE: Overriding the `onStart` method should happen **before** the React app is rendered to the DOM.

Experiment.onStart = ({ experimentName, experimentId, variantIndex, variantName }) => {
  // Handle experiment start. Typically will send an analytic event to Segment, Google Analytics, etc.
};

const LoginTitleExperiment = () => (
  <Experiment
    name="Login Title"
    variants={[
      {
        name: 'Control',
        weight: 0.5,
        render: () => <h1>Sign In</h1>,
      },
      {
        name: 'Login',
        weight: 0.5,
        render: () => <h1>Login</h1>,
      },
    ]}
  />
);

render(<LoginTitleExperiment />);

Cross Domain Experiments

<Experiment /> uses cookies to store the active variant for your running experiments. If you'd like to run experiments on both a naked domain and a subdomain, pass the root domain as the domain prop. Make sure to prefix the domain with leading . so the cookie will be accessible across any property.

<Experiment
  name="Cross Domain"
  domain=".example.com"
  variants={[
    {
      name: 'Control',
      weight: 0.5,
      render: () => <h1>Sign In</h1>,
    },
    {
      name: 'Login',
      weight: 0.5,
      render: () => <h1>Login</h1>,
    },
  ]}
/>

Metric

Props

Usage

import React from 'react';
import { render } from 'react-dom';
import { Metric } from 'react-scientist';

// Override the static `onEvent` method to listen when events are captured. NOTE: Overriding the `onEvent`
// method should happen **before** the React app is rendered to the DOM.
Metric.onEvent = ({ name, data, options }) => {
  // Handle event capture. Typically will send an analytic event to Segment, Google Analytics, etc.
};

const MetricExample = () => (
  <Metric name="Facebook Login Clicked">
    <Button>Login With Facebook</Button>
  </Metric>
);

render(<MetricExample />);

License

MIT © Sappira Inc.