Integrating VWO with Contentful

About Contentful

Contentful is a cloud-based headless CMS to build digital experiences at scale. It enables teams to unify content in a single hub, structure it for use in any digital channel, and integrate seamlessly with hundreds of other tools through open APIs and robust integration capabilities. To know more about Contentful, click here.

Integrating VWO with Contentful

VWO empowers content managers to run A/B tests at scale in an intuitive manner. With the VWO-Contentful integration, you can create different versions of content in Contentful and A/B test them using VWO.

Integrating VWO with Contentful is a three-step process:

1. Enable the Contentful integration in VWO
2. Install VWO app in Contentful and create variation’s content
3. Use VWO FullStack SDK for filtering the content

Prerequisites

• A Contentful account.
• A VWO Enterprise account with FullStack enabled.
  
  NOTE: If FullStack is not enabled in your VWO account, please contact the sales team at sales@vwo.com.
• A running A/B project in VWO FullStack to test your content.

Enable the Contentful Integration in VWO

To enable the VWO-Contentful integration for your VWO account, follow this:

Procedure

1. Log in to your VWO account.
2. From the left panel of your VWO dashboard, go to the INTEGRATIONS tab.
3. Click on the Contentful integration and enable it. Once enabled, the Contentful screen within the VWO’s Integration section looks like this:

Install VWO App in Contentful and Create Variation’s Content

To install the VWO app in Contentful and create content for your variations, follow this:

Procedure

1. Login to your Contentful account.
2. From the panel on the top, go to Apps > Manage apps.
3. Look for the VWO app, and install it using the Install option in the corresponding ellipses menu.
4. Click Authorize Access to allow VWO to access your Contentful space.
5. In the VWO Developer Token field, enter the developer token having the Browse permission.
   
   INFO: This token would have read-only(browse) level permissions to your organization level information stored in VWO, which can be accessed via API calls by any user in the current Contentful space. You can find the developer token in the Integrations > Contentful > Config section in VWO app. 
6. To import your VWO Projects in Contentful, click Connect with VWO. 
   Your account details and the VWO FullStack projects appear.
7. From the Project dropdown, select the project you wish to work with.
8. To finalize your changes, click Install.

Once you have installed the VWO app in your Contentful account, the next step is to add a content type with a reference field.

Assume you intend to A/B test a text-type field on your webpage. To do this, you first need to create a new content type and then link it to the VWO Variation Wrapper. Let’s see how you can do this:

Procedure

1. Go to the Content model tab and add a new content type by clicking Add content type.
2. In the Create new content type dialog, specify the following:
• Name: Enter a name for your content type. This is a mandatory field.
• API Identifier: By default, this field takes the value you enter in the Name field; however, you can modify it. This is a mandatory field.
• Description: Enter the description for your content type.
3. To finalize your changes, click Create.
4. Once your content type is ready, you can add fields of different types to it. 
   For VWO, we will use the Reference field. This is because the reference field can only be linked to the VWO Variation Wrapper.
5. In the New Reference Field dialog, enter a name for the reference field and click Create.
   You now have a content type with a reference field.
6. To finalize your changes, click Save.

After you've added a content type with a reference field, you would want to connect it to the VWO Variation Wrapper so you can add content to it. Let’s see how you can do this:

Procedure

1. Go to the Content tab, and from the Add entry dropdown, select the content type you just created.
2. To link your reference field to with VWO Variation Wrapper, select VWO Variation Wrapper in the +Add Content dropdown. This fetches all the A/B tests from your FullStack campaign.
3. From the Campaign dropdown, select the one you wish to work with. The traffic allocation corresponding to the variations appears.
4. You may now Create an entry or link an existing entry from Contentful to the control and variations of your VWO Campaign. When you do this, the campaign visitors recorded by VWO are displayed.
5. To make your content available for your customers, click Publish.
   
   NOTE: Please ensure that the connected campaign is running. The FullStack SDK is now able to make decisions based on the campaign parameters.

Use VWO FullStack SDK for Filtering the Content

Once you have published your content, the Contentful API returns data in the following format:

Displaying Variation to Visitors

The Contentful API returns all of the variants of your linked campaign. However, the option to show a specific variation to a visitor is entirely up to you. Following is a sample snippet you can use to decide which variation to display: