Morioh
Login
Mark Mara

Mark Mara

3 years ago

ReactJS A/B testing with Google Optimize

react-optimize

Integration with Google Optimize.

Docs:

Installation

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>
    )
  }
}

Contributors ✨

Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!

Download Details:

Author: hudovisk

Source Code: https://github.com/hudovisk/react-optimize

#reactjs #react #javascript

ReactJS A/B testing with Google Optimize
44.95 GEEK