Integration with Google Optimize.
Docs:
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 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>
)
}
}
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
Author: hudovisk
Source Code: https://github.com/hudovisk/react-optimize
#reactjs #react #javascript