The Best Ways to Use Split with the Contentful API

The following post was previously published by David Martin, Solutions Engineer at Split, on his personal blog channel.

Split is the leading feature delivery platform. Contentful is a popular headless content management system. Customers obviously want to combine both products. Split can implement feature flags for controlled release or experimentation, and Contentful integrations deliver the right content to the page.

Use the APIs, Luke

The Contentful API delivers content to a page. This article will work with the Contentful Javascript API. Split also has a Javascript SDK. You could also code for both in PHP, Android, iOS, Java, Python, Ruby, or .NET.

If you want to look ahead, you can check out the full example HTML/js for this article.

Initializing the API and SDK

First, include your API and SDK:

<script src="https://cdn.jsdelivr.net/npm/contentful@latest/dist/contentful.browser.min.js"></script>
<script src="//cdn.split.io/sdk/split-10.19.0.min.js"></script>

You can get the latest links and versions by visiting the API and SDK documentation links in the previous section.

Contentful API initializes straightforwardly:

var client = contentful.createClient({
  space: "<your contentful space>",
  accessToken: "<your contentful access token>",
});

You’ll have to get your space and access token from the Contentful SDK console.

Split initialization also expects a key:

var factory = splitio({
  core: {
    authorizationKey: "<your split client sdk key>",
    key: "user_id", // unique identifier for your user
  },
  schedule: {
    eventsPushRate: 5,
  },
});

var splitClient = factory.client();

The authorization key is most easily obtained using the Syntax button of your split feature flag rules configuration screen. This tutorial will not cover creating and configuring a feature flag in detail, but you can always visit Split’s help pages for coaching.

In the example above, you would substitute your user’s actual user id with the placeholder user_id.

Once you call factory.client(), Split will begin downloading your feature flags.

I Said Draw, Cowboy!

splitClient.on(splitClient.Event.SDK_READY, function () {
  console.log("SDK_READY");
  draw();
});

splitClient.on(splitClient.Event.SDK_UPDATE, function () {
  console.log("SDK_UPDATE");
  draw();
});

Contentful is keeping two lists of authors: children and adult. First, Split calls getTreatment to decide if our users get the “on” or “off” treatment in this feature flag, contentful_books. The feature flag may be set to provide either one, or to give an answer at random (perhaps for an A/B test).

Once Split has decided which treatment to provide, the if-then-else statement determines which Contentful API call to make. One call pulls the children’s books authors, and the other the adult books authors.

The else statement at the end is an example of a control block. There is no right way to implement a control block; it’s the default behavior when Split can’t be reached. In this case, it passes a list of children’s Gothic authors (Eddings may not qualify, but you get the idea).

How Do You Update a List Dynamically?

With a little DOM manipulation:

function drawBooks(list) {
  let options = "<optgroup>";
  for (const option of list) {
    options += "<option>" + option + "</option>";
  }
  options += "</optgroup>";
}

How Can Split Run an A/B Test?

function clickRead() {
  const e = document.getElementById("books");
  const author = e.options[e.selectedIndex].text;
  const properties = {
    author: author,
  };
  const result = splitClient.track("user", "readClick", 0, properties);
  console.log(result);
}

The full example has a few additional properties fields, for simplicity I’ve left only the author property in this example.

When the read button is clicked, this click handler constructs properties that include the name of the author selected. Then the properties are sent by track call to the Split cloud. The Split SDK handles buffering and transporting the events.

Split knows which authors the user was viewing (using a Split impression generated when getTreatment was called in draw()). It can tally how many clicks were made for children versus adult authors, and create tallies for the authors individually.

In the chart below, clicks on children’s authors are compared to clicks on adult authors. An initial gap becomes a narrow margin. In this case, Split isn’t going to find a statistically significant difference. Maybe if we had compared the children’s Gothic writers? Sounds like a job for an A/B/C test!

Get Split Certified

Split Arcade includes product explainer videos, clickable product tutorials, manipulatable code examples, and interactive challenges.

Switch It On With Split

The Split Feature Data Platform™ gives you the confidence to move fast without breaking things. Set up feature flags and safely deploy to production, controlling who sees which features and when. Connect every flag to contextual data, so you can know if your features are making things better or worse and act without hesitation. Effortlessly conduct feature experiments like A/B tests without slowing down. Whether you’re looking to increase your releases, to decrease your MTTR, or to ignite your dev team without burning them out–Split is both a feature management platform and partnership to revolutionize the way the work gets done. Switch on a free account today, schedule a demo, or contact us for further questions.