Digital Measurement Video TizenTv: Difference between revisions
From Engineering Client Portal
No edit summary |
m (Admin moved page TizenTv to Digital Measurement Video TizenTv without leaving a redirect) |
| (5 intermediate revisions by one other user not shown) | |
(No difference)
| |
Latest revision as of 22:46, 12 June 2024
Introduction
The following document will highlight the steps needed to run Browser SDK (BSDK) on Samsung Smart TV using TIzen Studio for app development. The tutorial should be used in conjunction with the documentation at Create Your First Samsung Smart TV Web Application to build an app with BSDK integration for content measurement. In this tutorial we will create a native app and highlight the different permissions required to run the BSDK.
Step 1: Install Tizen Studio
Navigate here and install Tizen Studio. During installation make sure to install the TV Extensions package from the Package Manager.
Step 2: Generate Security Profile
Navigate here and generate the security profile in order to run applications.
Step 3: Create Basic Project
Follow the step-by-step guide and create the Basic Project template.
Replace the code in the
index.htmlfile with the code snippet below and update the App ID with a Nielsen provided App ID during SDK initialization.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DCR Video Tizen Sample</title>
<script>
// Static Queue Snippet
!function (e, n) {
function t(e) {
return "object" == typeof e ? JSON.parse(JSON.stringify(e)) : e
}
e[n] = e[n] ||
{
nlsQ: function (o, r, c) {
var s = e.document,
a = s.createElement("script");
a.async = 1,
a.src = ("http:" === e.location.protocol ? "http:" : "https:") + "//cdn-gl.imrworldwide.com/conf/" + o + ".js#name=" + r + "&ns=" + n;
var i = s.getElementsByTagName("script")[0];
return i.parentNode.insertBefore(a, i),
e[n][r] = e[n][r] || {
g: c || {},
ggPM: function (o, c, s, a, i) { e[n][r].q = e[n][r].q || []; try { var l = t([o, c, s, a, i]); e[n][r].q.push(l) } catch (e) { console && console.log && console.log("Error: Cannot register event in Nielsen SDK queue.") } },
trackEvent: function (o) { e[n][r].te = e[n][r].te || []; try { var c = t(o); e[n][r].te.push(c) } catch (e) { console && console.log && console.log("Error: Cannot register event in Nielsen SDK queue.") } }
},
e[n][r]
}
}
}(window, "NOLBUNDLE");
// Replace (PXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX) with CLIENT APP ID
var nSdkInstance = NOLBUNDLE.nlsQ("PXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX", "videoSdkInstance", {
nol_sdkDebug: "debug",
});
var contentMetadata = {
type: 'content',
assetid: 'VID-123456',
program: 'program name',
title: 'episode title with season and episode number',
length: 'length in seconds',
airdate: '20210321 09:00:00',
isfullepisode: 'y',
adloadtype: '2'
};
</script>
<style>
body {
background-color: white;
}
</style>
</head>
<body>
<h1>DCR Video Tizen Sample App</h1>
<div>
<video controls src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" width="620">
Sorry, your browser doesn't support embedded videos,
but don't worry, you can <a href="https://archive.org/details/BigBuckBunny_124">download it</a>
and watch it with your favorite video player!
</video>
</div>
</main>
<script>
var media = document.querySelector('video');
var playheadPosition = 0;
var metadataLoaded = false;
// Loadmetadata
// Load contentMetadata object
media.addEventListener('loadedmetadata', (event) => {
// Call SDK loadmetadata event
if (!metadataLoaded) {
nSdkInstance.ggPM("loadmetadata", contentMetadata);
metadataLoaded = true;
}
});
media.addEventListener('play', (event) => {
// Call SDK play event
if (!metadataLoaded) {
nSdkInstance.ggPM("loadmetadata", contentMetadata);
metadataLoaded = true;
}
});
// Player paused
media.addEventListener('pause', function (e) {
nSdkInstance.ggPM("pause", playheadPosition);
});
// Set playhead position
media.addEventListener('timeupdate', function (e) {
var currTime = Math.floor(media.currentTime);
if (playheadPosition < currTime) {
playheadPosition = currTime;
nSdkInstance.ggPM("setplayheadposition", playheadPosition);
}
});
// End
media.addEventListener('ended', function (e) {
nSdkInstance.ggPM("end", playheadPosition);
metadataLoaded = false;
playheadPosition = 0;
});
</script>
</body>
</html>
Step 4: Run Project
Right click on the project > Run As > Tizen Web Simulator Application (Samsung TV)
Extra configurations must be done to run and debug the application on a Target Device, please reference the following guide for more information
Step 5: Debug App
Right click anywhere in the Simulator to open the Web Inspector > navigate to the Console tab > check for BSDK initialization and content measurement.
Debug Logging: Disable logging by deleting
{nol_sdkDebug: 'debug'}
from initialization call
Remote control events
Build out the app further by including remote control events and attaching the player events to corresponding
keyCode
or using Tizen registered keys:
var media = document.querySelector('video');
window.addEventListener("keydown", function (e) {
switch (e.keyCode) {
case 10252: // MediaPlayPause
if(!media.paused) {
media.pause(); // pause video
nSdkInstance.ggPM("pause", playheadPosition); // SDK call
break;
}
media.play(); // play video
nSdkInstance.ggPM("play", contentMetadata); // SDK call
break;
case 10009: // Back
nSdkInstance.ggPM("stop", playheadPosition); // SDK call
break;
...
default:
break;
}
});
Next steps
For further testing Samsung Tizen TV apps, refer to this guide. If there are any questions or concerns then please reach out to the BSDK team. Reference the following guides for product specific information:
For further technical details or a sample application, please contact your Technical Account Manager (TAM).