Integrate VWO Feature Flags with Storyblok

Overview

The VWO-Storyblok integration allows you to run A/B tests and optimize conversions with VWO in Storyblok. You can create, manage, and test multiple content variations for your website directly within Storyblok, using feature flags in VWO’s Feature Experimentation.

With this integration, you can:

• Prepare variations in Storyblok
  Create different versions of content, for example, banners, CTAs, product descriptions, or other content without duplicating pages (creating multiple copies of the same webpage just to show different versions of content).
• Link variations to VWO feature flags
  Map each variation in Storyblok to a corresponding variation under a feature flag in VWO, ensuring seamless delivery during experiments. The feature flag acts as the switch that determines which variation is shown to each visitor.
• Run experiments without developer intervention
  VWO uses the feature flag configuration to determine which variation to serve to each visitor, based on your experiment setup or targeting rules.
• Measure impact
  View performance metrics in VWO to identify which content drives the best engagement or conversions.

For example, you have two homepage banners, a blue one and a red one. In Storyblok, you add both under the same experiment. You link them to a feature flag in VWO, where each version becomes a variation under that flag. VWO then uses the feature flag to show different banner versions to different visitors, tracks the results, and tells you which banner performs better, helping you make data-driven content decisions without manual changes to your site code.

This article further explains how to set up the integration and use it for optimum results.

Prerequisites

• Ensure you have:
  • Active VWO and Storyblok accounts.
  • Admin-level access in VWO and Storyblok.
• Ensure you are on the appropriate Storyblok plan. Check Storyblok App Store page for more details.

Enable the Storyblok Integration for your VWO Account

1. Log in to your VWO account.
2. From the left panel of your VWO dashboard, go to Configurations > Integrations.
3. Locate the Storyblok integration and switch on the toggle to enable it.
4. Once enabled, the system auto-generates an API access token. Copy it, you will need it during your setup.

Install the VWO App Plugin in Storyblok

The VWO app plugin is the bridge that connects your Storyblok content with VWO Feature Experimentation. It enables the two platforms to communicate. Once you install the plugin, you will be able to:

• Create and manage VWO feature flags directly from Storyblok
  The plugin lets you create feature flags in VWO straight from the Storyblok interface. It also lets you fetch existing feature flags from VWO so you can map new content to them without switching between platforms.
• Link content variations to VWO feature flags
  The plugin allows you to add a special custom field inside your Storyblok components. This field enables you to assign each Storyblok variation to a specific variation under a VWO feature flag. Without the custom field, VWO would not be able to decide which content version should be delivered to visitors in an experiment.

To install the VWO app plugin in Storyblok:

1. Log in to your Storyblok account and open the Storyblok space where you want to add the VWO plugin.
2. From the left panel, select Apps to open the App Directory.
3. Go to Personalization, and locate and click on the VWO app.
4. Click Install. The plugin is now available in your space.

Next, you must authenticate the plugin. Before authenticating the plugin, you must first create the experiment blocks you want to test. Once your components are ready, you can authenticate the plugin while configuring content variations for those components.

Create the Experiment Blocks in Storyblok

1. In your Storyblok space, from the left panel, go to Block library and create a new nestable block for your experiment, for example experimentation-vwo. This block acts as a container for all content variations in your experiment.
2. Add a field of type Blocks to the parent block. Let's call it variations. This field will hold all the variations you create for each component you want to test. For more information on how to add fields to a block, see Fields in Storyblok.
3. Based on your requirement, create another nested block for a component that you want to test. For example, to test the banner component of your page, create a block called banner.
4. Add the required fields to the component block. For example, the fields for the banner component can include title, colour, image, and text. For more information, see Fields in Storyblok.
   

5. For each component you want to test, add a custom field of type Plugin in the block. Set this field’s Custom Type value as sb-vwo. This field establishes the link between Storyblok content and VWO feature flags.

   Attention: Using a different value other than sb-vwo will break the Storyblok-VWO mapping.

   

6. Once you have created all testing blocks, create a new content story. The story is the entry point where you add the blocks, configure the variations, and test them.
7. Add the parent experiment block (experimentation-vwo) to the story.
8. In the variations field of the block, add the test component blocks (in this case, Banner) within the parent experiment block.

Once you have configured the story, create variation blocks for each component you want to test.

Create Content Variations in Storyblok

1. Create variations for each component you want to test. For example, for the banner component, you might add Banner 1, Banner 2, and Banner 3 as separate variations.
   
2. Configure each variation by defining values for its fields, such as the title, color, image, and text.
3. In the plugin field, configure and authenticate the VWO plugin.

Authenticate the VWO Plugin in Storyblok

