Integrate Wingify with Contentful (Server-side)

Overview

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.

Before You Begin

You must have:

• A valid and active Contentful account.
• Access to the Contentful space where you want to run experiments.
• A Wingify Enterprise account with Wingify Feature Experimentation enabled.
• A running A/B project in Wingify Feature Experimentation to test your content.

About the Wingify-Contentful Integration

Wingify empowers content managers to run campaigns at scale intuitively. With the Wingify-Contentful integration, you can create different versions of content in Contentful and test them using Wingify.

Integrating Wingify with Contentful is a three-step process:

1. Create a Contentful Connection in Wingify
2. Install Wingify App in Contentful and Create Variation’s Content
3. Use Wingify Feature Experimentation SDK for Filtering the Content

Create a Contentful Connection in Wingify

To create a Contentful connection:

1. Log in to your Wingify account.
2. From the left panel, navigate to Configurations > Integrations.
3. Click the Contentful integration tile and click Create Connection.
4. Enter a name in the Connection Name field.
5. Enter your Contentful Auth Token in the Auth Token field.
6. Click Create Connection.

Once the connection is created, it appears under the Config > Active Connections section on the Contentful integration page.

Install Wingify App in Contentful and Create Variation’s Content

To install the Wingify app in Contentful and create content for your variations:

1. Log in to your Contentful account.
2. From the panel on the top, go to Apps > Marketplace.
3. Look for the Wingify app, and click on Install to install it.
4. Click Authorize Access to allow Wingify to access your Contentful space.
   
    
5. In the Developer Token field, paste the auth token that you had copied from the Contentful integration panel in Wingify.
    
6. To import your Wingify Projects in Contentful, click Connect with VWO. 
   
   Your account details and the Wingify Feature Experimentation 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 Wingify 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:

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 Wingify, 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, connect it to the VWO Variation Wrapper so you can add content to it:

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 the VWO Variation Wrapper, select VWO Variation Wrapper in the +Add Content dropdown. This fetches all the A/B tests from your Feature Experimentation (FE) 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 Wingify Campaign. When you do this, the campaign visitors recorded by Wingify are displayed.

5. To make your content available for your customers, click Publish.
    

   Note: Ensure that the connected campaign is running. The Feature Experimentation SDK is now able to make decisions based on the campaign parameters.

Use Wingify Feature Experimentation SDK for Filtering the Content

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

{
  "sys": {
      "space": {},
      "id": "41nZggHEplcBOsrPXLOEU",
      "type": "Entry",
      "createdAt": "2021-06-17T14:32:24.306Z",
      "updatedAt": "2021-06-17T14:32:24.306Z",
      "environment": {},
      "revision": 1,
      "contentType": {
          "sys": {
              "type": "Link",
              "linkType": "ContentType",
              "id": "variationContainer"
          }
      },
      "locale": "en-US"
  },
  "fields": {
      campaignTitle: '[VWO] Campaign 182',
      campaignId: '182',
      meta: {
          Control: '7MmQCFBjfrnoKeOpky5Auu',
          'Variation-1': '4BWKtaSeY25INlNy9NKBZq'
      },
      campaignKey: 'Contentful integration',
      "variations": [{
              "sys": {
                  "type": "Link",
                  "linkType": "Entry",
                  "id": "7MmQCFBjfrnoKeOpky5Auu"
              }
          },
          {
              "sys": {
                  "type": "Link",
                  "linkType": "Entry",
                  "id": "4BWKtaSeY25INlNy9NKBZq"
              }
          }
      ]
  }
}

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. The following is a sample snippet you can use to decide which variation to display: 

const vwoSDK = require('vwo-node-sdk');
import sdk from 'contentful-sdk';

// we are using the id of the variation container from the JSON sample above
// In a real-world implementation, the ID would be sext dynamically through, e.g. a slug.
const variationEntry = await sdk.getEntry('41nZggHEplcBOsrPXLOEU');

const settingsFile = await vwoSDK.getSettingsFile(accountId, apiKey)
const vwoClientInstance = vwoSDK.launch({
  settingsFile
});
var variationName = vwoClientInstance.activate(variationEntry.campaignKey, userId)
// variation => 'variation_1'

const variationToBeServed = variationEntry.meta[variation]; // entryId => '6hDfbnInEpiab896VpBueJ'

Troubleshooting - Regenerating API Auth Token

Considering the security of your account, Wingify 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 Wingify 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 Wingify 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.

Need more help?

For more information or further assistance, contact Wingify Support.