# Contentful x Optimizely

# Introduction

Using Optimizely is a great option if you are looking to implement A/B testing, feature flags, and track how different experiments are enhancing your customer experience. We want to separate the concerns between our experiments and our content, and that is why the Optimizely Contentful App (opens new window) comes in handy.

The Optimizely app empowers editors and content managers to run experiments on structured content in a simple way.

# Let's Get Started

Before we start making content variations, we'll want to have a few things set up first in Optimizely:

  1. Optimizely account (Fullstack or Rollouts (opens new window))
  2. Define Feature Flags (docs (opens new window))
  3. Create a Feature Test (docs (opens new window))

# Contentful

Now we can go to our Contentful Space -> Apps -> Manage Apps and install the Optimizely app.

The guide and documentation found (here) (opens new window) will provide the necessary instructions for setting up the project and linking to a specific content type.

A simple example would be to add a variation to the Hero Banner Section on your homepage. The variationContainer content type would appear with references (ie. variations) of the heroBanner. Here is what the indexed data should look like in Nacelle when viewing the sections of your page (Please note, only the important data is shown below. This is not an exact representation).

"sections": [
    {
      "sys": {
        "contentType": {
          "sys": {
            "id": "variationContainer",
          }
        },
      },
      "fields": {
        "meta": {
          "bfcm10": "XC51P2oxuXVIYxqIewfp2",
          "bfcm8": "2NI5R16u3iSf6vcZhMp668"
        },
        "variations": [
          {
            "sys": {
              "id": "XC51P2oxuXVIYxqIewfp2",
              "contentType": {
                "sys": {
                  "id": "heroBanner",
                }
              },
            },
            "fields": {
              ...
            }
          },
          {
            "sys": {
              "id": "2NI5R16u3iSf6vcZhMp668",
              "contentType": {
                "sys": {
                  "id": "heroBanner",
                }
              },
            },
            "fields": {
              ...
            }
          }
        ],
        "experimentTitle": "[Optimizely] Promo Test",
        "experimentId": "18828932621",
        "experimentKey": "promo_test"
      }
    },
    ...
]

# Frontend

# Optimizely

The best way to interact with Optimizely is with the javascript @optimizely/optimizely-sdk (opens new window).

  1. Install the sdk (docs (opens new window))
  2. Link the optimizely data file (docs (opens new window))

# Nacelle

There are a few ways to access the data depending on your frontend implementation.

  1. Client JS SDK
  2. HailFrequency

Here is how we would use the client sdk:

const fetchPage = async (client, pageHandle, user, $optimizely) => {
  const page = await client.data.page({ handle: pageHandle });

  const section = page.sections.find((section) => {
    return section.sys.contentType.sys.id === 'variationContainer'
  });

  // Let's expose the data needed by Optimizely
  const {
    meta,
    variations,
    experimentTitle,
    experimentId,
    experimentKey
  } = section.fields

  // Is feature enabled?
  const enabled = $optimizely.isFeatureEnabled('promo', userId);
  console.log('enabled?', enabled)

  // What variation should I use for a given user?
  const variation = $optimizely.activate(
    experimentKey,
    user: user.id,
    attributes: user.attributes
  );
  console.log('variation', variation)

  // Let's utilize the correct variation for our content 
  const entryId = meta[variation];
  console.log('entryId', entryId)

  const content = variations.find((variation) => (variation.sys.id === entryId))
  console.log('content', content)
};