The Best Ways to Use Split With Contentful

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 delivers the right content to the page.

“Use the APIs, Luke”

Contentful provides APIs for delivering 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.

<!-- wp:paragraph -->
<p>&lt;script src="https://cdn.jsdelivr.net/npm/contentful@latest/dist/contentful.browser.min.js"&gt;&lt;/script&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;script src="//cdn.split.io/sdk/split-10.19.0.min.js"&gt;&lt;/script&gt;</p>
<!-- /wp:paragraph -->

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

Contentful 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 console.

Split initialization also expects a key.

<!-- wp:paragraph -->
<p>var factory = splitio({</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>core: {</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>authorizationKey: '&lt;your split client sdk key&gt;',</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>key: 'user_id' // unique identifier for your user</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>},</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>schedule: {</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>eventsPushRate: 5</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>});</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>var splitClient = factory.client();</p>
<!-- /wp:paragraph -->

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!