Introduction to Part II

In part two of the DIY Split Proof-of-Concept tutorial, you will configure Dynamic Config, and track user behavior to Split. This tutorial builds on part one, so work through it first.

Split supports more than a dozen programming languages, but this tutorial is made for Javascript. To be successful, you need to be a Javascript programmer and have access to a Split account, which can be obtained for free at https://www.split.io/signup/

tutorial.html

In the first part, we added a feature flag to a simple HTML page and used the flag treatment to set text on the page. Here is an example of how that page may have looked when finished.

<html>
<head>
	<title>Basic HTML Page</title>
<style>
	.body {
		color: 'white';
  	}
  	.foo {
  		display: flex;
		justify-content: center;
		align-content: center;
		flex-direction: column;
		text-align: center;

		font-size: 50;
		background-color: rgba(64, 128, 0); 
		color: rgb(200, 200, 200);
		width: 800; 
		height: 600; 
  	}
</style>
<script>
	function donateHandler() {
		alert('donate!');
	}
	function adoptHandler() {
		alert('adopt!');
	}
</script>
<script src="//cdn.split.io/sdk/split-browser-0.9.1.full.min.js"></script>
<script>
	var factory = splitio({
	  core: {
	    authorizationKey: '2d20dfejlhn8ihi1tla2e27bs4ishqa54nt5',
	    key: 'user_id' // unique identifier for your user
	  }
	});

	var client = factory.client();

	client.on(client.Event.SDK_READY, function() {
	  var treatment = client.getTreatment('tutorial');
	  console.log(treatment);
	  const call2Action = document.getElementById("call2Action");
	  if(treatment === "on") {
		call2Action.innerHTML = "ACT NOW";
	  } else if (treatment === "off") {
	  	call2Action.innerHTML = "WE NEED YOU";
	  } else if (treatment === "control") {
	  	call2Action.innerHTML = "WE NEED YOU";
	  } 
	});	
</script>
</head>
<body>
	<div>
		<div id="mainDiv" class="foo">
			<img id="banner" src="http://www.cortazar-split.com/dog_origin.jpeg"/>
			<p id="call2Action">Adopt a Dog</p>
		</div>
		<div style="text-align: center; padding: 25px">
			<button onClick="donateHandler()">DONATE</button>
			<button onClick="adoptHandler()">ADOPT</button>
		</div>
	</div>
</body>
</html>

We used the document object model (DOM) to get the call2Action element by id and set its innerHTML to a hard coded string.

Hard coded strings can be a problem. If you want to change the message, you have to edit the code. That might mean doing a build and pushing it to production or something similarly onerous. Can we use Split to provide the text dynamically?

Dynamic Config

In the first part of the tutorial, we created a new feature flag called “tutorial”. Find this flag in your Split console.

The flag has configuration sections for “Define treatments”, “Dynamic configuration”, “Individual targets”, “Traffic allocation”, and “Targeting rules”. We used the default rule in “Targeting rules” to turn on and off the flag in part one.

Now we’re going to add configuration to “Dynamic configurations”.

From the “Select format”, choose “JSON”. Now there is an edit area for both on and off treatments. For on treatment, use this JSON:

{"text":"Bring a Cute Dog Home","image":"http://www.cortazar-split.com/dog_by_the_door.jpeg"}

And for off treatment, you can use this JSON:

{"text":"Adopt a  Dog","image":"http://www.cortazar-split.com/dog_origin.jpeg"}

You can specify whatever text and images you like, so I hope you’ll have fun trying different configurations out. These will get you some nice dog pictures.

Save your changes using the “Review changes” button in the upper right corner, then “Save” button on the bottom of the following page.

Implementing Dynamic Config

Your feature flag has JSON payloads, but your HTML page doesn’t know how to use them yet. Next to the big red “KILL” button is a “…” menu on the upper right of the screen. Click “Syntax” and select Javascript.

Most of the code is the same as before, but instead of calling getTreatment the code now calls getTreatmentWithConfig:

var splitResult = client.getTreatmentWithConfig('tutorial');  
var configs =  JSON.parse(splitResult.config);  
var treatment = splitResult.treatment;

getTreatmentWithConfig returns a richer payload. Instead of just the treatment, it includes the JSON. That means that the client now gets dynamic access to a string and an image URL. We just set values for them in the last step.

Using the DOM again…

In our tutorial.html, we need to put in the getTreatmentWithConfig then employ the DOM to see the results are put in use.

	client.on(client.Event.SDK_READY, function() {
  		var splitResult = client.getTreatmentWithConfig('tutorial');
  		var configs = JSON.parse(splitResult.config);
  		var treatment = splitResult.treatment;

  		document.getElementById("call2Action").innerHTML = configs.text;
  		document.getElementById("banner").src = configs.image;
	});

The DOM lets us set an image using the URL. Neat!

Tracking User Behavior and Experiences

Now that your app is dynamic, you’re going to want to know how things are going for your users. Split offers measurement and experimentation features, and they’re easy to set up. You can integrate event data from other sources like Segment.io, mParticle, or Google Analytics, but you can also just send them directly.

What if the tutorial.html page had two buttons for “DONATE” and “ADOPT”. What if you want to measure when users click on these buttons?

	function donateHandler() {
		alert('donate!');
	}
	function adoptHandler() {
		alert('adopt!');
	}

Create two click handlers, one for each button.

Now add the buttons to the bottom of your page

		<div style="text-align: center; padding: 25px">
			<button onClick="donateHandler()">DONATE</button>
			<button onClick="adoptHandler()">ADOPT</button>
		</div>

You should find your buttons below your call to action and image. They’ll put up a dialog when you click on them.

Tracking an event to Split is this easy:

	function donateHandler() {
		alert('donate!');
		const succes = client.track('user', 'click2Donate', 21, {device: 'chrome', value: 42});
		alert(succes);
	}

You can get rid of the alerts when everything is working. From the Split console, find the “Data hub” icon on the left navbar. Change the “Data type” dropdown to “Events”. Press the big blue “Query” button to start capture. Now click on your donate button and look for true alerts. Your events will show up in the Data hub.

The track method takes traffic type as its first argument here because we didn’t specify it in our SDK config. click2Donate is the name of the event type. You can give it a descriptive name. There are some naming restrictions (you can’t use spaces and must start with a letter). In the example above, 21 is the value of the event. This is useful for things like purchases. The device and value properties are examples of what you can set. The properties can be anything, but you can’t nest properties.

Tying it Up

Your tutorial.html now uses dynamic config to define the content on your users’ screens. The same technique could work for backend programming as well. You can report about user behavior using the Split client’s track call.

If you evaluate feature flags and report events to Split, you are poised to take full advantage of the feature delivery platform. A future tutorial will cover creating Metrics from events and generating your first Impact Scorecard.

Drop us a line and let us know how you did! david.martin@split.io

Written with StackEdit.