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

ReactJS A/B testing with Google Optimize
https://github.com/hudovisk/react-optimize

abtesting reactjs

Last synced: about 1 month ago
JSON representation

ReactJS A/B testing with Google Optimize

• Host: GitHub
• URL: https://github.com/hudovisk/react-optimize
• Owner: hudovisk
• License: mit
• Created: 2018-11-09T18:23:56.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-04-26T08:57:31.000Z (almost 3 years ago)
• Last Synced: 2025-10-09T05:30:04.072Z (5 months ago)
• Topics: abtesting, reactjs
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-optimize
• Size: 5.21 MB
• Stars: 189
• Watchers: 3
• Forks: 23
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-optimize

[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)

[![Build Status](https://github.com/hudovisk/react-optimize/workflows/Build/badge.svg)](https://github.com/hudovisk/react-optimize/actions) [![Greenkeeper badge](https://badges.greenkeeper.io/hudovisk/react-optimize.svg)](https://greenkeeper.io/)

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

## Installation

```

yarn add react-optimize

```

You first need to add the gtag snippet with the optimize container id in it. If you are using [create-react-app](https://github.com/facebook/create-react-app)

you can add the following to `public/index.html`

```html

  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%'});

```

and define them in your `.env`

```

REACT_APP_GA_ID=UA-xyz

REACT_APP_OPTIMIZE_ID=GTM-abc

```

## How to use

#### A/B Test

If the experience is a **A/B testing** you can use the lib like the following:

```jsx

import React from 'react';

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

class App extends React.Component {

  render() {

    return(

      

        

          Original

        

        

          Variant 1

        

        

          Variant 2

        

      

    )

  }

}

```

#### Multivariate Test

If the experience is a **multivariate testing** to test variants with two or more different sections. You can use the lib like the following applying the props **asMtvExperiment (confirm that is multivariate)** and the **indexSectionPosition** on google optimize like the image below:

![google optimize multivariate test](./google-optimize-test.png)

```jsx

import React from 'react';

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

class App extends React.Component {

  render() {

    return(

      <>

        

          

            Original

          

          

            Variant 1

          

        

        

          

            Original

          

          

            Variant 1

          

          

            Variant 2

          

        

        

          

            Original

          

          

            Variant 1

          

        

      >

    )

  }

}

```

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
Hudo Assenco
💻 📖

    
Dobes Vandermeer
💻 📖

    
Timo Laak
👀

    
Kelvin Maues
💻 📖

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!