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:
- OTT property with configured message campaign
- Tizen Studio
- Access to Tizen SDK
Import project
Clone the Tizen SDK into your local workspace directory and:
- In Tizen Studio click File > Import menu item
- Choose the directory where you have just cloned the repo
- 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
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>
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).
If successful, your OTT message campaign will be surfaced in the simulator.