Photo by elizabeth lies on Unsplash

A/B Testing OutSystems Mobile Apps with Google Optimize

The goal is simple. I have a mobile application built with OutSystems and I want to check whether a red button or a green button converts better.

The application has two screens and looks like this:

A minimalistic shopping app

Step 1: Set Up Google Analytics

The first thing to do is configure Google Analytics so you can track your goals and test which o f the options has a higher conversion rate.

Create a new account and select “Website”. At the end of the process, you will have a tracking code.

A couple of steps and a licensing agreement will get you a tracking ID.

Next, set up a goal. This will measure each variant’s rate of success, and you’ll be able to understand which option is better. For this particular situation, we want people to click the Buy button.

Set up your goal.

Step 2: Set Up Google Optimize

Next, go to Google Optimize. Create a new account if you don’t have one and add a container. At the end of the process, you’ll have a Container ID.

Getting a container ID.

To collect experiment data, link your Optimize account to your Analytics account.

Linking Optimize to Analytics.

Step 3: Configure the Application

With the basic setup done on Google’s side, we need to set up the application. Start by installing the “Google Optimize” component from the OutSystems Forge.

Next, add “SetupGoogleOptimize” to OnApplicationReady, “SendPageView” on the OnReady of the Common/Layout block, and “SendEvent” on the button click event. Be sure to use the Category, Action and Label configured in the Analytics goal.

Preparing your app!

We can now publish and run the application and make sure the events are being properly tracked. Open the application in a browser and check the real-time reports in Google Analytics.

If everything is properly configured, you should see the events in Google Analytics.

Step 4: Configure the A/B Test

It’s time to go back to Google Optimize and create the experiment. I called mine “Green Button” and configured the URL for the homepage.

The experiment is created!

Once that’s done, we can start configuring variants. We’ll just add one called “GreenButton” that will change the color of the button to green.

A variant aimed at conversion!

Next, we need to configure the objective and the targeting of our experiment. The objective will be the goal we set up earlier: clicking the button. On the Targeting tab, change the activation event to “Custom” with an “optimize.activate” value. This is the value the Google Optimize component uses.

Set the objective and targeting for your experiment.

And that’s it! You’re ready to go!

Finally! All is ready!

Step 5: Get Some Results

You can now start seeing your different variants running. The easiest way to do it is by launching an incognito window and access your app’s URL. One of the variants will show. Close all incognito windows, open another incognito window, and you might get the alternative variant (if you don’t, try a couple more times). If all is properly configured, you’ll be able to see both variants.

You can see on the dashboard how many users got which variant.

Google Optimize is now collecting data and managing your experiment. But it will be a while before you can see the results — up to 48 hours. If you’re in a rush, you can always take a peek at the results in Google Analytics while it’s still available!

The green button appears to have a higher conversion rate!

When your results are finally processed, you get all the information you need about your experiment.

Google Optimize chart for the green button experiment