react-scientist

👩‍🔬 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.