Sourcepoint's Tizen solution supports version 3+.

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. 

  Note: If your organization is interested in implementing a native client Tizen solution, click here.


Requirements

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


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

Screen_Shot_2021-04-16_at_11.12.20_AM.png


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

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>
    (function () { var e = false; var c = window; var t = document; function r() { if (!c.frames["__uspapiLocator"]) { if (t.body) { var a = t.body; var e = t.createElement("iframe"); e.style.cssText = "display:none"; e.name = "__uspapiLocator"; a.appendChild(e) } else { setTimeout(r, 5) } } } r(); function p() { var a = arguments; __uspapi.a = __uspapi.a || []; if (!a.length) { return __uspapi.a } else if (a[0] === "ping") { a[2]({ gdprAppliesGlobally: e, cmpLoaded: false }, true) } else { __uspapi.a.push([].slice.apply(a)) } } function l(t) { var r = typeof t.data === "string"; try { var a = r ? JSON.parse(t.data) : t.data; if (a.__cmpCall) { var n = a.__cmpCall; c.__uspapi(n.command, n.parameter, function (a, e) { var c = { __cmpReturn: { returnValue: a, success: e, callId: n.callId } }; t.source.postMessage(r ? JSON.stringify(c) : c, "*") }) } } catch (a) { } } if (typeof __uspapi !== "function") { c.__uspapi = p; __uspapi.msgHandler = l; c.addEventListener("message", l, false) } })();
</script>
<script type="text/javascript">
    window._sp_queue = [];
    window._sp_ = {
      config: {
          accountId: CLIENT_ACCOUNT_ID,
          baseEndpoint: 'https://cdn.privacy-mgmt.com',
          propertyHref: 'PROPERTY_NAME',
          ccpa: { },
          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_PAUSE:19,KEY_LEFT:37,KEY_UP:38,KEY_RIGHT:39,KEY_DOWN:40,KEY_0:48,KEY_1:49,KEY_2:50,KEY_3:51,KEY_4:52,KEY_5:53,KEY_6:54,KEY_7:55,KEY_8:56,KEY_9:57,KEY_EMPTY:189,KEY_RED:403,KEY_GREEN:404,KEY_YELLOW:405,KEY_BLUE:406,KEY_RW:412,KEY_STOP:413,KEY_PLAY:415,KEY_REC:416,KEY_FF:417,KEY_CH_UP:427,KEY_CH_DOWN:428,KEY_VOL_UP:447,KEY_VOL_DOWN:448,KEY_MUTE:449,KEY_INFO:457,KEY_GUIDE:458,KEY_RETURN:10009,KEY_SOURCE:10072,KEY_CHLIST:10073,KEY_MENU:10133,KEY_TOOLS:10135,KEY_ASPECT:10140,KEY_EMANUAL:10146,KEY_EXIT:10182,KEY_PRECH:10190,KEY_MTS:10195,KEY_3D:10199,KEY_TTX_MIX:10200,KEY_CAPTION:10221,KEY_SEARCH:10225,KEY_SOCCER:10228,KEY_REWIND_:10232,KEY_FF_:10233,KEY_PLAY_PAUSE:10252,KEY_EXTRA:10253},this.onLoad()}Navigation.prototype={onLoad:function(){this.registerKey("0"),this.registerKey("1"),this.bindEvents()},getViewportWindow:function(){const e=document.querySelector(this.viewportModal);return!!e&&e.contentWindow},getActiveElement:function(e=document.activeElement){const t=e.shadowRoot,i=e.contentDocument;return t&&t.activeElement?this.getActiveElement(t.activeElement):i&&i.activeElement?this.getActiveElement(i.activeElement):e},triggerClick:function(){const e=this.getActiveElement();let t=new Event("keydown",{bubbles:!0,cancelable:!0});t.keyCode=this.tvKey.KEY_ENTER,"font-weight: normal;"===e.style.cssText&&(t=new KeyboardEvent("keypress",{key:"Enter",bubbles:!0,charCode:0,keyCode:this.tvKey.KEY_ENTER})),e.dispatchEvent(t)},registerAllKey:function(){let e,t=window.tizen.tvinputdevice.getSupportedKeys();for(e=0;e<t.length;e+=1){try{this.registerKey(t[e].name)}catch(i){logger.error("[registerAllKey] Failed to register "+t[e].name)}this.tvKey[t[e].code]=t[e].name}logger.debug("[registerAllKey] Register all supported keys. [available:"+t.length+"; registered:"+e+"]")},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_1:logger.toolbarToggle();break;case tileNavigation.tvKey.KEY_0:window.location.reload();break;default:if(t){const i=new Event("keydown",{bubbles:!0,cancelable:!0});i.currentTarget=e.currentTarget,i.keyCode=e.keyCode,t.dispatchEvent(i)}}},bindEvents:function(){window.addEventListener("keydown",this.onKeyDown)}};
var tileNavigation,DemoCMP={},logger=new Logger({debugMode:!0});DemoCMP.LoadCMP=function(){tileNavigation=new Navigation;try{logger.debug("Widget version: "+window.tizen.application.getAppInfo().version)}catch(o){logger.debug(o)}},window.onload=DemoCMP.LoadCMP();
</script>

  Note: Your organization can also add a button/link that allows an end-user to manage their consent preferences on an ongoing basis. Click here for more information on how to add this button/link.

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.

  Note: These methods are already configured in the demo file.

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).

Screen_Shot_2021-04-16_at_11.59.29_AM.png

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

gif.gif

Was this article helpful?
0 out of 0 found this helpful