A/B Testing with Google Optimize: A Comprehensive Guide

Contents

1 What is A/B testing?
2 Is Google Optimize good for A/B testing?
3 How to A/B testing with Google Optimize?
4 Conclusion

What is A/B testing?

A/B testing – or split testing – is an experimentation process, in which two or more versions of a variable (web page, page element, etc.) are shown to different segments of website visitors at the same time. The purpose is to identify which version brings about the greatest impact – and drives the most business metrics.

A/B testing provides a splendid way to determine which changes should result in the maximum impact on your product. No longer do web/app owners have to do “guesswork” – all decisions can be made with real-time data as a backup.

When it comes to A/B testing, there are a few questions that need to be addressed:

What is your target audience? Criteria to assess include merchant ID, location, devices (iPhone, desktop, laptop…), etc.
What is the win condition for a particular A/B testing variant?
How do we “read” the data?
Does it work well with our technology stack? (ReactJS)

Implementing a well-designed A/B testing platform will help us read customers’ data and reach business goals faster. However, which tool should we choose – given that the number of options is increasing?

In this article, I will show you how to conduct A/B testing with Google Optimize- as well as to figure out the UI changes necessary for your React Application.

Is Google Optimize good for A/B testing?

After having experimented with various A/B testing tools, I have come to the conclusion that Google Optimize is the only platform that checks all the boxes. Compared to other options, the platform boasts a plethora of benefits – in terms of setup, tracking, and reporting.

Below are a few things we can do with Google Optimize:

1. Highly customized target audience

One thing that many other A/B testing tools are not capable of is customizing the target audience based on their demographics. With Google Optimize, no longer do you need to worry: setting up criteria (location, device types, UTM tracking flag, etc.) can be swiftly finished in just a few minutes. As you may guess, the more detailed information is, the more insights we gain – and the better solution we come up with, right?

2. Test even the smallest change

Google Optimize boasts the ability to execute Javascript functions/ read Javascript variables to determine the target. This is critical – as sometimes, you may want to do some experiments on certain merchants.

3. Powerful reporting tool

A/B testing with Google Optimize is a wise choice for those who care about data analytics and tracking. Why – the platform is integrated with Google Analytics, which means that all website/app data will not be missed out.

Based on the tracking results from Google Optimize, business owners should have no trouble determining the necessary changes for better conversion. Now that a tailored user experience (UX) matters more than ever to business success, there’s virtually no reason to deny such a powerful, accurate tracking tool, right?

4. Easy setup

Google Optimize is a byproduct of Google Analytics – in other words, setting up is extremely simple. All you need to do is to insert a line of code into your current Analytics implementation. Once it is done, new changes can be published immediately.

How to A/B testing with Google Optimize?

To make things easier, I have compiled a quick Google Optimize A/B testing tutorial here for you:

1. Create variants

First thing first, we need to connect Google Analytics to Google Optimize.

In terms of variants, it’s up to you to create as many as you would like. One thing to keep in mind is that you only need to fill in the variants’ titles – the specific corresponding information will be processed in the code.

Based on your input, React applications will read the variant parameter and render the corresponding component later.

2. Targetings

On the Targeting tab, set up “who and “when” to target. The “Who” section is meant for you to control the specific visitors you want to test – while “When” is to determine the time for experimentation.

To specify the percentage of visitors to include in A/B testing, either enter a numeric value directly (e.g: 50%) or use the slider to set the percentage value.

For the “When” section, choose the targeting rule types that you wish – url, GA audiences, behavior, location, technologies used, cookies, etc.

3. Measurements and objectives

Objective addition is recommended – in order to measure effectiveness based on Google Analytics events. To configure your objectives, follow the steps below:

Choose a GA view.
Select a Primary Objective.
Click on “Add objective”.
Provide a description and hypothesis.
Click Save.
Choose the “Event action” that needs to be tracked.

4. Set up variants in the front-end repo.

We will implement the UI changes for each variant in our Github repository repositories.

The first step to do is to embed Google analytics and Google Optimize script:

<script async src="[<https://www.googletagmanager.com/gtag/js?id=>](<https://www.googletagmanager.com/gtag/js?id=>)google_analytics_id"></script>

<script src="<https://www.googleoptimize.com/optimize.js?id=google_optimize_id>"></script>

After that, we can configure gtag to listen to callback events from Google Optimize.

window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}

gtag('js', new Date());


gtag('config', 'google_analytics_id');

gtag('event', 'optimize.callback', {
  callback: (value, name) => {
    console.log(
      'Experiment with ID: ' + name + ' is on variant: ' + value
    );
     window.VARIANT_ID = value;
  },
});

When the optimize.callback event is triggered, the variant ID will be stored in window.VARIANT_ID.

Now, we are ready to create a context provider. This context provider will read the variant ID and make it available through the app.

import { createContext, useState, useEffect } from 'react';


interface ILayoutContext {
  variantId: boolean;
  setVariantId: Function;
}

const LayoutContext = createContext<ILayoutContext>({
  variantId: false,
  setVariantId: (value: boolean) => {},
});

const LayoutContextProvider = () => {
  const [variantId, setVariantId] = useState(false);

  useEffect(() => {
    if (window.VARIANT_ID === '1') {
      setVariantId(window.VARIANT_ID);
    }
  }, [window.VARIANT_ID]);

  return {
    variantId,
    setVariantId,
  };
};

export default LayoutContextProvider;

That’s it, now we can use our context and read the variant ID from our context.

export const AppLayout = () => {
  const { variantId }  = useContext(LayoutContext);
  return (
    <div className="container">
      {variantId ? <ComponentA /> : <ComponentB /> }
    </div>
  )
}

Note that each experiment should be run for at least 2 weeks, and you should not change the parameters during the run.

Conclusion

Without a doubt, AB testing is a critical step to increased conversion rates – as it provides business owners with a legitimate way to “harvest” genuine feedback from users – so that they can make data-driven decisions. Among the many A/B testing tools available, Google Optimize is one you should definitely experiment with.

We hope that the above analysis will help you learn how to do A/B testing with Google Optimize. If you are interested in a high-quality, supportive, highly customized web/app development solution, feel free to reach out to JSLancer for a FREE consultation on how we can help you.

You may be interested in:

A/B Testing with Google Optimize & ReactJS