A/B testing via Google Optimize

If you want to A/B test Product Fruits tours or hints, you can use several external A/B testing tools. This article covers Google Optimize, which you can use for free.

1. Install Google Optimize

Go to Google Optimize, create a container and follow their installation steps. You should end up with a similar JS snippet installed in your application:

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

You can use their Chrome extension to validate the installation.

Also, Google Analytics should be installed in your site. We use the gtag.js installation mode in the following tutorial.

2. Create an Optimize experiment and variants

Create your experiment and variants. You can set the traffic distribution, your goals, and other settings. It is up to you. You can start with a simple two variants and a 50:50 distribution. Don't forget to start the experiment once you are ready.

3. Pass the current variant to Product Fruits

To get the current variant to Product Fruits, you need a bit of coding. First, copy the Experient ID from the Google Optimize Experiment detail page.

You will need this in the following code. Generally, you have to listen to optimize.callback event.

As noted before, we use gtag.js installation. In this case, you can listen to the event like this:

gtag('event', 'optimize.callback', {
    name: '<<<<< YOUR EXPERIMENT ID >>>>>',
    callback: experimentReady

Then, implement the function that will read the variant ID. You have to pass the variant number to the Product Fruits user information object. It depends on your installation type, we will show a simple example:

function experimentReady(variant) {
	productFruits.identifyUser({ username: currentUserUsername, props: { optVariant: variant } })

As you can see, we will get the variant number as the parameter of the function. Then, we call the identifyUser method to pass it to Product Fruits. In the final code, you should check if Product Fruits is ready and if not, you shouldn't call the identifyUser method, but rather enhance the initial user information object.