DCR Video Browser SDK: Difference between revisions

From Engineering Client Portal

No edit summary
 
(78 intermediate revisions by 12 users not shown)
Line 1: Line 1:
{{Breadcrumb|}} {{Breadcrumb|Digital}} {{Breadcrumb|DCR & DTVR}}  {{CurrentBreadcrumb}}
{{Breadcrumb|}} {{Breadcrumb|Digital}} {{Breadcrumb|US DCR & DTVR}}  {{CurrentBreadcrumb}}
[[Category:Digital]]
[[Category:Digital]]


== Prerequisites ==
== Prerequisites ==
To start using the Browser SDK, the following details are required:
Before you start the integration, you will need:
* '''App ID (apid):''' Unique ID assigned to the player/site and configured by product.
{| class="wikitable"
* '''sfcode:''' Unique identifier for the environment that the SDK should point to. During testing, please use the sfcode as "dcr-cert".
|-
* '''ggCom.as (For Flash Player Porjects only):''' Nielsen ActionScript Library to compile within the Flash player project. Configure ggCom.as as mentioned in subsequent sections and include the edited file in the project.
! style="width: 30px;" |
If you do not have any of these pre-requisites or if you have any questions, please contact our SDK sales support team.
! style="width: 15%;" | Item
! Description
! Source
|-style="background-color:#d0f6f8;"
|| ☑ || '''App ID (appid)''' || Unique ID assigned to the player/site and configured by product. || Contact Nielsen
|}
 
== Release Notes ==
The release notes on the Browser SDK can be located here: '''[[Browser SDK Release Notes|Release Notes]]'''
 
== Configure SDK ==
There are two steps required for configuring the SDK:
*Add Static Queue Snippet
*Create SDK Instance
 
=== Static Queue Snippet ===
Add the following script tag to the website:
<syntaxhighlight lang="javascript">
<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");


== Import Library ==
In the HTML head section of each page, call the Nielsen library using the script tag, as shown below.
<syntaxhighlight lang="html">  <script type="javascript" src="http://secure-dcr-cert.imrworldwide.com/novms/js/2/ggcmb510.js"></script></syntaxhighlight>


== Define GlobalParams ==
var nSdkInstance = NOLBUNDLE.nlsQ("XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX", "nlsnInstance", {
<syntaxhighlight lang="html">  <script type="javascript">
  nol_sdkDebug: "debug",
  var _nolggGlobalParams =
  optout: "false"
    {
});
      sfcode: "dcr-cert",
 
      apid: "TXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
</script>
      apn: "test-setup",
      nsdkv: "511",
      nol_sdkdebug: "INFO"
    };
</script></syntaxhighlight>
For Flash integration, global parameters must be set as an object in ggCom.as, as follows.
<syntaxhighlight lang="javascript">  public var _nolggGlobalParams:Object =
  {
      apid: "TXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
      sfcode: "dcr-cert",
      apn: "test-player",
      nol_sdkDebug: "DEBUG",
      nsdkv: "511"
  };
</syntaxhighlight>
</syntaxhighlight>


== Initialize SDK ==
The static queue snippet allows the SDK APIs to be called while the actual SDK and configuration file are still being downloaded. As the queue can capture all API calls before the download completes, there is no wait time. Once the SDK is available, the API calls will transition from directing to the queue to the SDK seamlessly.
Initialize Browser SDK as soon as the Parent / Main Page is loaded. During the initialization, custom parameters can be appended to the global parameter object. These custom (extended) parameters are optional. Use them only if the player application can handle the custom parameter data.


The Nielsen Browser SDK supports multiple processing instances. To create an instance, call the <code>getInstance()</code> function
<blockquote>For DCR static, BSDK cannot be run in an iframe because the blur/focus events of the parent page may not propagate to the iframe. The iframe events typically trigger when the iframe itself is clicked. The BSDK is dependent on the blur/focus events of the browser to detect active viewing of the page. Because the root page events do not propagate to the iframe, this would impact incorrect DCR static crediting.</blockquote>
<syntaxhighlight lang="javascript">    var nSdkInstance=NOLCMB.getInstance(instanceName);</syntaxhighlight>
All subsequent calls to getInstance with the same instanceName will return an already created SDK instance with that name. This will allow accessing the same object from different parts of the code.


The "instanceName" parameter is optional and will be set to "default" if missing. To use a single default SDK instance, call
===Create SDK Instance===
<syntaxhighlight lang="javascript">   var nSdkInstance=NOLCMB.getInstance();</syntaxhighlight>
To initialize the SDK, create an SDK instance by making the initialization call:
To instantiate Nielsen Browser SDK for '''Flash integration''', add the following line within the player setup.
 
