How to setup A/B tests in Storyblok, with Google Optimize
Storyblok is the first headless CMS that works for developers & marketers alike.
Context and introduction
This tutorial is brought to you by the Spendesk Web Squad and more specifically by Lionel Paulus, Senior Growth Engineer and Michael Saifoudine, Senior Website Manager.
In this tutorial, we will go through the different steps to integrate Google Optimize with Storyblok in order to build a ready-to-use A/B testing infrastructure. The main goal behind such an integration is to enable your marketing, growth and demand generation teams to do their best work by providing them with a no-code/low-code building experience.
Before diving in, here’s a bit of context:
At Spendesk, we recently conducted a full migration process, moving out from two CMSs to centralize all our web activities into Storyblok. Once Storyblok was all set and ready to use, we quickly faced a challenge that needed to be tackled: we wanted to build a proper growth and experimentation strategy in order to improve our conversion rates.
At the time, we were already using Google Optimize as our go-to A/B testing tool but we only used it to build simple tests: iterating on the copywriting or tweaking small layout changes here and there. It was a start but clearly not enough. We wanted to take our tests to the next level by having more options to customize our pages and be able to build completely different layouts and components right from our headless CMS: Storyblok.
We noticed that there was an existing integration with Optimizely and we figured it could be possible to build our very own bridge with Google Optimize using the Google Optimize JavaScript API. Thankfully, we managed to find a way to build a simple integration in less than 2 days, allowing our website contributors to easily ship A/B tests right from Storyblok.
Without further ado, here’s how we did it.
To make sure we cover all the necessary information, please use the following table of contents to find the piece of knowledge that interests you the most.
- Functional overview: how to build a test with Storyblok & Google Optimize
- Technical tutorial: how to integrate Storyblok with Google Optimize
- Requirements to run A/B tests on a BtoB SaaS website
- Food for thought: the future of A/B testing on a BtoB SaaS website like Spendesk
Please be aware that Google Optimize has been shut down. Nonetheless, the principles and approaches described in this article are universally applicable to a certain degree and may be adapted to be used in combination with the A/B testing provider of your choice.
I) Functional overview: how to build a test with Storyblok & Google Optimize
In this section, we will go through all the steps to build an A/B test experiment from the perspective of a content editor.
What we will cover together:
- How to build a story (aka a page) with the A/B tests components in Storyblok
- Basic knowledge about launching a testing campaign in Google Optimize
1/ Create the page where you want to run the A/B test
)
Storyblok create a new story
Assuming that you already know what you want to test, how, when and why. You can log in to Storyblok and create a new story to get started.
2/ Add an “A/B test component” to your page
In this case, we’ll assume that we want to create a simple A/B test where we want to test two different variations of the hero component.
First of all, we need to add a new “A/B Test” block to our page. This “A/B Test” component doesn’t exist natively in Storyblok. It was created by our Web Engineer to enable this Google Optimize integration. More on that in the “Technical tutorial” section.
)
Storyblok add A/B test component
)
Storyblok select A/B test component
Once the block is added, we can now copy/paste the existing “Hero” component ” that we want to test into the “A/B Test” component that was just added.
)
Duplicate the component you want for A/B test
The A/B test component acts as a “hub” for our testing variations. This allows us to test two different components while staying on the same page.
)
Configure Storyblok A/B test component
Once we are in the “A/B Test” block, we can complete the setup of our experiment:
- Here, we paste the original version of the component that we want to test
- Experiment ID: this information can be found in the Google Optimize back office of a ready-to-launch campaign (see screenshot below).
- Variant: you can select the variation of the component you are testing. In this case, we just pasted the original component. We will duplicate this “A/B test” component right after to create the variation B of our test.
- Fallback: this feature enables us to make sure there’s always a component that will be displayed by default on the page even if the experimentation is down or not running anymore on the Google Optimize side of things.
3/ Configure your Google Optimize experiment
In the meantime, you need to create an A/B test campaign in Google Optimize to generate the Experiment ID:
)
Create google optimize campaign
By linking your Google Optimize experiment to your Google Analytics account, you’ll be able to generate an Experiment ID that you can copy and paste back into the dedicated field in Storyblok.
)
Link google analytics ID with google optimize
4/ Preview your A/B test variants
Once you have created your two A/B test components in Storyblok, you’ll now want to preview the two layouts before officially launching your experiment in Google Optimize.
In order to generate the right preview in Storyblok’s Visual Editor, we enabled a technical bridge between the Storyblok preview and the Google Optimize one. Once you click on the “Web preview” of either variant in Google Optimize, it’ll automatically impact the Storyblok preview to show you the right variation in the Visual Editor. To find out about how we did it, please refer to this section of the tutorial.
)
Google optimize create variants
5/ Publish things live
Once everything is ready-to-go, you just have to launch your A/B test campaign in Google Optimize and publish your page in Storyblok. That’s it, your A/B test is now live.
II) Technical tutorial: how to integrate Storyblok with Google Optimize
On the technical side, the difficulty of the implementation will mostly depend on the way you organize your codebase. But in the best scenario, you should have Google Optimize already installed and only one piece of code that dynamically renders all your pages by importing the right components based on the blocks used on Storyblok. That’s where we will implement this A/B test show / hide logic based on the variant currently triggered by Google Optimize.
First, we need to know when a Google Optimize experiment is triggered. For that, we will rely on the Google Optimize JavaScript API to set up a callback. You can find more information about the API and the callback here on the official doc.
When invoked, the callback will return the id of the experiment (our experimentId variable) and a number corresponding to the variant triggered (our variant variable).
What does the number correspond to?
- 0 = Original
- 1 = Variant 1
- 2 = Variant 2
gtag('event', 'optimize.callback', {
callback: (variant, experimentId) => {
console.log(`The Google Optimize experiment ${experimentId} has been triggered on variant ${variant}`)
// Push the data in your state management system
},
})
Register the callback after Google Optimize has been initialized
Then, you need to save that information to be able to read it from the piece of code that handles the components rendering. For that, I have chosen to use my state management system.
And you must have guessed it by now, the last thing to do is to conditionally render the A/B test components based on the Storyblok payload and the Google Optimize callback data.
Compare the experiment ID, the variant number, the fallback boolean and when it matches, show the component! ✨
And that’s all, you should have a working Google Optimize integration on Storyblok by now. Pretty easy, no?
III) Requirements to run A/B tests on a BtoB SaaS website: think about the experimentation ecosystem first
Most of the time, people think about the tools before thinking about the strategy behind it. In the section below, we just wanted to give some highlights about why it is so important to set some clear guidelines before diving into this experimentation topic.
A/B testing is a crucial aspect of any BtoB SaaS website. It allows businesses to compare two versions of a webpage or app feature to see which one performs better. By conducting A/B tests, businesses can make data-driven decisions about their website and improve its performance.
However, running A/B tests on a BtoB SaaS website requires more than just implementing a tool or solution. It is important to build a strong experimentation ecosystem that includes clear objectives, a well-defined testing strategy, and the right tools and resources.
Without a robust experimentation ecosystem, businesses may struggle to get the most out of their A/B testing efforts. They may end up making decisions based on incomplete or inaccurate data, which can lead to suboptimal results and even harm their website's performance.
To ensure that A/B testing is successful on a BtoB SaaS website, businesses must first focus on building a strong experimentation ecosystem. This involves defining clear objectives, developing a testing strategy, and choosing the right tools and resources.
By taking the time to establish a strong experimentation ecosystem, businesses can gain valuable insights from their A/B tests and make data-driven decisions that improve the performance of their website. This can ultimately lead to increased conversions, revenue, and customer satisfaction.
IV) Food for thought: conclusion and some insights about the future of A/B testing on a BtoB SaaS website like Spendesk
Building A/B tests with an easy no-code integration between Google Optimize and Storyblok enables our marketing teams to easily ship new A/B tests without the intervention of any developer. It also enables us to benefit from the powerful reporting infrastructure provided by Google Analytics while having the flexibility and autonomy to build custom A/B tests right from Storyblok, with the Visual Editor experience we all love.
Technically speaking, building such an integration is not so complicated as long as you have the technical expertise to use Storyblok’s and Google’s APIs. As you saw in the technical tutorial, we highlighted some key requirements and features that we have at Spendesk that made this integration possible.
Now that we have such a useful integration between these two systems, we can really focus all our web efforts into conversion topics. Here are a few use cases we have in mind for the future:
- One potential future development for A/B testing on a BtoB SaaS website like Spendesk is the integration of machine learning algorithms into the testing process. This could allow us to automate the testing of different variations and quickly identify the most effective ones. In the short term, to take baby-step towards this vision, we’re thinking of customizing our website experience to incoming visitors: by adapting the copywriting or showcasing different content or company logos based on anonymous criterias.
- Another opportunity is the development of innovative conversion paths. Classic forms are very generic and there might be some new ways to build conversion experiences with a more customer-centric and immersive approach. BtoB doesn’t have to be boring. We could think of building new conversion flows with more interactions for the visitors.
- Finally, we’re also thinking about implementing a more powerful analytics suite to create an end-to-end tracking infrastructure between our marketing website and our core product that we sell. This would allow us to create a seamless product experience and bring new possibilities on how you convert customers and facilitate product adoption.
| Resource | Link |
|---|---|
| Google optimize | https://marketingplatform.google.com/about/optimize/ |
| Google Optimize Documentation | https://developers.google.com/optimize/devguides/experiments |
Authors
