Conduct A/B Tests with Storyblok and Optimizely
Storyblok is the first headless CMS that works for developers & marketers alike.
Ever wondered if putting different text on a button may lead to more sales? Storyblok provides an integration for the market leader Optimizely so you can conduct this kind of test as easily as possible. In this tutorial we will walk you through how to set up your space, what you need from Optimizely and finally put it all together in a NuxtJS application.
Before we get started, let's make sure we understand what Optimizely offers us in terms of A/B testing. Within Optimizely you can run different experiments. These experiments come in different flavors: A/B, feature or multivariant tests to name a few. We will focus on A/B tests in this article.
An A/B test contains variations of the same element. To decide who get's to see which variant, Optimizely provides extensive possibilities of audience forming, traffic allocation and more.
In the end we take these rules we set up, check them against the data we have about our user, show them the right variation and send a message back to Optimizely so that we can measure how the different variations perform with our users.
Configuring Content Structure
To setup A/B Testing with Storyblok and Optimizely we need an account with Optimizely and need to be subscribed to Storyblok's Teams or Enterprise plan.
Now we create a nestable component called "abtest" in the components tab of our space. For the content that we want to present in the variation we need a field of type
Blocks. In order to specify the experiment and variation we will utilize a field of type
Plugin with the custom type
optimizely which was provided by the app we installed beforehand.
Within this field we will set the options
projectId to the values we obtained from Optimizely earlier.
Having completed the type definitions we can now start integrating the actual A/B test into our content. We locate the Story we want to conduct the A/B test on and make sure it has a field of type
Blocks which we can use to place our A/B test components into.
We add two of them and configure each one of them by selecting the corresponding experiment and variation from the drop-down menus.
The final step is adding the actual content we want to display with each variation into the
Blocks field we defined earlier.
Now we just hit the save button on the top of the page and can proceed with the next steps. Awesome!
Conducting the Test
With the setup within Storyblok done, we can look at the draft JSON Storyblok provides us with, and should see two components with
"plugin": "optimizely", each of them holding the data we just configured. Here is how one of them could look like.
The next step is for us to use one of Optimizely's SDKs and render the corresponding Block for the Segment that was assigned to your user by Optimizely.
We will use a Nuxt.JS application as an example.
Rendering the Test Variations
Let's do a quick recap of what we need to conduct our A/B test with Optimizely:
A datafile that defines what experiments and variations there are
Components to render
Information about our user so that the SDK can make the right decision which variation to show
npm i @optimizely/optimizely-sdk
Let's start from the top: we could either download our datafile manually and ship it with the application, but since it changes pretty often, we'd rather not do that. The Optimizely SDK can help us here. The Optimizely control panel provides you with a SDK key. We only need to give that key to the SDK and it will get the datafile on it's own.
The key should be provided through the Nuxt runtime config.
We will do this in combination with the component which gives us a place to render the variation.
In a new component called
AbTest we will make use of dynamic components.
As you can see, we utilize the handy
fetch method of Nuxt to get the datafile with the SDK key we spoke about and get the currently active variation for our user.
The blocks in the body of our Abtest component only get rendered if the active variation matches the one we selected in the Storyblok interface. We use the handy
v-if directive and a computed property in order to achieve this.
Now there's only one step left to take which we can not do for you: identifying your users. The method
optimizelyClientInstance.activate() takes 3 parameters, 2 of which are used to identify and assign users to specific variations. We recommend you take a look at Optimizely's great documentation on how to do this properly.
With that being done, we're now all set to learn how small changes affect things like click-through-rate, conversions and other nifty metrics.