npm

Need private packages and team management tools?Check out npm Orgs. »

react-scientist

1.0.0 • Public • Published

👩‍🔬 React Scientist Build Status codecov

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.

install

npm i react-scientist

Downloadsweekly downloads

125

version

1.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
Report a vulnerability