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.
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 [
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:
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:
'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”.
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 ObjectiveYou 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.

More great blog posts from Antony Siegert

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...

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...

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...

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...

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...