Digital Measurement Video webOS

From Engineering Client Portal

Engineering Portal / Digital / DCR & DTVR / Digital Measurement Video webOS


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

  1. We will begin creating the app by navigating here and following the installation steps:
  2. Run
     ares-generate -t hosted_webapp nlsn-bsdk-webOS
    
    to generate the app and accept all defaults
  3. Open the generated folder in a text editor or IDE and and create a new folder called app
  4. 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

WEBOS 1.png

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.

LGwebos 2.png

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: