@bryandbor/optimizely-react

Modern Optimizely integration with React

Simple integrations with Optimizely for React

Install

npm install --save @bryandbor/optimizely-react

or

yarn add @bryandbor/optimizely-react

Usage

Optimizely integration using React Hooks

import React from 'react';

import VariationA from './tests/VariationA';
import VariationB from './tests/VariationB';
import VariationDefault from './tests/VariationDefault';

import {
  useOptimizelyVisitor,
  useOptimizelyTrackEvent,
  useOptimizelyVariant,
  useOptimizelyTag,
} from '@bryandbor/optimizely-react';

// Constants
const experimentId = '1234567890';
const GREETING_RESPONSE_RECEIVED = 'GREETING_RESPONSE_RECEIVED';

export const ExperimentalGreeting = () => {
  const visitor = useOptimizelyVisitor();
  const greeting = `Hello ${visitor ? visitor.visitorId : 'Anonymous'}`;

  const variant = useOptimizelyVariant(experimentId);
  let ExperimentalContent;
  switch (variant) {
    case '45454545': // Variation id generated by Optimizely
      ExperimentalContent = VariationA;
      break;
    case '67676767': // Variation id generated by Optimizely
      ExperimentalContent = VariationB;
      break;
    default:
      ExperimentalContent = VariationDefault;
      break;
  }

  const addOptimizelyTags = useOptimizelyTag();
  const trackOptimizelyEvent = useOptimizelyTrackEvent();

  const handlePositiveResponse = () => {
    addOptimizelyTags({
      friendly: true,
      cordial: 10,
    });
    trackOptimizelyEvent(GREETING_RESPONSE_RECEIVED);
  };
  const handleNegativeResponse = () => {
    addOptimizelyTags({rude: true});
    trackOptimizelyEvent(GREETING_RESPONSE_RECEIVED);
  };

  return (
    <div>
      <div>{greeting}</div>
      <div>
        <ExperimentalContent visitor={visitor} />
      </div>
      <button onClick={handlePositiveResponse}>
        Hello
      </button>
      <button onClick={handleNegativeResponse}>
        Go away!
      </button>
    </div>
  );
};

export default ExperimentalGreeting;

Or using HOCs:

import React from 'react';
import {compose} from 'redux'; // Redux is not required, we're just using to compose HOCs here

import VariationA from './tests/VariationA';
import VariationB from './tests/VariationB';
import VariationDefault from './tests/VariationDefault';

import {
  withOptimizelyVisitor,
  withOptimizelyTrackEvent,
  withOptimizelyVariant,
  withOptimizelyTag,
} from '@bryandbor/optimizely-react';

// Constants
const experimentId = '1234567890';
const GREETING_RESPONSE_RECEIVED = 'GREETING_RESPONSE_RECEIVED';

export const ExperimentalGreeting = ({visitor, variant, addOptimizelyTags, trackEvent}) => {
  const greeting = `Hello ${visitor ? visitor.visitorId : 'Anonymous'}`;

  let ExperimentalContent;
  switch (variant) {
    case '45454545': // Variation id generated by Optimizely
      ExperimentalContent = VariationA;
      break;
    case '67676767': // Variation id generated by Optimizely
      ExperimentalContent = VariationB;
      break;
    default:
      ExperimentalContent = VariationDefault;
      break;
  }

  const handlePositiveResponse = () => {
    addOptimizelyTags({
      friendly: true,
      cordial: 10,
    });
    trackEvent(GREETING_RESPONSE_RECEIVED);
  };
  const handleNegativeResponse = () => {
    addOptimizelyTags({rude: true});
    trackEvent(GREETING_RESPONSE_RECEIVED);
  };

  return (
    <div>
      <div>{greeting}</div>
      <div>
        <ExperimentalContent visitor={visitor} />
      </div>
      <button onClick={handlePositiveResponse} type="button">
        Hello
      </button>
      <button onClick={handleNegativeResponse} type="button">
        Go away!
      </button>
    </div>
  );
};

export default compose(
  withOptimizelyVisitor(),
  withOptimizelyTrackEvent({propKey: 'trackEvent'}),
  withOptimizelyVariant({experimentId}),
  withOptimizelyTag(),
  withOptimizelyTackEvent()
)(ExperimentalGreeting);

License

MIT © bryandbor