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.

Google Optimize installation and set up

If you have already installed Google Optimize, you can skip this part and go to the next step. The installation and setup process is the same as if you installed Optimize without the Product Fruits connection.

Installation

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>

Please note, that if you also use Google Tag Manager, insert the Google Optimize tag after the GTM tag.

You can use their Chrome extension to validate the installation.

Also, Google Analytics should be installed on your site. We used the gtag.js installation mode for the following tutorial.

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.

This is a link to Google Optimize docs that should help you with getting started.

Don't forget to start the experiment once you are ready by clicking on the Start button.

Connecting Optimize with Product Fruits

The main thing is to get the current variant code to Product Fruits as a custom user property. You need a bit of coding to do that.

First, copy the Experient ID from the Google Optimize Experiment detail page.

Then you have to listen for the  optimize.callback event with javascript. This must be done in your application code.

As noted before, we used the gtag.js installation. If you did the same, you can listen to the event like this:

gtag('event', 'optimize.callback', {
    name: '<<<<< YOUR EXPERIMENT ID >>>>>',
    callback: function(variant) {
        productFruits.identifyUser({ 
        	username: currentUserUsername, // don't forget to pass the correct username!
        	props: { 
        		optVariant: variant // optVariant user property will get the variant ID
        	} 
        })
    }
});

The code uses productFruits.identifyUser() method to send the variant ID to Product Fruits. Please note, variant IDs are numbers, 1 for A, 2 for B, etc.

Displaying A/B content

The last step is to use the new user property to display different content for different variants. This is no different from using regular segmentation feature.

Create a new segment and use the optVariant user property as a rule. For example:

Then just assign this segment to a PF tour, checklist, or another tool. It will display it only for users that have the optVariant user property set to 1 (which is the A variant).