<syntaxhighlight lang="javascript">    ggCom.getInstance(RootReference.stage.loaderInfo);</syntaxhighlight>
==== Initialization API Call ====
In order to initialize the SDK, parameters must be passed when calling the initialization function (ggInitialize). The available parameters are listed in the table below.
<syntaxhighlight lang="javascript">
NOLBUNDLE.nlsQ("<apid>", "<instanceName>",{nol_sdkDebug: "debug"});
</syntaxhighlight>
<br>
When creating an instance, pass the following values: (<code>nol_sdkDebug</code> and <code>optout</code> are optional)
{| class="wikitable"
{| class="wikitable"
|-
|-
! Parameters !! Description !! Value !! Required? (Y/N)
! Parameter !! Description !! Values
|-
|-
| apid || UniqueID assigned to player/site. There are two IDs provided for
| apid || Unique ID assigned to player/site || 'PXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'
# Test: begins with ‘T’ and is used for testing, and
# Production: begins with ‘P’ and is used when testing is completed in live environment.
|| Nielsen assigned || Yes
|-
|-
| apn || User-defined string value for describing the player/site || Client-specified || Yes
|instanceName || Name of SDK instance || "any string value"
|-
|-
| sfcode || Location of collection environment. During testing, all traffic should be directed to <code>dcr-cert</code>. || "dcr-cert" – testing
| nol_sdkDebug || Enables Nielsen console logging if desired. || <syntaxhighlight lang="javascript">
"dcr" – production || Yes
{nol_sdkDebug: "debug"}
{nol_sdkDebug: "info"}
{nol_sdkDebug: "warn"}
{nol_sdkDebug: "true"}
</syntaxhighlight>
|-
|-
| nsdkv || Nielsen SDK Version currently being used. || Nielsen assigned (‘511’ for Browser SDK 5.1.0, etc.) || Yes
|optout || Optional: OptOut global parameter. || <code>1/0</code> or <code>true/false</code>
|-
| nol_sdkdebug || Enables Debug Mode which allows output to be viewed in console. || <code>"console"</code> || No
|}
|}


<syntaxhighlight lang="javascript">    var gg = window.NOLCMB.getInstance(instanceName /*optional*/);
==== Example SDK Initialization ====
    gg.ggInitialize(window._nolggGlobalParams);</syntaxhighlight>
When the initialization call is made, a unique static configuration file, <apid>.js, will be downloaded based on the apid and will be cached on the user’s browser.
'''For Flash integration'''
Instantiate Nielsen Browser SDK in the Flash player’s controller. Below is an example code for player setup & instantiation of the SDK.
<syntaxhighlight lang="javascript">   public function setupPlayer():void
    {
      ggCom.getInstance(RootReference.stage.loaderInfo);
      var setup:PlayerSetup = new PlayerSetup(_player, _model, _view);
      …
      …
    }</syntaxhighlight>


== Step 4: Configure and fire API calls ==
Once the configuration is downloaded, the SDK itself will be downloaded and initialized. All SDK modules are included in one file: “nlsSDK600.bundle.min.js”.
The syntax for firing events is
 