1. The first time you create a content variation in Storyblok, the system prompts you to authenticate the VWO plugin. To do this, in the custom plugin field, click Add Credentials.
   

2. On the Let’s Get You Authenticated pop-up screen, enter the VWO Account ID and the VWO API token (generated while enabling the Storyblok integration in VWO).

   Note: Ensure the VWO account ID is of an account that is enabled with admin-level access permissions.

   

3. Click Save Authentication. Once the plugin is successfully authenticated, a success toast message is displayed. Close the pop-up screen.

   Tip: If you wish to update the plugin data in the future, click the gear icon. This opens the same authentication pop-up screen. Enter the updated details and click Update Authentication.

Next, create feature flags and mapping variations.

Configure Feature Flags and Map Variations

The VWO plugin is bidirectional. Upon successful authentication, Storyblok automatically fetches all the feature flags you create in your VWO account. They appear in the Feature Flag dropdown. Otherwise, the integration gives you an option to create a feature flag from Storyblok itself. Based on your requirement, click New Feature Flag, or select an existing feature flag from the list, or scroll down to the bottom of the list and click Create new feature flag.

To create a feature flag in Storyblok:

1. Click New feature Flag. Alternatively, click the Feature Flag dropdown and select Create new feature flag.
2. Enter a suitable name. In this case, since we are testing banners, let’s call it Banners.
3. Click Create.
   
   Storyblok creates a feature flag and automatically creates a variation. It sets this variation as the default variation, and links it to the feature flag. Alternatively, you can create a new variation or map the feature flag to an existing variation by selecting it from the Variation dropdown.
   
   To verify if the feature flag was created correctly, go to your VWO account. Navigate to VWO Feature Experimentation > Feature Flags and refresh the page. The plugin fetches all the feature flags you created in Storyblok. Additionally, the feature flag’s associated variable is created and the UUID for the first (default) variation is automatically mapped and linked to its corresponding content.
   
4. Similarly, add more variation blocks under the same feature flag and configure their details. For all subsequent variation blocks you add to the feature flag, you must create variations in VWO. For example, for variation block Banner 2, click Create new variation.
   
   You are auto-navigated to the Variations tab of the feature flag in your VWO account. Click Add. The new variation is added and its UUID is auto-generated.
   
5. Click Save now.

6. Go back to your content story in Storyblok. Click the refresh icon to update the list and display the newly created variation.

   Attention: Without refreshing, the new variation will not be visible in Storyblok.

   

7. Navigate to the variation block and click the Select a variation dropdown. Select the newly created variation from the list.
   

8. Click Link Variation. You’ll see a success toast message on the screen once the variation is linked successfully.

   Note: For linking the subsequent variations, you need not authenticate the plugin again. Simply click Link variation to map each variation in Storyblok to its corresponding variation in VWO.
9. Check the Preview this variation checkbox to see what the variation would appear as to the visitors. The preview is displayed on the left panel of the content story screen.
   
10. Click Save and then Publish to save and publish your changes.

Verify Mapping

Perform these steps to verify and confirm that the variations are correctly linked and ready for testing.

• In StoryBlok, click the Publish dropdown arrow and select Published JSON to load the published JSON file.
  
  Confirm each variation includes the correct featureKey and variationKey.
• In VWO, verify that each variation has a unique UUID.

Test the Variations with a VWO Test Campaign

After successfully setting up the configuration in Storyblok, you can switch to VWO to set up other test campaign parameters, such as metrics, audience targeting, and other settings. You can set up rollout or experimentation rules to test the variations. 

The steps below demonstrate this procedure for an A/B Testing rule.

To complete the test setup in VWO:

1. Navigate to Feature Experimentation > Your Feature Flag > Rules > Testing and Personalize.

   Note: The Rules tab is enabled only after you configure the metrics.
2. Click Create a new AB testing rule. For more information, see Step-by-Step Guide to Setting Up an AB Testing Rule.
3. Select the variations you want to test and configure the traffic allocation.
4. Activate the rule by switching the toggle on.
   
   Ensure both the main Feature Flag and the Experimentation Rule are activated (toggle switched on) for the test to start collecting data.
   

After the test starts, VWO starts showing variations to your visitors based on your rule settings. Allow the experiment to run for a sufficient duration to collect meaningful data. Monitor the results of your campaign and make data-driven decisions to improve your conversion rates.

Integrate the VWO SDK with Storyblok to Display Variations

The Storyblok + VWO demo repository provides a sample project that demonstrates how to integrate Storyblok with VWO Feature Management & Experimentation. It serves as a reference implementation for setting up content variations and testing workflows. Use this repository as a starting point to explore, experiment, and adapt the setup for your own implementation.

Need more help?

For further assistance or more information, contact VWO Support.