Implementors CDP Cookbook

Objective and deciding on needed granularity

Personalization of content involves decision making and rendering. Decision making can be made before rendering and also in the rendering process.

Speed is a factor when it comes to real time personalization.

Instead of retrieving full profile information to decide on, it's much more efficient to create a segment reflecting the decision criteria, and ask if visitor belongs to the segment.

Technically it is more efficient (given you have solid state segments) and work flow wise it's easier to manage (Changing criteria for the segment in one place instead of changing criteria everywhere you want to decide on content).

How does this translate to, or even hook into, the process many implementors are using today?

A common way to achieve real time personalization is tagging up visitors in the DMP and content in the CMS (or PIM or ad server or..).
When a tagged visitor visits a page, a request is made for matching tagged content.

This can easily be emulated with the CDP.

Add the tag(s) to the profile like you would normally do to the visitor in the DMP, and create segments corresponding to tags.
On the web page ask if visitor is in segment(s) and retrieve content correspondingly.

Implement the JS Tool aka "The Tracker"

Step One

Insert the FlowStack jstool.js script and also load the segment and content module in the head section of your web page.

Include the jstool:

<script>
    (function(f, l, o, w, s, t, a, c, k) {
      f['FS_CORE_NAME'] = w; f['FS_CORE_DOMAIN'] = s; f['FS_QUEUE'] = [];
      f['fs'] = function(){f['FS_QUEUE'].push(arguments);}
      a = l.createElement(o);
      c = l.getElementsByTagName(o)[0];
      a.async = 1;
      a.src = document.location.protocol + '//' + s + '/' + t;
      c.parentNode.insertBefore(a, c);
    })(window, document, 'script', 'fs', 'jstool.flowstack.com', 'jstool.js')
</script>
<script src="https://jstool.flowstack.com/segment.js"></script>
<script src="https://jstool.flowstack.com/content.js"></script>

Step Two

Initialize the jstool object.

Create FS object:

<script>
  fs('init','<accountId>');
  fs('pageview');
</script>

Using jstool to check if profile belongs to certain segments

The FS Core provides a method to ask if current visitor belongs to segment.

Is visitor in segment:

<script>
fs('inSegment', ['<someSegmentId>'],function(res){
  if (res.result && typeof(res.result) == 'object' && res.result['<someSegmentId>']) {
    // Do something if in segment
  } else {
    // Or maybe do something else
  }
});
</script>

Press the "Do something" button below to see a simple working example of how an html element is dynamically altered after checking if visitor is in segment or not.
To make realtime personalization on a web page call inSegment on page load instead.

Do something

Default Content

Pressing the Do Something button will change the content of this callout

Rendering Snippets with Profile Data

A FlowStack snippet is content, which consist of a default and a version which is rendered if visitor is related to a profile.
Snippets are defined in the FlowStack system and have an id. There are multiple ways to inject snippet content in an HTML element.

Render directly into element based on data-attribute

<div data-fs-content="<contentId>"></div>

Putting the data-fs-content attribute to an HTML element will automatically make the jstool script retrieve the snippet content rendered with the visititors resulting profile data.
If visitor is unknown, the default content for the snippet is rendered.

Render into element based on id

<div id="content"></div>
..
<script>
fs(contentRender('<contentId>','content'));
</script>

You can call contentRender method of FS object to retrieve rendered snippet from FlowStack

Render directly into element

<div id="content"></div>
..
<script>
fs(contentRender('<contentId>',document.getElementById('content')));
</script>

Render and pass result to callback

<script>
fs(contentRender('<contentId>',function(fsResult){
	if(fsResult.status == "success"){
	    // Do something, e.g.
		console.log(fsResult.result);
	}
})
);
</script>

Real Time Personalization