Run A/B tests with VWO within your Storyblok content, personalize user experiences, and optimize conversions.

By connecting VWO with Storyblok, your project can display different variants of content. When your experiment ends, check in VWO how users reacted to these changes, optimizing your copy and assets for better conversion.

How to install

• In your VWO dashboard, go to Configurations > Integrations.

• Search and install the Storyblok integration.

• An access token will generate, copy it, you will need it during your setup.

• In your Storyblok space, go to Apps.

• Go to Personalization and find the VWO app.

• Click Install.

• This plugin is now available in your space.

Usage

• On your VWO dashboard, create a new A/B test and add as many variations as you need for your experiment.

• On Storyblok, first go to the Block Library and create a experimentation-vwo block with a variations field of type Blocks, this will allow you to set as many variations as needed.

• To any Block you want to include in your experiments, add a Plugin field, give it a name (for example, vwo_variation) and set sb-vwo as its Custom Type.

• On your Story, add a experimentation-vwo block, add nested blocks and map them to the corresponding feature flag and variation name.

The first time you use the plugin within your Space you will need to introduce the access token provided when you installed the Storyblok integration.

API Usage

When you fetch your Story data, under the content property, you will get a variants object with all the items you included.

// Story Object

{
  "story": {
    "name": "Demo",
    [...]
    "uuid": "f36c7dc5-07b3-4801-9699-11348af688b1",
    "content": {
      "_uid": "983137e6-175a-4d0a-be15-2536508fe097",
      "body": [
        {
          "_uid": "60415a25-7583-4cd1-96b1-3380f5ec15d8",
          "variations": [
            {
              "title": "Banner Variant Default",
              "component": "banner",
              "vwo_variation": {
                "isForced": false,
                "isDefault": true,
                "featureKey": "banner",
                "featureName": "Banner",
                "variationKey": "default",
                "variationName": "Default"
              }
            },
            {
              "title": "Banner Variant 1",
              "component": "banner",
              "vwo_variation": {
                "isForced": false,
                "isDefault": false,
                "featureKey": "banner",
                "featureName": "Banner",
                "variationKey": "variation1",
                "variationName": "Variation 1"
              }
            }
          ],
          "component": "experimentation-vwo"
        }
      ],
      "component": "page"
    },
    "slug": "demo",
    "full_slug": "demo"
  }
}

Check out the repository of a demo app built by our team to learn more.