Digital Measurement Video TizenTv: Difference between revisions

Latest revision as of 22:46, 12 June 2024

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

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.html

file 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).

@@ Line 10: / Line 10: @@
 Navigate [https://developer.tizen.org/development/tizen-studio/download here] and install Tizen Studio.
-During installation make sure to install the '''TV Extension's package''' from the Package Manager.
+During installation make sure to install the '''TV Extensions package''' from the Package Manager.
 == Step 2: Generate Security Profile ==