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 Configurations > Integrations.
3. Click on the Contentful integration and enable it. Once enabled, the Contentful screen within the VWO’s Integration section looks like this:
4. Once enabled, you will get to see the auth token for enabling this integration at Contentful.
   
   ATTENTION: This token will be visible only once and cannot be accessed later. Hence you can copy this token and paste it elsewhere to be used while setting up the integration in Contentful.
   
   
   

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 > Marketplace.
3. Look for the VWO app, and click on Install to install it.
4. Click Authorize Access to allow VWO to access your Contentful space.
   
   
5. In the VWO Developer Token field, paste the auth token that you had copied from the Contentful integration panel in VWO. Refer to step 4 here.
   
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 popup, 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: 

Troubleshooting - Regenerating API Auth Token

Considering the security of your account, VWO doesn't render the auth token beyond the first time. In case of losing your auth token, you can perform the following steps:

1. From your VWO dashboard, go to the bottom of the page, and click on Developers.
   
2. On the Developer Dashboard that appears, go to the Tokens tab.
3. Under the Tokens section, you will find the API tokens that you have generated to integrate your VWO account with other third-party applications. Copy the token name of Contentful and click Add another API token.
4. In the Create API Token popup that appears, paste the copied token name of Contentful and set the permission to Browse.
5. Click Generate. This will display the newly generated auth token and paste it securely in the required area in Contentful.
6. Now, delete the old API auth token by referring to the created date. Click on the vertical ellipsis and select Delete.