Digital Measurement Video webOS
From Engineering Client Portal
Introduction
The following document will highlight the steps needed to run Browser SDK (BSDK) on LG Smart TVs that are currently running webOS TV 23 on Chromium 94 web engine
The tutorial should be used in combination with the documentation at webOS TV Developer to build an app and verify that the BSDK properly measures the video and static content. In the tutorial we will be using a hosted web app which will host the content on the web server. We will also use the webOS TV Simulator for app development.
Step 1: Install the webOS TV CLI
Navigate here and install the webOS TV CLI
Step 2: Install the webOS TV Simulator
Navigate here and install the webOS TV Simulator
Step 3: Create App
- We will begin creating the app by navigating here and following the installation steps:
- Run to generate the app and accept all defaults
ares-generate -t hosted_webapp nlsn-bsdk-webOS
- Open the generated folder in a text editor or IDE and and create a new folder called app
- Add the following into a video.html file and make sure to update App ID with Nielsen provided App ID while creating the SDK instance
Add the following script tag to the website:
<!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 webOS 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");
// INSERT 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 webOS 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>
Click here for more information on DCR Video implementation.
3. Navigate to
index.html
at the root of the directory and update the
location.href
url to point to
http://{{LOCAL_SERVER_URL}}/app/video.html
That is all that we need to run the app on the webOS TV Simulator. Please make sure to update the App ID for SDK initialization to view proper crediting
Step 4: Open up webOS TV Simulator
Open up the webOS TV Simulator > navigate to File > Launch App > open the folder containing the app created in the previous step
Step 5: Debug app
Click on the Inspect button on the remote to open up developer tools > navigate to the Console tab > check for BSDK initialization and measurement.
Note - Debug Logging: Disable logging by deleting
{nol_sdkDebug: 'debug'}
from initialization call.
Remote events
Build out the app further by including remote events and attaching the player events to corresponding
keycode:
var media = document.querySelector('video');
window.addEventListener("keydown", function (e) {
switch (e.keyCode) {
case 415: // Play
media.play(); // play video
nSdkInstance.ggPM("play", contentMetadata); // SDK call
break;
case 19: // Pause
media.pause(); // play video
nSdkInstance.ggPM("pause", playheadPosition); // SDK call
break;
case 461: // Back
nSdkInstance.ggPM("stop", playheadPosition); // SDK call
break;
default:
break;
}
});
Next steps
For further testing on webOS TV apps on the TV, refer to this guide. If there are any questions or concerns then please reach out to BSDK team. Reference the following guides for product specific information: