Tizen

Sourcepoint's Tizen solution enables your organization to launch an OTT message campaign and collect end-user consent on Tizen OTT devices. In this article, we will cover how to implement our web-based solution for Tizen OTT devices. 

• ​Requirements​
• ​Import project​
• ​Configure client details​
• ​Run Tizen simulation​

---

Requirements

In order to successfully utilize Sourcepoint's Tizen solution your organization will need to satisfy the following requirements:

• OTT property with configured message campaign
• ​Tizen Studio​
• Access to Tizen SDK

---

Import project

Clone the Tizen SDK into your local workspace directory and:

1. In Tizen Studio click File > Import menu item
2. Choose the directory where you have just cloned the repo
3. Select project to import from the list

---

Configure client details

The cloned files will allow your organization to demo an OTT message tied to a Sourcepoint controlled property. In this section, we will cover the necessary steps to edit the details of the cloned files to surface your organization's OTT message campaign.

• index.html
• navigation.js

index.html

Replace the accountId and propertyHref parameters in the index.html file with your account specific information.

<script>
    function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}!function(){for(var t,e,o=[],n=window,r=n;r;){try{if(r.frames.__tcfapiLocator){t=r;break}}catch(t){}if(r===n.top)break;r=n.parent}t||(function t(){var e=n.document,o=!!n.frames.__tcfapiLocator;if(!o)if(e.body){var r=e.createElement("iframe");r.style.cssText="display:none",r.name="__tcfapiLocator",e.body.appendChild(r)}else setTimeout(t,5);return!o}(),n.__tcfapi=function(){for(var t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];if(!n.length)return o;"setGdprApplies"===n[0]?n.length>3&&2===parseInt(n[1],10)&&"boolean"==typeof n[3]&&(e=n[3],"function"==typeof n[2]&&n[2]("set",!0)):"ping"===n[0]?"function"==typeof n[2]&&n[2]({gdprApplies:e,cmpLoaded:!1,cmpStatus:"stub"}):o.push(n)},n.addEventListener("message",(function(t){var e="string"==typeof t.data,o={};if(e)try{o=JSON.parse(t.data)}catch(t){}else o=t.data;var n="object"===_typeof(o)?o.__tcfapiCall:null;n&&window.__tcfapi(n.command,n.version,(function(o,r){var a={__tcfapiReturn:{returnValue:o,success:r,callId:n.callId}};t&&t.source&&t.source.postMessage&&t.source.postMessage(e?JSON.stringify(a):a,"*")}),n.parameter)}),!1))}();
</script>
<script type="text/javascript">
    window._sp_queue = [];
    window._sp_ = {
      config: {
          accountId: CLIENT_ACCOUNT_ID,
          baseEndpoint: 'https://cdn.privacy-mgmt.com',
          propertyHref: 'PROPERTY_NAME',
          gdpr: { }
      }
    }
</script>
<script src="https://cdn.privacy-mgmt.com/unified/wrapperMessagingWithoutDetection.js"></script>

Additionally, to add event listeners to make the remote control work, the following script can be included in the index.html file:

<script type="application/javascript">
function Navigation(e){e=e||{},this.viewportModal=e.viewport||"[id^='sp_message_iframe_']",this.tvKey={KEY_ENTER:13,KEY_0:48,KEY_RETURN:10009,KEY_EXIT:10182},this.onLoad()}Navigation.prototype={onLoad:function(){this.registerKey("0"),this.bindEvents()},getViewportWindow:function(){const e=document.querySelector(this.viewportModal);return!!e&&e.contentWindow},getActiveElement:function(e){e||(e=document.activeElement);const t=e.shadowRoot,n=e.contentDocument;return t&&t.activeElement?this.getActiveElement(t.activeElement):n&&n.activeElement?this.getActiveElement(n.activeElement):e},triggerClick:function(){const e=this.getActiveElement();var t=new Event("keydown",{bubbles:!0,cancelable:!0});t.keyCode=this.tvKey.KEY_ENTER,e.parentElement.className.split(" ").indexOf("categories")>=0&&(t=new KeyboardEvent("keypress",{key:"Enter",bubbles:!0,charCode:0,keyCode:this.tvKey.KEY_ENTER})),e.dispatchEvent(t)},registerKey:function(e){window.tizen.tvinputdevice.registerKey(e)},unregisterKey:function(e){window.tizen.tvinputdevice.unregisterKey(e)},onKeyDown:function(e){const t=tileNavigation.getViewportWindow();switch(e.keyCode){case tileNavigation.tvKey.KEY_ENTER:t&&tileNavigation.triggerClick();break;case tileNavigation.tvKey.KEY_EXIT:window.tizen.application.getCurrentApplication().exit();break;case tileNavigation.tvKey.KEY_0:window.location.reload();break;default:if(t){const n=new Event("keydown",{bubbles:!0,cancelable:!0});n.currentTarget=e.currentTarget,n.keyCode=e.keyCode,t.dispatchEvent(n)}}},bindEvents:function(){window.addEventListener("keydown",this.onKeyDown)}};
var tileNavigation,DemoCMP={};DemoCMP.LoadCMP=function(){tileNavigation=new Navigation;try{console.log("Widget version: "+window.tizen.application.getAppInfo().version)}catch(o){console.log(o)}},window.onload=DemoCMP.LoadCMP();</script>

navigation.js

In the navigation.js file, you organization will be able to configure the methods for your project. In the table below, please find the available methods for your Tizen project.

Method	Description
onLoad	runs on startup, trigger registerAllKey and bindEvents functions
getViewportWindow	get window object of an iframe
getActiveElement	get an active element of the document
triggerClick	handle enter button pressed event
registerAllKey	register all available keys of a remote control
RegisterKey	register a button of a remote control by key name
unregisterKey	unregister a button of a remote control by key name
onKeyDown	handle pressed keys of a remote
bindEvents	add event listener from a remote control

---

Run Tizen simulation

To test your configuration (or the demo configuration) in the Tizen simulator, right-click the project and navigate to Run As > Tizen Web Simulator Application (Samsung TV).

If successful, your OTT message campaign will be surfaced in the simulator.