<syntaxhighlight lang="javascript">    nSdkInstance.ggPM("event", metadataObject);</syntaxhighlight>
More information on OptOut Parameter under [[DCR Video Browser SDK#Privacy_and_Opt-Out|Privacy and Opt-Out.]]
CMS data to be sent as an object in the format mentioned above.
<!--
Event is passed in parameter 1 and the metadataObject is passed in parameter 2.
==== Example SDK Initialization with Viewability ====
'''For Flash integration'''
If you decide to implement the Nielsen Viewability Module, the SDK will track the viewability of the targeted player/element, log the viewable percentage and record in seconds the time the player/element was in that viewable state. The only additional information required is the HTML element ID of the element being tracked (which is passed during SDK Initialization), and the volume level (passed as an event).
<syntaxhighlight lang="javascript">   ggCom.getInstance().PM('loadMetadata',_metadata);</syntaxhighlight>
 
<syntaxhighlight lang="javascript">
var nSdkInstance = NOLBUNDLE.nlsQ("XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX", "nlsnInstance", {
  nol_sdkDebug: "debug",
  optout: "false"
});
</syntaxhighlight>


=== loadMetadata ===
Use [[loadMetadata (Browser)]] to pass ‘content’ and ‘ad’ [[metadata]]. The CMS data must be passed as a JSON object.
<syntaxhighlight lang="javascript">    nSdkInstance.ggPM("loadMetadata", metadataObject);</syntaxhighlight>
Refer to [[loadMetadata (Browser)]] for the list of parameters to be passed in the JSON object.
<blockquote>Note: Trigger the [[loadMetadata (Browser)]] call with content metadata ("type": "content") before sending any "preroll" ad metadata.</blockquote>


=== setPlayheadPosition (Content) ===
If no "volume" event is passed, a default value of '1' will be used. (IE: 100%).  If the volume level is adjusted, the modified value can be passed to the SDK using the standard ggPM() API along with the new "volume" event.
Use [[setPlayheadPosition (Browser)]] to pass the position of the playhead while the content is being played.
<br />
<syntaxhighlight lang="javascript">
nSdkInstance.ggPM("volume", <volume level>);
</syntaxhighlight>
<br />
{| class="wikitable"
{| class="wikitable"
|-
|-
! # !! Key !! Description !! Values !! Required? (Y/N) !! Example
! Event Name !! Event # !! Purpose !! Possible Values !!Example
|-
|-
| 1 || Live** || UTC of the live content || Client-defined || Yes || Seconds since 1970
| volume || 61  ||ggPM event that will allow clients to pass in the volume levels. ||Supports decimal values in range from 0 - 1||instance.ggPM("61", 0); => muted
|-
instance.ggPM("61", .5) => not muted
| 2 || Video On Demand (VOD)** || Position taken from beginning of the content in seconds. || Client-defined || Yes || Current player position from beginning of the content.
intance.ggPM("61", 1) => not muted
|}
|}
<nowiki>**</nowiki>Only one of these parameters is mandatory
Sample:
===== For Flash integration =====
<syntaxhighlight lang="javascript">
'''Video On Demand (VOD) Content'''
nSdkInstance.ggPM("volume", 0); // muted
<syntaxhighlight lang="javascript">    ggCom.getInstance().PM('setPlayheadPosition', position);</syntaxhighlight>
</syntaxhighlight>
'''Live Content'''
-->
<syntaxhighlight lang="javascript">    ggCom.getInstance().PM('setPlayheadPosition', (Date.now()/1000));</syntaxhighlight>
 
=== Example SDK Configuration ===
 
The configuration should include the Static Queue Snippet and an SDK Instance for an unique App ID as shown in the example:
<syntaxhighlight lang="html"><script type="text/javascript">
// Add 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");
// Created SDK Instance
var nSdkInstance = NOLBUNDLE.nlsQ("XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX", "nlsnInstance", {nol_sdkDebug: "debug"});
</script></syntaxhighlight>


=== setPlayheadPosition (Ad) ===
=== Create Metadata Objects ===
Use [[setPlayheadPosition (Browser)]] to pass the position of the playhead for every one second while the advertisement is being played.
There are two types of asset metadata:
{| class="wikitable"
*content: identify video
|-
*ad: identify each ad
! Key !! Description !! Values !! Required? (Y/N) !! Example
 
|-
The metadata received for each asset is used for classification and reporting.
| Ad || Position taken from beginning of the ad in seconds || Client-defined || Yes || Seconds since start of the ad
 
|}
Metadata can be passed through key-values using the Nielsen reserved keys. User will need to set up content and ad objects with the required Nielsen keys as shown in the sample code below.


=== stop ===
==== Content Metadata ====
Call [[stop (Browser)]] when switching between content and ads, and also on pause.
Content metadata should remain constant throughout the entirety of an episode/clip including when ads play.
'''For Flash integration'''
{{DCR Content Metadata}}
<syntaxhighlight lang="javascript">    ggCom.getInstance().PM('stop', position);</syntaxhighlight>


=== end ===
==== Example Content Object ====
Call [[end (Browser)]] only at the end of playback (but before a postroll occurs, if postrolls are inserted). Call [[play (Browser)]] when resuming the stream / starting a new stream.
<syntaxhighlight lang="javascript">
'''For Flash integration'''
var contentMetadataObject =
<syntaxhighlight lang="javascript">    ggCom.getInstance().PM('end', position);</syntaxhighlight>
  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',
  segB:          'custom segment B', // optional
  segC:          'custom segment C', // optional
  crossId1:      'Standard Episode ID', // optional
  crossId2:      'Content Originator' //optional
};
</syntaxhighlight>


=== API Call sequence ===
=== Ad Metadata ===
==== Use Case 1: Content has no Advertisements ====
The Ad Metadata (if applicable) should be passed for each individual ad.
Call [[loadMetadata (Browser)]] with JSON metadata for content as below.
<syntaxhighlight lang="json">{
  "type": "content",
  "assetid": "vid345-67483",
  "program": "ProgramName",
  "title": "Program S3, EP1",
  "length": "3600",
  "segB": "CustomSegmentValueB",
  "segC": "CustomSegmentValueC",
  "crossId1": "Reference11",
  "crossId2": "Reference22",
  "isfullepisode": "y",
  "airdate": "20161013 20:00:00",
  "adloadtype": "2",
  "hasAds": "0"
}</syntaxhighlight>
Call [[setPlayheadPosition (Browser)]] every one second until a pause / stop.
Use the sample API sequence below as a reference to identify the specific events that need to be called during content playback without ads.
{| class="wikitable"
{| class="wikitable"
|-
|-
! Type !! Sample code !! Description
! Keys !! Description !! Values !! Required
|-
|-
| Start of stream || <code>nSdkInstance.ggPM(loadMetadata, contentMetadataObject);</code> || // contentMetadataObject contains the JSON metadata for the content
| type || type of Ad || <code>'preroll'</code>,  <code>'midroll'</code>, <code>'postroll'</code> <br> <code>'ad'</code>  - If specific type can not be identified.||
|-
|-
| Content || <code> nSdkInstance.ggPM(setPlayheadPosition, playheadPosition);</code> || // playheadPosition is position of the playhead while the content is being played
| assetid || unique ID assigned to Ad || custom <br>(no [[Special Characters]]) ||
|-
| End of Stream || <code>nSdkInstance.ggPM(end, playheadPosition);</code> || // playheadPosition is position of the playhead while the content is being played
|}
|}


==== Use Case 2: Content has Advertisements ====
==== Example Ad Object ====
Call [[loadMetadata (Browser)]] with JSON metadata for ad as below.
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="json">{
var adMetadataObject =
  "type": "preroll",
{
  "assetId_ad": "ad=123"
  type:   'preroll',
}</syntaxhighlight>
  assetid: 'AD-1'
<blockquote>Note: In case the individual ad details are not available, send ad pod (presence) details through the [[loadMetadata (Browser)]] and playhead position through [[setPlayheadPosition (Browser)]].</blockquote>
};
</syntaxhighlight>
<br/>
<blockquote> URL Character Limit: There is a URL character limit of 2K characters due to browser limitations. Exceeding this value could impair data delivery on particular browsers. </blockquote>
 
==== Call Nielsen APIs ====
The method for calling events is ggPM().
 
<syntaxhighlight lang="javascript">
nSdkInstance.ggPM('event', parameter, ...);
</syntaxhighlight>
 
== Interrupt Scenarios ==
 
=== Pause Event ===
The setPlayheadPostion event is used for handling pause. To indicate pause, stop passing the playhead position to the SDK. Once the content resumes, begin sending the playhead again with the correct playhead value.
 
=== Other Interrupt Scenarios ===
The following possible browser interruption scenarios must be handled:
 
* Browser/Tab close
* Leaving the page to another destination
* Pressing the stop button
* Network Loss
 
There are many cases where the player itself has the ability to detect such situations. If not, these interruption scenarios can be handled through JavaScript. The events that are called will depend on the asset being played (e.g. midroll vs. content).
 
<syntaxhighlight lang="javascript">
window.addEventListener('beforeunload', function(event)  
{
  // Only inside a midroll indicate <stop> for the ad
  nSdkInstance.ggPM('stop', playheadPosition);
 
  // Indicate <end> and <stop> for the content
  nSdkInstance.ggPM('end', playheadPosition);
  nSdkInstance.ggPM('stop', playheadPosition);
});
</syntaxhighlight>


Call [[setPlayheadPosition (Browser)]] every one second until a pause / stop / another ''loadMetadata'' is called. Playhead should be passed for the entire duration of ad pod, if the ad pod details are passed as part of [[loadMetadata (Browser)]].
<blockquote>'''Note:''' User may need to add code to support specific browser versions (e.g. older versions of Internet Explorer).</blockquote>


The sample API sequence can be used as a reference to identify the specific events that need to be called during content and ad playback.
=== SDK Events ===
{| class="wikitable"
{| class="wikitable"
|-
|-
! Type !! Sample code !! Description
! Event !! Parameter !! Description
|-
| Start of stream || <code>nSdkInstance.ggPM(loadMetadata, contentMetadataObject);</code> || // contentMetadataObject contains the JSON metadata for the content
|-
| rowspan="3" | Preroll || <code>nSdkInstance.ggPM(loadMetadata, prerollMetadataObject);</code> || // prerollMetadataObject contains the JSON metadata for preroll ad
|-
| <code>nSdkInstance.ggPM(setPlayheadPosition, playheadPosition);</code> || // playheadPosition is position of the playhead while the preroll ad is being played
|-
| <code>nSdkInstance.ggPM(stop, playheadPosition);</code> || // Call stop after preroll occurs
|-
| rowspan="3" | Content || <code>nSdkInstance.ggPM(loadMetadata, contentMetadataObject);</code> || // contentMetadataObject contains the JSON metadata for the content being played
|-
| <code>nSdkInstance.ggPM(setPlayheadPosition, playheadPosition);</code> || // playheadPosition is position of the playhead while the content is being played
|-
| <code>nSdkInstance.ggPM(stop, playheadPosition);</code> || // Call stop after the content is paused (ad starts)
|-
| rowspan="3" | Midroll || <code>nSdkInstance.ggPM(loadMetadata, midrollMetadataObject);</code> || // midrollMetadataObject contains the JSON metadata for the midroll ad
|-
| <code>nSdkInstance.ggPM(setPlayheadPosition, playheadPosition);</code> || // playheadPosition is position of the playhead while the midroll ad is being played
|-
| <code>nSdkInstance.ggPM(stop, playheadPosition);</code> || // Call stop after midroll occurs
|-
| rowspan="3" | Content (End of stream) || <code>nSdkInstance.ggPM(loadMetadata, contentMetadataObject);</code> || // contentMetadataObject contains the JSON metadata for the content being played
|-
|-
| <code>nSdkInstance.ggPM(setPlayheadPosition, playheadPosition);</code> || // playheadPosition is position of the playhead while the content is being played
| 'loadMetadata' || content/ad metadata object || Needs to be called at the beginning of each asset
|-
|-
| <code>nSdkInstance.ggPM(end, playheadPosition);</code> || // Called at the end of content
| 'setPlayheadPosition' || playhead position as integer<br/>
VOD: || current position in seconds <br/>
Live: current Unix timestamp (seconds since Jan-1-1970 UTC) <br/>
Note: 'setPlayheadPosition' has to be called every second
||
Pass playhead position every second during playback
|-
|-
| rowspan="3" | Postroll || <code>nSdkInstance.ggPM(loadMetadata, postrollMetadataObject);</code> || // postrollMetadataObject contains the JSON metadata for the postroll ad
| 'stop' || playhead position in seconds || Call when content or ads complete playing and pass playhead position
|-
|-
| <code>nSdkInstance.ggPM(setPlayheadPosition, playheadPosition);</code> || // playheadPosition is position of the playhead while the postroll ad is being played
| 'end' || playhead position in seconds || Call when the current video asset completes playback and pass the playhead position. <br/>
|-
Example: At the end of the content stream, if the user switches to another piece of content, when the browser is refreshed or closed.
| <code>nSdkInstance.ggPM(stop, playheadPosition);</code> || // Call stop after postroll occurs
|}
|}


<blockquote>Note: Each Ad playhead should reset or begin from 0 at ad start. When content has resumed following an ad break, playhead position must continue from where previous content segment was left off.</blockquote>
== SDK Playhead Event Sequence ==
The sample event lifecycles can be used as a reference for identifying the order for calling events.
 
=== Content Playback ===
<syntaxhighlight lang="javascript">
// START OF STREAM
nSdkInstance.ggPM('loadMetadata', contentMetadataObject);
// CONTENT PLAYS
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
// 
//  pass playhead every second
// 
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
 
// END OF STREAM
nSdkInstance.ggPM('end', playheadPosition);
</syntaxhighlight>
 
 
=== Content Playback with Ads ===
<syntaxhighlight lang="javascript">
// START OF STREAM
nSdkInstance.ggPM('loadMetadata', contentMetadataObject);
// PREROLL
nSdkInstance.ggPM('loadMetadata', prerollMetadataObject);
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
// 
//  pass playhead every second
// 
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
nSdkInstance.ggPM('stop', playheadPosition);
// CONTENT
nSdkInstance.ggPM('loadMetadata', contentMetadataObject);
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
// 
//  pass playhead every second
// 
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
nSdkInstance.ggPM('stop', playheadPosition);
 
// MIDROLL
nSdkInstance.ggPM('loadMetadata', midrollMetadataObject);
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
// 
//  pass playhead every second
// 
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
nSdkInstance.ggPM('stop', playheadPosition);
// CONTENT RESUMES
nSdkInstance.ggPM('loadMetadata', contentMetadataObject);
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
// 
//  pass playhead every second
// 
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
 
// END OF STREAM
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
nSdkInstance.ggPM('end', playheadPosition);
// POSTROLL
nSdkInstance.ggPM('loadmetadata', postrollMetadataObject);
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
// 
//  pass playhead every second
// 
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
nSdkInstance.ggPM('stop', playheadPosition);
</syntaxhighlight>
<blockquote>
* 'setPlayheadPosition' is used for calculating duration and must be passed every second. The final playhead position must be sent for the current asset being played before calling 'stop', 'end', or 'loadmetadata'.


'''For Flash integration'''
* For Ad Pods, events must be called for each individual Ad. Each Ad playhead position should begin at ‘0’ when ad starts.
{| class="wikitable"
|-
! Type !! Sample code !! Description
|-
| Start of stream || <code>ggCom.getInstance().PM(‘loadMetadata’,contentMetadataObject);</code> || // contentMetadataObject contains the JSON metadata for the content
|-
| rowspan="3" | Preroll || <code>ggCom.getInstance().PM(loadMetadata, prerollMetadataObject);</code> || // prerollMetadataObject contains the JSON metadata for preroll ad
|-
| <code>ggCom.getInstance().PM(setPlayheadPosition, playheadPosition);</code> || // playheadPosition is position of the playhead while the preroll ad is being played
|-
| <code>ggCom.getInstance().PM(stop, playheadPosition);</code> || // Call stop after preroll occurs
|-
| rowspan="3" | Content || <code>ggCom.getInstance().PM(loadMetadata, contentMetadataObject);</code> || // contentMetadataObject contains the JSON metadata for the content being played
|-
| <code>ggCom.getInstance().PM(setPlayheadPosition, playheadPosition);</code> || // playheadPosition is position of the playhead while the content is being played
|-
| <code>ggCom.getInstance().PM(stop, playheadPosition);</code> || // Call stop after the content is paused (ad starts)
|-
| rowspan="3" | Midroll || <code>ggCom.getInstance().PM(loadMetadata, midrollMetadataObject);</code> || // midrollMetadataObject contains the JSON metadata for the midroll ad
|-
| <code>ggCom.getInstance().PM(setPlayheadPosition, playheadPosition);</code> || // playheadPosition is position of the playhead while the midroll ad is being played
|-
| <code>ggCom.getInstance().PM(stop, playheadPosition);</code> || // Call stop after midroll occurs
|-
| rowspan="3" | Content (End of stream) || <code>ggCom.getInstance().PM(loadMetadata, contentMetadataObject);</code> || // contentMetadataObject contains the JSON metadata for the content being played
|-
| <code>ggCom.getInstance().PM(setPlayheadPosition, playheadPosition);</code> || // playheadPosition is position of the playhead while the content is being played
|-
| <code>ggCom.getInstance().PM(end, playheadPosition);</code> || // Called at the end of content
|-
| rowspan="3" | Postroll || <code>ggCom.getInstance().PM(loadMetadata, postrollMetadataObject);</code> || // postrollMetadataObject contains the JSON metadata for the postroll ad
|-
| <code>ggCom.getInstance().PM(setPlayheadPosition, playheadPosition);</code> || // playheadPosition is position of the playhead while the postroll ad is being played
|-
| <code>ggCom.getInstance().PM(stop, playheadPosition);</code> || // Call stop after postroll occurs
|}


== Nielsen Measurement Opt-Out Implementation ==
* When content has resumed following an ad break, the playhead position update must continue where previous content segment left off. The playhead position should be passed as a rounded number with no decimals.
As a global information and measurement leader, we are committed to protecting the privacy and security of the data we collect, process and use. Our digital measurement products are not used to identify the consumer in any way, but they help us and our clients measure and analyze how consumers engage with media across online, mobile and emerging technologies, and offer insights into consumer behavior.
</blockquote>


When the user wants to opt in or opt out of Nielsen measurement, a new dynamic page (with content similar to http://secure-us.imrworldwide.com/nielsen_app_optout.html) should be displayed.
{{Template:Browser_Privacy_and_Opt-Out}}


For more details, refer to [[Browser SDK API Reference#Browser Opt-Out Implementation|Browser SDK API Reference - Browser Opt-Out Implementation]] and Nielsen Digital Privacy.
== Going Live ==
* Use [[getOptOutStatus (Browser)]] to retrieve the user’s current Opt-Out status.
After the integration has been certified, users will need to make a couple of updates to the initialization call to ensure that player will be measured properly.
Disable debug logging by deleting {nol_sdkDebug: 'DEBUG'} from initialization call.


== Pre-Certification Checklists ==
'''Example Production Initialization Call'''
After the application is ready to be sent for Nielsen Certification, please go through the Pre-Certification Checklist and ensure the app behaves as expected, before submitting to Nielsen.


== Testing an Implementation - App ==
<syntaxhighlight lang="javascript">
See [[Digital Measurement Testing]].
var nSdkInstance = NOLBUNDLE.nlsQ("XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX", "nlsnInstance", { optout: "false"});
</syntaxhighlight>

Latest revision as of 20:22, 3 September 2024

Engineering Portal / Digital / US DCR & DTVR / DCR Video Browser SDK

Prerequisites

Before you start the integration, you will need:

Item Description Source
App ID (appid) Unique ID assigned to the player/site and configured by product. Contact Nielsen

Release Notes

The release notes on the Browser SDK can be located here: Release Notes

Configure SDK

There are two steps required for configuring the SDK:

  • Add Static Queue Snippet
  • Create SDK Instance

Static Queue Snippet

Add the following script tag to the website:

<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");


var nSdkInstance = NOLBUNDLE.nlsQ("XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX", "nlsnInstance", {
  nol_sdkDebug: "debug",
  optout: "false"
});

</script>

The static queue snippet allows the SDK APIs to be called while the actual SDK and configuration file are still being downloaded. As the queue can capture all API calls before the download completes, there is no wait time. Once the SDK is available, the API calls will transition from directing to the queue to the SDK seamlessly.

For DCR static, BSDK cannot be run in an iframe because the blur/focus events of the parent page may not propagate to the iframe. The iframe events typically trigger when the iframe itself is clicked. The BSDK is dependent on the blur/focus events of the browser to detect active viewing of the page. Because the root page events do not propagate to the iframe, this would impact incorrect DCR static crediting.

Create SDK Instance

To initialize the SDK, create an SDK instance by making the initialization call:

Initialization API Call

NOLBUNDLE.nlsQ("<apid>", "<instanceName>",{nol_sdkDebug: "debug"});


When creating an instance, pass the following values: (nol_sdkDebug and optout are optional)

Parameter Description Values
apid Unique ID assigned to player/site 'PXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'
instanceName Name of SDK instance "any string value"
nol_sdkDebug Enables Nielsen console logging if desired.
{nol_sdkDebug: "debug"} 
{nol_sdkDebug: "info"}
{nol_sdkDebug: "warn"}
{nol_sdkDebug: "true"}
optout Optional: OptOut global parameter. 1/0 or true/false

Example SDK Initialization

When the initialization call is made, a unique static configuration file, <apid>.js, will be downloaded based on the apid and will be cached on the user’s browser.

Once the configuration is downloaded, the SDK itself will be downloaded and initialized. All SDK modules are included in one file: “nlsSDK600.bundle.min.js”.

More information on OptOut Parameter under Privacy and Opt-Out.

Example SDK Configuration

The configuration should include the Static Queue Snippet and an SDK Instance for an unique App ID as shown in the example:

<script type="text/javascript">
// Add 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");
 
// Created SDK Instance
var nSdkInstance = NOLBUNDLE.nlsQ("XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX", "nlsnInstance", {nol_sdkDebug: "debug"});
</script>

Create Metadata Objects

There are two types of asset metadata:

  • content: identify video
  • ad: identify each ad

The metadata received for each asset is used for classification and reporting.

Metadata can be passed through key-values using the Nielsen reserved keys. User will need to set up content and ad objects with the required Nielsen keys as shown in the sample code below.

Content Metadata

Content metadata should remain constant throughout the entirety of an episode/clip including when ads play.

Keys Description Values Required Provider
type Type of asset For Video use: content
For Static or text static
Yes Nielsen
assetid Unique ID assigned to asset
Note: Refrain from using the following special characters (Special Characters).
Examples:
BBT345a234
CBSs5e234F2021
Yes Client
program Complete program or movie title
(no abbreviations or shorthand)
Note: there is a 25 character limit.
The Big Bang Theory
TheBigBangTheory
The Dark Knight
TheDarkKnight
Yes Client
title Episode title with season and episode number (40 character limit)
(Formats accepted: S01E03, S1E3, S1 E3).
Examples:
The Pants Alternative S03E18
The Pants Alternative S3E18
The Pants Alternative S3 E18
Can also accept: S3E18
Not Valid: 318 or 0318
Yes Client
crossId1 Gracenote TMS ID (If available) should be passed for all telecasted content for clients using the Gracenote solution for proper matching purposes.
Note: The TMS ID will be a 14 character string. Normally leading with 2 alpha characters ('EP', 'MV', 'SH' or 'SP'), followed by 12 numbers.
The TMS ID will be a 14 character string.
Normally being with 'EV,' 'EP', 'SH', 'SP', or 'MV'
Followed by 12 numbers after the initial two letter prefix.

The Giant Morning Show: SH009311820022
The Pants Alternative Episode : EP009311820061
Optional Nielsen
crossId2 Populated by content distributor to contribute viewing from that distributor to the given content originator. Custom
For a full list of acceptable values, please contact your Nielsen reprentative.
Yes, for distributors Nielsen
length Length of content in seconds
Note: Integers and decimal values are acceptable for the length parameter.
Examples:

For standard VOD content - 300 to represent 5 minutes, 1320 to represent 22 minutes, etc.
If DAI live stream of a discrete program (Live Event/Sporting Event), pass length of content. See example for standard VOD content above.
If unknown DAI live steam, pass a value of 0.

Yes Client
airdate Original broadcast or release date for the program
For USA, date should be EST
Outside USA, date should be local time.
If not applicable or available, original broadcast or release date for the Program.
Acceptable Formats:
YYYY-MM-DDTHH:MI:SS
YYYY-MM-DDHH:MI:SS
YYYY-MM-DDTHH:MI:SS+xx:xx
YYYY-MM-DDTHH:MI:SS-xx:xx
YYYYMMDDHH:MI:SS
YYYYMMDD HH:MI:SS
MM-DD-YYYY
MM/DD/YYYY
YYYYMMDD
Yes Client
isfullepisode Full episode flag to identify differences between long form content. y- full episode, n- non full episode(clip,teaser,promo,etc.)

Also accept:
lf or yes- longform
sf or no- shortform

Yes Nielsen
adloadtype Type of ad load:

1 Linear – matches TV ad load
2 Dynamic – Dynamic Ad Insertion (DAI)

2 - DCR measures content with dynamic ads Yes Nielsen
segB One of two custom segment for the clients granular reporting within a brand. Examples:
Genre - horror, comedy, etc.
Timeslot - primetime, daytime, etc.
News type - breakingnews, weather, etc.
Optional Client
segC One of two custom segment for the clients granular reporting within a brand. Examples:
Genre - horror, comedy, etc.
Timeslot - primetime, daytime, etc.
News type - breakingnews, weather, etc.
Optional Client

Custom segments (segB and segC) can be used to aggregate video and/or static content within a single Brand to receive more granular reports within a brand.

Examples regarding usage of segments within SDK:

  • All comedy clips and stories for a Brand rolled into a "Comedy" segment
  • genre grouping content by Comedy vs. Drama
  • group related Text + Video content - i.e. for a show that has a lot of - static pages associated with it
  • packaging based on how clients sell inventory
  • grouping related types of content either by genre, category or platform.


Example Content Object

var contentMetadataObject =
{  
  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',
  segB:           'custom segment B', // optional
  segC:           'custom segment C', // optional
  crossId1:       'Standard Episode ID', // optional
  crossId2:       'Content Originator' //optional
};

Ad Metadata

The Ad Metadata (if applicable) should be passed for each individual ad.

Keys Description Values Required
type type of Ad 'preroll', 'midroll', 'postroll'
'ad' - If specific type can not be identified.
assetid unique ID assigned to Ad custom
(no Special Characters)

Example Ad Object

var adMetadataObject = 
{  
  type:    'preroll',
  assetid: 'AD-1'
};


URL Character Limit: There is a URL character limit of 2K characters due to browser limitations. Exceeding this value could impair data delivery on particular browsers.

Call Nielsen APIs

The method for calling events is ggPM().

nSdkInstance.ggPM('event', parameter, ...);

Interrupt Scenarios

Pause Event

The setPlayheadPostion event is used for handling pause. To indicate pause, stop passing the playhead position to the SDK. Once the content resumes, begin sending the playhead again with the correct playhead value.

Other Interrupt Scenarios

The following possible browser interruption scenarios must be handled:

  • Browser/Tab close
  • Leaving the page to another destination
  • Pressing the stop button
  • Network Loss

There are many cases where the player itself has the ability to detect such situations. If not, these interruption scenarios can be handled through JavaScript. The events that are called will depend on the asset being played (e.g. midroll vs. content).

window.addEventListener('beforeunload', function(event) 
{
  // Only inside a midroll indicate <stop> for the ad
  nSdkInstance.ggPM('stop', playheadPosition);
  
  // Indicate <end> and <stop> for the content
  nSdkInstance.ggPM('end', playheadPosition);
  nSdkInstance.ggPM('stop', playheadPosition);
});

Note: User may need to add code to support specific browser versions (e.g. older versions of Internet Explorer).

SDK Events

Event Parameter Description
'loadMetadata' content/ad metadata object Needs to be called at the beginning of each asset
'setPlayheadPosition' playhead position as integer

VOD: || current position in seconds
Live: current Unix timestamp (seconds since Jan-1-1970 UTC)
Note: 'setPlayheadPosition' has to be called every second

Pass playhead position every second during playback

'stop' playhead position in seconds Call when content or ads complete playing and pass playhead position
'end' playhead position in seconds Call when the current video asset completes playback and pass the playhead position.

Example: At the end of the content stream, if the user switches to another piece of content, when the browser is refreshed or closed.

SDK Playhead Event Sequence

The sample event lifecycles can be used as a reference for identifying the order for calling events.

Content Playback

// START OF STREAM
nSdkInstance.ggPM('loadMetadata', contentMetadataObject); 
 
// CONTENT PLAYS
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
//  
//   pass playhead every second
//   
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);

// END OF STREAM
nSdkInstance.ggPM('end', playheadPosition);


Content Playback with Ads

// START OF STREAM
nSdkInstance.ggPM('loadMetadata', contentMetadataObject); 
 
// PREROLL
nSdkInstance.ggPM('loadMetadata', prerollMetadataObject);
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
//  
//   pass playhead every second
//   
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
nSdkInstance.ggPM('stop', playheadPosition);
 
// CONTENT
nSdkInstance.ggPM('loadMetadata', contentMetadataObject);
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
//  
//   pass playhead every second
//   
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
nSdkInstance.ggPM('stop', playheadPosition);

// MIDROLL
nSdkInstance.ggPM('loadMetadata', midrollMetadataObject);
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
//  
//   pass playhead every second
//   
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
nSdkInstance.ggPM('stop', playheadPosition);
 
// CONTENT RESUMES
nSdkInstance.ggPM('loadMetadata', contentMetadataObject);
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
//  
//   pass playhead every second
//   
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);

// END OF STREAM
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
nSdkInstance.ggPM('end', playheadPosition);
 
// POSTROLL
nSdkInstance.ggPM('loadmetadata', postrollMetadataObject);
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
//  
//   pass playhead every second
//   
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);
nSdkInstance.ggPM('stop', playheadPosition);
  • 'setPlayheadPosition' is used for calculating duration and must be passed every second. The final playhead position must be sent for the current asset being played before calling 'stop', 'end', or 'loadmetadata'.
  • For Ad Pods, events must be called for each individual Ad. Each Ad playhead position should begin at ‘0’ when ad starts.
  • When content has resumed following an ad break, the playhead position update must continue where previous content segment left off. The playhead position should be passed as a rounded number with no decimals.

Privacy and Opt-Out

There are two primary methods for implementing user Opt-out preferences:

  1. User Opt Out - Provide a link to the Nielsen Privacy Policy page when a User can make their selection
  2. Initialization Opt Out - Global OptOut Parameter

User Opt Out

The site must provide a means for the user to opt-out of, or opt back into, Nielsen Measurement. A user can opt-out if they would prefer not to participate in any Nielsen online measurement research. To implement the User Opt-Out option, include the following two items in your privacy policy.

  • A notice that the player (or page in relation to static measurement) includes proprietary measurement software that allows users to contribute to market research (such as Nielsen TV Ratings).
  • A link to the Nielsen Digital Measurement Privacy Policy at https://www.nielsen.com/digitalprivacy

On the Nielsen Digital Measurement Privacy Policy page, users can click Choices to read more detailed information about the measurement software, learn about their options with regard to Nielsen measurement, and, if they do not want to participate in Nielsen online measurement, click a link to receive an opt-out cookie.

  • Once users have opted out via this link, their browser cookies will contain the value TOTAL_OPTOUT. This will prevent a redirect to our data provider from occurring
  • Users can opt back in via this link. When a user selects that link, their opt-out cookie will be deleted and they will be able to be measured moving forward.


The following paragraph is a template for a Privacy Statement.

The properties may feature Nielsen proprietary measurement software, which will allow users to contribute to market research, such as Nielsen TV Ratings. To learn more about the information that Nielsen software may collect and your choices with regard to it, please see the Nielsen Digital Measurement Privacy Policy at https://www.nielsen.com/digitalprivacy

User Opt Back In

Once users have opted-out, they can choose to opt back into Nielsen Measurement at anytime by selecting the opt back in link on the Nielsen Digital Privacy Policy page. When a user selects the link, their opt-out cookie will be deleted and they will be able to be measured.

Initialization Opt Out

The BSDK600 now supports the ability to optout on initialization of the SDK by allowing an optout global parameter to be passed. This optout will be maintained through the session of the SDK instance. Specifications and limitations are specified below.

Type Supported Values Notes Optout
optout True, Yes, or 1 Case is insensitive and can be string or bool

Example: nlsQ("XXXXXXXX-BH45-JKY6-BKH7-67GJKY68GJK7", "myInstance", { optout: true});

Ping parameter will set uoo=true.
optout False, No, or 0 Case is insensitive and can be string or bool

Example: nlsQ("XXXXXXXX-BH45-JKY6-BKH7-67GJKY68GJK7", "myInstance", { optout: false});

Ping parameter will set uoo to blank.

Example of using OptOut

var nSdkInstance = NOLBUNDLE.nlsQ("XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX", "nlsnInstance", {
  nol_sdkDebug: "debug",
  optout: "true"
});

Opt Out Overview

Browser Cookie uoo value in session ping Final Optout Status
Default Value no uoo value or uoo=0 Not Opted Out
Default Value uoo=1 Opted Out
TOTAL_OPTOUT uoo=0 Opted Out
TOTAL_OPTOUT uoo=1 Opted Out

Going Live

After the integration has been certified, users will need to make a couple of updates to the initialization call to ensure that player will be measured properly. Disable debug logging by deleting {nol_sdkDebug: 'DEBUG'} from initialization call.

Example Production Initialization Call

var nSdkInstance = NOLBUNDLE.nlsQ("XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX", "nlsnInstance", { optout: "false"});