Never Pummel Muskoxen

    optimizely-service
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    npm version NPM

    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.

    Install

    npm i optimizely-service

    DownloadsWeekly Downloads

    5

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    7.43 kB

    Total Files

    6

    Last publish

    Collaborators

    • grug