A/B Testing with Scrivito and Google Optimize

Antony SiegertPosted on
googlea/b testing

Fine tuning a website takes time, and there are many options to consider. But when it really comes down to it, it's important to find out if the visitors are happy with the improvements. To do this, we need to compare their reactions to the present and the improved versions of the pages concerned. A/B testing with Scrivito and Google Optimize can help you do it well!

In this tutorial, we are going to add Google Optimize to the Example App and show you how to test different homepages. Google Optimize is a powerful tool with many options to fine tune your testing. We are going to use their “Page redirect” option as it fits best with the Scrivito workflow and features, making it faster to implement for editors. 

The Example App has three homepage variations built into the sample content. In the tutorial we are going to set up Google Optimize to test which homepage version visitors spend the most time on. 

Setting up Google Optimize

Before you get started you should be sure to have a Google Analytics Account .  

Setting up Google Optimize is fairly straightforward and done quickly. Once you have a “container”, you are done with this initial step, which allows us to add the “Optimize container ID” to the Example App content so we can set up an Optimize Experiment.

link to Google Optimize

Setting up the Example App

The Example App already includes support for Google Analytics; all you need to do to use it is add your GA ID in the site settings of the Homepage properties menu.  To use Google Optimize we will need to modify the code to include the Optimize ID. This will replace the Google Optimize instructions for adding a snippet to your website. 

First, we will update the Google Analytics code:

src/Components/GoogleAnalytics.js
Copy
...

// Replace the componentDidMount function with this:

  componentDidMount() {
    Scrivito.load(() => {
      const rootPage = Scrivito.Obj.root();
      if (!rootPage) { return []; }
      return [
        rootPage.get('googleAnalyticsTrackingId'),
        rootPage.get('googleAnalyticsOptimizeId'),
      ];
    }).then(([trackingId, optimizeId]) => {
      if (trackingId) {
        window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
        window.ga('create', trackingId, 'auto');
        window.ga('set', 'anonymizeIp', true);
        window.ga('require', 'urlChangeTracker');
        window.ga('send', 'pageview');
        if (optimizeId) {
          window.ga('require', optimizeId);
        }

        this.setState({ trackingId });
      }
    });
  }
...

Next, we add the Google Optimize ID to the list of Homepage attributes:

src/Objs/Homepage/HomepageObjClass.js
Copy
googleAnalyticsOptimizeId: 'string',

Then we update the Homepage editing configuration to be able to edit the Google Optimize ID via the properties dialog:

src//Objs/Homepage/HomepageEditingConfig.js
Copy
...
// Add this to the Scrivito.provideEditingConfig attributes section:

  googleAnalyticsOptimizeId: {
      title: 'Google Optimize ID',
      description: 'See https://optimize.google.com for details.',
    },

...
// Also add it to the propertiesGroups:

  'googleAnalyticsOptimizeId',

...

The final step is to deploy your code changes. Depending on the deployment options you have presently set up, you have other options. For this tutorial, we are assuming you have not claimed your site on Netlify and will deploy from your Scrivito Dashboard at my.scrivito.com/tenants/ (select your website and switch to the “Deployment” tab). When you are finished with your code changes and checked the code compiled via npm install followed by npm start, you can then run the build command, npm run build. Finally, from the deployment tab, choose the build.zip file to deploy the code changes.  Note that if you see “View and customize your deployment details on app.netlify.com” then you have already claimed your site on Netlify and will need to deploy via their dashboard.

Create your Google Optimize experiment

Back at https://optimize.google.com, we can create our experiment:

  • Click “Create experiment”.
  • Give it a name.
  • Add the URL of the "A" page; in our case just input your website URL.
  • Select ”Redirect test”.
  • Click “Create”.
Create Experiment button image and Link to Google Optimize

Now, let's define the experiment:

  • Create a variant - input the URL for the page.
    • Give it a name.
    • Input the URL for Homepage variant 1 from your website.
  • Create an Experiment Objective
    • You will need to link to a Google Analytics property* and view for these options.  
    • Then Link to a view.  “All Web Site Data” is okay.
    • Select “Session Duration” from the “Choose from list” options.
  • You can skip the “Add Optimize snippet to your site?” as we already did that above.
  • Click “Save” at the top right of the screen.
  • Click START EXPERIMENT to set it live.

The variants we want for this tutorial are the other two homepage examples of the Example App, which can be found in the “Pages & Widgets” navigation menu item. So input the URLs of these pages as Homepage variant 1 and  Homepage variant 2. 

Linking Google Analytics property notes: The menu on the right of the GO experiment setup has a link to your container page, and the menu on that page has a “Link Property” item. If you have a GA account and it has permissions, you can see it and select it from the drop down menu, otherwise the "Link Property" panel will have instructions for setup.

Summary

Visitors to your website will now be directed to the Homepage or to Homepage variant 1 randomly. After some time, depending on how many visitors you have, you will see the experiments information in the "Reporting" section in your GO dashboard.

This tutorial used the homepage variants already present in the Example App but you can just as easily duplicate an existing Scrivito page in the page menu, make changes to the copied page, and test the difference. By assigning each page a permalink you can easily set up the URLs in Google Optimize. You may be wondering what benefit this route gives you instead of just using Google Optimize's tools to change the page. With this workflow, the changes you decide on are simple to make live to your visitors, just delete the page they didn't like. No need to re-code your page or trying to remember all the changes you made to the page or even re-deploy.

Learn more about enterprise SaaS CMS Scrivito

More great blog posts from Antony Siegert