Using Split With Contentful
Contentful is a popular headless content management system. Split is the leading feature delivery platform. It is frequently the case that customers will want to combine both products: Contentful delivers the right content to a page, and Split can feature flag it for controlled release or experimentation.
“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, and .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 links to API and SDK documentation in the previous section.
Contentful initializes in a straightforward manner.
var client = contentful.createClient({
space: '<your contentful space>',
accessToken: '<your contentful access token>',
});
You’ll have get your space and access token from Contentful 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();
});
Split is event-driven. When the feature flag rules are received, or when they’re updated, Split gives your Javascript an event with which it can turn and draw whatever user interface components have been feature flagged.
What does draw() do?
Feature flagging Contentful content
function draw() {
const treatment = splitClient.getTreatment('contentful_books');
if (treatment === 'on') {
client.getEntry('JNdDRwCQpLKpC6yF6').then(function (entry) {
console.log(entry.fields.products);
drawBooks(entry.fields.products);
});
} else if (treatment === 'off') {
client.getEntry('JfMYap40g0qMlb0hWT').then(function (entry) {
console.log(entry.fields.childrensProducts);
drawBooks(entry.fields.childrensProducts);
});
} else {
drawBooks(['Rowling', 'Bellairs', 'Eddings']);
}
}
Contentful is keeping two lists of authors: children’s and adult. First, Split calls getTreatment to decide if our user should get the “on” or the “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>';
document.getElementById('books').innerHTML = options;
}
'books' is a <select> element. Each time draw() is invoked, Contentful will substitute the new list of authors.
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.
Since Split knows which authors the user was viewing (using a Split impression that was generated when getTreatment was called in draw()) it can tally how many clicks were made for children’s versus adult authors, and even 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!
Questions?
Please contact the author, david.martin@split.io
Written with StackEdit.
To Have and Have Not 