dbmartin00/contentful-split.html Secret

## contentful-split.html
<html>
<head>
	<title>Contentful and Split - Better Together</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;
  }
  .styled-select optgroup {
    font-size: 20px;
  }

</style>
<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>
<script>

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

  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();

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

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

  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']);
    }
  }

  function drawBooks(list) {
    let options = '<optgroup>';
    for(const option of list) {
      options += '<option>' + option + '</option>';
    }
    options += '</optgroup>';
    document.getElementById('books').innerHTML = options;
  }

  function clickRead() {
    const regions = [ "US", "EU", "JP"];
    const status = [ "silver", "gold", "platinum"];
    const n = Math.floor(Math.random() * 100);
    const m = Math.floor(Math.random() * 100);
    const e = document.getElementById('books');
    const author = e.options[e.selectedIndex].text;
    const properties = {
     region : regions[n % regions.length],
     status : status[m % status.length],
     author: author
   };
   const result = splitClient.track('user', 'readClick', 0, properties);
   console.log(result);
 }
</script>
</head>
<body>

	<table border="0">
    <tr>
     <td style="font-size: 40px;">Choose an Author</td>
   </tr>
   <tr>
    <td>
     <img src="https://images.unsplash.com/photo-1497633762265-9d179a990aa6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3546&q=80" style="width: 50%"/>
   </td>
   </tr>
   <tr>
    <td>
      <select name="books" id="books"/>
    </td>
  </tr>
  <tr>
   <td>
     <button onClick="clickRead()">READ</button>
   </td>
  </tr>
</table>
</body>
</html>
	<html>
	<head>
	<title>Contentful and Split - Better Together</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;
	}
	.styled-select optgroup {
	font-size: 20px;
	}

	</style>
	<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>
	<script>

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

	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();

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

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

	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']);
	}
	}

	function drawBooks(list) {
	let options = '<optgroup>';
	for(const option of list) {
	options += '<option>' + option + '</option>';
	}
	options += '</optgroup>';
	document.getElementById('books').innerHTML = options;
	}

	function clickRead() {
	const regions = [ "US", "EU", "JP"];
	const status = [ "silver", "gold", "platinum"];
	const n = Math.floor(Math.random() * 100);
	const m = Math.floor(Math.random() * 100);
	const e = document.getElementById('books');
	const author = e.options[e.selectedIndex].text;
	const properties = {
	region : regions[n % regions.length],
	status : status[m % status.length],
	author: author
	};
	const result = splitClient.track('user', 'readClick', 0, properties);
	console.log(result);
	}
	</script>
	</head>
	<body>

	<table border="0">
	<tr>
	<td style="font-size: 40px;">Choose an Author</td>
	</tr>
	<tr>
	<td>
	<img src="https://images.unsplash.com/photo-1497633762265-9d179a990aa6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3546&q=80" style="width: 50%"/>
	</td>
	</tr>
	<tr>
	<td>
	<select name="books" id="books"/>
	</td>
	</tr>
	<tr>
	<td>
	<button onClick="clickRead()">READ</button>
	</td>
	</tr>
	</table>
	</body>
	</html>