A/B Testing with Scrivito and Google Optimize

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:


// Replace the componentDidMount function with this:

  componentDidMount() {
    Scrivito.load(() => {
      const rootPage = Scrivito.Obj.root();
      if (!rootPage) { return []; }
      return [
    }).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:

googleAnalyticsOptimizeId: 'string',

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

// 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:



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.


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

  • GDPR checklist

    A Quick Check for Compliance

    With GDPR in full effect, we wanted to provide a simple checklist for you to make sure your Scrivito projects are compliant. When using the Example App as the basis for your project, there are several features built in to help. Additionally, as Scrivito is an EU-based company, we work to provide...

  • Integrating Salesforce with Scrivito

    As we continue to add enterprise-level features to Scrivito, we decided to look at other enterprise-level services to integrate. Salesforce is one of those and has a ton of features. We could hire someone full-time just to build integrations to show you the power and flexibility of both Scrivito...

  • Integrating Mailchimp with Scrivito

    There are a myriad of ways to collect email addresses to communicate with your audience. Mailchimp is one of those, and, if you are not familiar with it, you should check them out. Mailchimp is an all-in-one marketing platform that provides quite a lot of features. The most basic feature is...

  • Expanding Scrivito’s Pricing Options

    Announcing new pricing options for Scrivito As we expand the feature set of Scrivito, we also have to determine the most appropriate pricing model for our customers. We have always considered pricing to be an important factor, but the fact remains that the product needs to grow, and requests from...

  • Example App Updates

    What is new in the Example App? The Example App has been a big part of the Scrivito journey, not only for you – our customers – but also for us as developers. We developed the Example App to showcase some of what could be done when implementing a Scrivito-based app. It is used, every day, to test...

  • Customizable Page Menus

    Scrivito’s top-right menu is customizable! Menus can make editors’ lives much easier, and we have had several requests to add items to the menu to aid in a more efficient content generation. So, our developers worked hard and took our mantra of complete developer flexibility to heart. Beginning...

  • The Scrivito Example App now Uses Bootstrap 4

    With Bootstrap 4 finally being released to the wild and with all the new features, of course, we wanted the Scrivito Example App to have the latest and greatest. After all, the Scrivito Example App is our showcase for implementing the Scrivito CMS. While the change from Bootstrap 3 to Bootstrap 4...

  • How to Create a Blog Post in the Example App

    Creating a blog post is simple with the Example App. A blog post has an author, so we will want to add our author page, too. Every blog post page consists of a title, a subtitle, and a widgetlist. The widgetlist is where you will build up the body of the blog post using the available widgets in...

  • Testing Your Scrivito-Based Rails App 

    The question of how to test Scrivito-based apps comes up less often than you would expect, but none the less it is asked. Remember that Scrivito is just Ruby, but being mainly an API, there are some caveats. It is best kept in mind what Scrivito is, a Content Management System, so your testing...