underbelly / react-optimize

ReactJS A/B testing with Google Optimize

react-optimize

Integration with Google Optimize.

Docs:

• Optimize Deploy with GTAG: https://support.google.com/optimize/answer/7513085
• Optimize JS API: https://support.google.com/optimize/answer/9059383

Instalation

yarn add react-optimize

How to use

You first need to add the gtag snippet with the optimize container id in it. If you are using create-react-app you can add the following to public/index.html

<script async src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GA_ID%"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  gtag = function () { dataLayer.push(arguments); }
  gtag('js', new Date());

  gtag('config', '%REACT_APP_GA_ID%', { 'optimize_id': '%REACT_APP_OPTIMIZE_ID%'});
</script>

and define them in your .env

REACT_APP_GA_ID=UA-xyz
REACT_APP_OPTIMIZE_ID=GTM-abc

After that you can use the lib like the following:

import React from 'react';
import { Experiment, Variant } from "react-optimize";

class App extends React.Component {
  render() {
    return(
      <Experiment id="<experiment-id>">
        <Variant id="0">
          Original
        </Variant>
        <Variant id="1">
          Variant 1
        </Variant>
        <Variant id="2">
          Variant 2
        </Variant>
      </Experiment>
    )
  }
}