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=""></script>
<script src="//"></script>Code language: Django (django)

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>',
})Code language: C# (cs)

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();Code language: C# (cs)

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.

Deploy Continuously with Confidence – Sign up for a Split demo!

feature management and experimentation preview 1
Speed up development cycles, reduce release risk, and focus your team on DevOps best practices that create maximum impact. Get a personalized demo today! 

I Said “Draw!” Cowboy!

  splitClient.on(splitClient.Event.SDK_READY, function() {

  splitClient.on(splitClient.Event.SDK_UPDATE, function() {
  });Code language: JavaScript (javascript)

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>';
Code language: JavaScript (javascript)

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);
Code language: JavaScript (javascript)

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!

Want to Dive Deeper?

For additional education and relevant content, be sure to check out the following articles:

Feature toggles–or feature flags as they’re called–are a powerful development tool. Learn how they started and where they’re headed.

Discover how to use A/B testing to ensure successful canary development. Then, start setting up A/B tests with code examples from Split.

Feature flags are a tool that can assist teams in overcoming the challenge of moving quickly to meet shifting customer needs.

Get Split Certified

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

Deliver Features That Matter, Faster. And Exhale.

Split is a feature management platform that attributes insightful data to everything you release. Whether your team is looking to test in production, perform gradual rollouts, or experiment with new features–Split ensures your efforts are safe, visible, and highly impactful. What a Release. Get going with a free accountschedule a demo to learn more, or contact us for more information.

Photo provided by Freepic