Storyblok + VWO Feature Management & Experimentation

Overview

This repository demonstrates a seamless integration between Storyblok as a headless CMS and VWO FME (Feature Management & Experimentation) for A/B testing.

Get Started

Prerequisites

• Storyblok Account: Sign up for free
• VWO Account: Start free trial
• Node.js: Version 16 or higher

Installation

Clone this repository & install dependencies:

git clone [email protected]:storyblok/vwo-demo.git
cd vwo-demo
yarn install

Configuration

Environment Variables

1. Create a .env file in the root directory:

cp .env.example .env

2. Open and fill it with correct values:

STORYBLOK_DELIVERY_API_TOKEN=<REPLACE_WITH_PUBLIC_STORYBLOK_TOKEN>
VITE_VWO_ACCOUNT_ID=<REPLACE_WITH_VWO_ACCOUNT_ID>
VITE_VWO_SDK_KEY=<REPLACE_WITH_VWO_SDK_KEY>

Important

• Copy your space's public access token from Settings > Access Tokens in your Storyblok space
• Get your VWO Account ID and SDK Key from Settings > API Keys in your VWO dashboard

Story schema

To have this demo working properly, please be sure to have a story following this structure:

// 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": { // VWO Custom Field Type
                "isForced": false,
                "isDefault": true,
                "featureKey": "banner",
                "featureName": "Banner",
                "variationKey": "default",
                "variationName": "Default"
              }
            },
            {
              "title": "Banner Variant 1",
              "component": "banner",
              "vwo_variation": { // VWO Custom Field Type
                "isForced": false,
                "isDefault": false,
                "featureKey": "banner",
                "featureName": "Banner",
                "variationKey": "variation1",
                "variationName": "Variation 1"
              }
            }
          ],
          "component": "experimentation-vwo" // Nestable component which will contain all the variations to be tested.
        }
      ],
      "component": "page"
    },
    "slug": "demo",
    "full_slug": "demo"
  }
}

Resources

Documentation

• VWO FME Node.js SDK
• Storyblok Vue Guide
• Feature Flags

Built with ❤️ using Vue.js, Storyblok, and VWO FME SDK