Digital Measurement Video webOS: Difference between revisions

Revision as of 02:53, 27 March 2024

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

We will begin creating the app by navigating here and following the installation steps:

Run

 ares-generate -t hosted_webapp nlsn-bsdk-webOS

to generate the app and accept all defaults

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:

@@ Line 16: / Line 16: @@
 Navigate [https://webostv.developer.lge.com/develop/tools/simulator-installation here] and install the webOS TV Simulator
-=== Step 3: Create App ===
+== Step 3: Create App ==
@@ Line 149: / Line 149: @@
 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===
+== 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
@@ Line 155: / Line 155: @@
 [[File:WEBOS 1.png||600px|center|]]
-==== Step 5: Debug app====
+== 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.
 [[File:LGwebos 2.png||600px|center|]]
@@ Line 161: / Line 161: @@
 Note - Debug Logging: Disable logging by deleting <syntaxhighlight lang="javascript"> {nol_sdkDebug: 'debug'} </syntaxhighlight> from initialization call.
-==== Remote events ====
+== Remote events ==
 Build out the app further by including [https://webostv.developer.lge.com/develop/guides/magic-remote remote events] and attaching the player events to corresponding <syntaxhighlight lang="javascript"> keycode: </syntaxhighlight>
 <syntaxhighlight lang="javascript">
@@ Line 187: / Line 187: @@
 <br>
-=== Next steps ===
+== Next steps ==
 For further testing on webOS TV apps on the TV, refer to this [https://webostv.developer.lge.com/develop/getting-started/developer-mode-app guide]. If there are any questions or concerns then please reach out to BSDK team. Reference the following guides for product specific information: