Sourcepoint's webOS solution supports version 4+.
Sourcepoint's webOS solution enables your organization to launch an OTT message campaign and collect end-user consent on webOS OTT devices. In this article, we will cover how to implement our web-based solution for webOS OTT devices.
Requirements
In order to successfully utilize Sourcepoint's webOS solution your organization will need to satisfy the following requirements:
- OTT property with configured Native OTT message campaign in the Sourcepoint portal
- Sourcepoint webOS SDK
- webOS TV developer tools
Note: In this article, we will be using the following webOS development tools: Command Line Interface (CLI), VS Code Extension, Simulator.
For your convenience, Sourcepoint provides a working GDPR TCF demo implementation in the SDK that your organization can use as a template for your own webOS project. Download the demo GDPR TCF implementation project onto your local machine and unzip the file.
In the remaining sections of this article, we will cover how to edit the demo project files to surface your Native OTT message.
Import project
Open the webOS TV simulator. Use the Tools > App List menu to select the directory where you have saved the unzipped demo GDPR TCF implementation project.
Configure client details
Open the unzipped demo GDPR TCF implementation project in VS Code. The demo project will allow your organization to demo a Native OTT message tied to a Sourcepoint controlled property. In this section, we will cover the necessary steps to edit the details of the imported files to surface your organization's Native OTT message campaign.
index.html
Replace the accountId
and propertyHref
parameters in the index.html
file with your account specific information.
<script>
"use strict";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(){var t=function(){var t,e,o=[],n=window,r=n;for(;r;){try{if(r.frames.__tcfapiLocator){t=r;break}}catch(t){}if(r===n.top)break;r=r.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)&&null!==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))};"undefined"!=typeof module?module.exports=t:t()}();
</script>
<script type="text/javascript">
window._sp_queue = [];
window._sp_ = {
config: {
isOTT: true,
accountId: CLIENT_ACCOUNT_ID,
baseEndpoint: 'https://cdn.privacy-mgmt.com',
propertyHref: 'https://PROPERTY_NAME',
gdpr: { },
events: {
onMessageChoiceSelect: function() {
console.log('[event] onMessageChoiceSelect', arguments);
},
onMessageReady: function() {
console.log('[event] onMessageReady', arguments);
},
onMessageChoiceError: function() {
console.log('[event] onMessageChoiceError', arguments);
},
onPrivacyManagerAction: function() {
console.log('[event] onPrivacyManagerAction', arguments);
},
onPMCancel: function() {
console.log('[event] onPMCancel', arguments);
},
onMessageReceiveData: function() {
console.log('[event] onMessageReceiveData', arguments);
},
onSPPMObjectReady: function() {
console.log('[event] onSPPMObjectReady', arguments);
},
onConsentReady: function (consentUUID, euconsent) {
console.log('[event] onConsentReady', arguments);
},
onError: function() {
console.log('[event] onError', arguments);
},
}
}
}
</script>
<script src="https://cdn.privacy-mgmt.com/unified/wrapperMessagingWithoutDetection.js"></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.
The demo index.html
has this button already implemented. Your organization will need to replace the provided Native OTT message ID with the message ID tied to your property.
<button onclick="window._sp_.gdpr.loadNativeOtt(867049)">Native OTT GDPR</button>
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 webOS simulator
To test your configuration (or the demo configuration) in the webOS simulator, open the webOS TV Devices extension in VS Code.
Right-click webOS Simulator and select Run Application from the subsequent menu.
If successful, your Native OTT message campaign will be surfaced in the simulator.
Comments
0 comments