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.
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.
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:
Next, we add the Google Optimize ID to the list of Homepage attributes:
Then we update the Homepage editing configuration to be able to edit the Google Optimize ID via the properties dialog:
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.
Back at https://optimize.google.com, we can create our experiment:
Now, let's define the experiment:
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.