How to Add Google Optimize A/B Testing to Your React App in 10 Lines of Code
Hi 👋! I’m Faraz, a software engineer @ AdHawk.
I wasn’t able to find too many resources on how to set up Google Optimize in a React app, so I decided to share how I solved this problem.
Google Optimize is a tool that allows you conduct A/B testing on your website, and it’s configurable from the Google Optimize dashboard. This allows non-engineering folks at your company to set up and run experiments on their own.
Creating Your React App
In this tutorial, we will be creating a new React app from scratch using create-react-app and adding Google Optimize to it. Assuming you have npm installed, open up your terminal and enter the following:
npx create-react-app optimize
cd optimize
npm startnpx allows you to use create-react-app without installing it globally. You have access to npx with npm.
You should now have your React app up and running in your browser at localhost:3000
Setting Up Your Google Optimize Experiment
Go ahead and create a free Google Optimize account at https://optimize.google.com.
Once you’re logged in, create a new container and name it whatever you like. I’m naming mine OptimizeExample.
On the next page, create your first experience and enter in the following values:
Name: My first experiment
Editor Page: http://localhost.com:3000
Note: Optimize doesn’t work on localhost. You’ll have to edit your
hostsfile on your machine and create an alias, like I did. I’m usinglocalhost.com. More info on editing your hosts file (Mac, Windows, and Linux) here: https://www.howtogeek.com/howto/27350/beginner-geek-how-to-edit-your-hosts-file/
Next, create a variant. By default the variant will be named Variant 1.
You’ll need a Google Analytics account so you can link Optimize to it. After you link your Optimize experiment to your Google Analytics account, a modal will appear with the <script> tag you will need to add to your app. Here’s what mine looks like (insert your GA_ID and OPTIMIZE_ID):
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-93277234-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_GA_ID', { 'optimize_id': 'YOUR_OPTIMIZE_ID'});
</script>Back in your React app, add the script tag you got to your index.html file in between the <head> tags.
After you’ve added the <script> tag to your React app, go back to the Google Optimize dashboard and select a Primary Objective. I’m going to use Pageviews.
Scroll down to the “Settings” section of the Google Optimize dashboard and click the RUN DIAGNOSTICS button. This will make sure we added the script tag correctly.
Yay! We’re all done setting up the experiment. Now let’s run it.
Running Your Google Optimize Experiment
Scroll back to the top and click on the EDIT button next to the previously created Variant 1. This will open up the Google Optimize editor where we can change things like text, html, and styles.
In this example, let’s go ahead and change the default text inside the <p> tags. To do this, simply click on the text and clickEdit Element and then click Edit HTML.
Let’s change the text to say “Our Google Optimize experiment is working!”.
Make sure to save your changes in the Optimize editor.
We can now run and test our experiment. Let’s do it!. Click the START button at the top of the page 🚀.
If you navigate to localhost.com:3000 you should see your app running! If you’re using chrome, you can close this browser and open a new one in incognito mode. You should see your test working! 🎈
What If You Don’t Want to Use the Google Optimize Editor?
In our case, we didn’t want to use the Google Optimize editor because we were going to edit more than just copy. We wanted a way to hide and show different components in our React app.
Thankfully, Google Optimize allows you to do this. When creating an experiment, scroll down to the button and change the Activation event to custom.
What this does is allows us to specify in our React app when we want to start the experiment. Within the specific React component that you want to do an A/B test in, add this to the componentDidMount lifecycle method.
If you’re going to take away one thing from this article, here it is in 10 lines of code:
Let’s talk about what’s going on here. First, in our componentDidMount, we’re checking to see if the dataLayer array from Google Analytics exists when our component mounts. If it does, we push the value{ event: "optimize.activate" } to the dataLayer. This will activate Google Optimize for us.
Since we don’t know when google_optimize will be available on the window, we use a setInterval to poll and check when it’s available. When it’s available, we pass in our experiment ID (obtained from our Google Optimize dashboard). This returns either a 0 or 1 which determines which variant to show.
One specific use case in our app is testing user engagement if a certain component is showing versus hidden. We use the 0 or 1 to hide/show that component. We add the variant to our local state and clear the interval.
That’s it! We’ve set up a way for Google Optimize to generate a variant for us, which we can use anywhere in our application. Now go and do some A/B testing in your own app!
Thank you for reading!
If you liked this article, be sure to give me some claps and share it 👏 .
Follow me on Twitter @farazamiruddin.
