👩‍🔬 React Scientist

Simple React components for split testing and analytics

Installation

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

Components

Experiment

Props

| name | type | required | default | description | |---|---|---|---|---| | name | string | ✅ | | The name of the experiment | | id | string | | "" | An external experiment ID, e.g. from Google Optimize | | userId | string | | "" | A static user ID to ensure logged-in users have consistent experiences when running experiments | | domain | string | | document.location.host | The domain that the variant cookie should be set on. | | variants | array | ✅ | | List of possible variants for the experiment to choose from. |

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

| name | type | required | default | description | | --------- | ------ | -------- | ------- | ---------------------------------------------------------------------- | | name | string | ✅ | | The name of the event, e.g. Button Clicked | | on | string | | click | The event to listen to, e.g. click, hover | | data | object | | {} | Extra data to send along with the event, e.g. { location: 'banner' } | | options | object | | {} | Options to pass to Event handler |

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.