optimizely-service

optimizely-service

A simple interface for interracting with Optimizely.

A simple use case (React)

Note: the following assumes everything is set up in the Optimizely web interface and the Optimizely script has been loaded

Suppose we have a simple A/B test set up with a control (we'll call it Original) and a variant (we'll call it Variant).

For this experiment (we'll call it Experiment A), the user will

We want to render ComponentA if the user is placed in the Original bucket, or render ComponentB if the user is placed in the Variant bucket.

The metric we will be tracking is when the component is clicked (we will call this event Clicked).

import React, { useState, useEffect } from 'react';
import optimizelyService from 'optimizely-service';
import { ComponentB } from '../ComponentB';
import { ComponentC } from '../ComponentC';

const ComponentA = () => {
  const [showComponentB, setShowComponentB] = useState(false);
  const clickHandler = () => optimizelyService.pushEvent('Clicked');

  useEffect(() => {
    optimizelyService.activatePage('MyPage');
    setShowComponentB(
      optimizelyService.activeVariationIs('Experiment A', 'Variant')
    );
  }, []);

  return showComponentB ? (
    <ComponentB onClick={clickHandler} />
  ) : (
    <ComponentC onClick={clickHandler} />
  );
};

That's it!

Exported functions

The code example above gives a pretty simple overview of what this library can provide. Here is a list of all of the functions supported by optimizely-service:

Function	Description
getActiveVariation	Gets the name of the currently activated variation for a given experiment
getActiveExperiment	Gets the state of the given experiment
activeVariationIs	Determines if a variation for a given experiment is active
pushEvent	Pushes an event to Optimizely
activatePage	Activates a Page API
trackUserAttributes	Pushes user attributes to Optimizely

Contribution

Not all of Optimizely's functionality is supported by this library. It was created mainly to support the most common use case of a basic A/B test with some event tracking. All PR's to help increase the amount of Optimizely functionality are fully welcome.