View source for DCR Thailand Video Browser SDK

{{Breadcrumb|}} {{Breadcrumb|Digital}} {{Breadcrumb|International}}  {{CurrentBreadcrumb}}
[[Category:Digital]]

== Overview ==
The Nielsen SDK is one of multiple framework SDKs that Nielsen provides to enable measuring live streaming  and video on-demand  content viewing using computer, mobile devices, etc.
The Browser SDK is the framework for browsers developers to integrate Nielsen Measurement into their media player pages.

== Prerequisites ==
To get started, an AppID is needed. The AppID is a unique ID assigned to the player/site/app. This will be provided upon starting the integration from Nielsen.

<syntaxhighlight lang="javascript">
  apid: "XXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" // eg. PDA7D5EE6-B1B8-XXXX-XXXX-2A788BCXXXCA
</syntaxhighlight>

== 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>
!function(t,n)
{
  t[n]=t[n]||
  {
    nlsQ:function(e,o,c,r,s,i)
    {
     return s=t.document,
     r=s.createElement("script"),
     r.async=1,
     r.src=("http:"===t.location.protocol?"http:":"https:")+"//cdn-gl.imrworldwide.com/conf/"+e+".js#name="+o+"&ns="+n,
     i=s.getElementsByTagName("script")[0],
     i.parentNode.insertBefore(r,i),
     t[n][o]=t[n][o]||{g:c||{},
     ggPM:function(e,c,r,s,i){(t[n][o].q=t[n][o].q||[]).push([e,c,r,s,i])}},t[n][o]
    }
  }
}

(window,"NOLBUNDLE");

var nSdkInstance = NOLBUNDLE.nlsQ("PXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX", "nlsnInstance");

</script>
</syntaxhighlight>

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.

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

==== Initialization API Call ====
<syntaxhighlight lang="javascript">
NOLBUNDLE.nlsQ("<apid>", "<instanceName>",{nol_sdkDebug: "debug"})
</syntaxhighlight>

When creating an instance, pass the following three values:
{| class="wikitable"
|-
! 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. Only required for testing (not in production) || "{nol_sdkDebug: "debug"})"
|}

==== Example SDK Initialization ====
<syntaxhighlight lang="javascript">
var nSdkInstance = NOLBUNDLE.nlsQ("PXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX", "nlsnInstance", {nol_sdkDebug: "debug"});
</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.


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

=== Example SDK Configuration ===
The configuration should include the Static Queue Snippet and an SDK Instance for an unique AppID as shown in the example:
<syntaxhighlight lang="javascript">
<script type="text/javascript">
  // Add Static Queue Snippet
 !function(t,n)
{
  t[n]=t[n]||
  {
    nlsQ:function(e,o,c,r,s,i)
    {
     return s=t.document,
     r=s.createElement("script"),
     r.async=1,
     r.src=("http:"===t.location.protocol?"http:":"https:")+"//cdn-gl.imrworldwide.com/conf/"+e+".js#name="+o+"&ns="+n,
     i=s.getElementsByTagName("script")[0],
     i.parentNode.insertBefore(r,i),
     t[n][o]=t[n][o]||{g:c||{},
     ggPM:function(e,c,r,s,i){(t[n][o].q=t[n][o].q||[]).push([e,c,r,s,i])}},t[n][o]
    }
  }
}
(window,"NOLBUNDLE");
 
  // Created SDK Instance
 var nSdkInstance = NOLBUNDLE.nlsQ("PXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX","myPlayerName", {nol_sdkDebug: "DEBUG"});
</script>
</syntaxhighlight>

=== 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 (VOD)====
Content metadata should remain constant throughout the completion of an episode / clip including the ads play.
<table>
<tr>
<th> Keys </th>
<th> Description </th>
<th> Example </th>
<th> Required
</th></tr>
<tr>
<td>'''type'''</td>
<td><code>'content', 'ad'</code></td>
<td> <code> 'content'</code> </td>
<td> Yes
</td></tr>
<tr>
<td> '''assetid''' </td>
<td> unique ID assigned to asset </td>
<td> custom </td>
<td> Yes
</td></tr>
<tr>
<td> '''program''' </td>
<td>name of program (25 character limit) </td>
<td> custom </td>
<td> Yes
</td></tr>
<tr>
<td> '''title''' </td>
<td>name of program (40 character limit) </td>
<td> custom </td>
<td> Yes
</td></tr>
<tr>
<td> '''length''' </td>
<td> length of content in seconds </td>
<td> <code>seconds</code></td>
<td> Yes
</td></tr>
<tr>
<td> '''isfullepisode''' </td>
<td>	full episode flag</td>
<td>	'y'- full episode, 'n'- non full episode</td>
<td> Yes
</td></tr>
<tr>
<td> <b>adloadtype</b>
</td>
<td> ad model (only pass value as 2)
</td>
<td> '2'
</td>
<td>Yes
</td></tr>
<tr>
<td> '''segB''' </td>
<td> custom segment B</td>
<td> custom </td>
<td>
</td></tr>
<tr>
<td> '''segC''' </td>
<td> custom segment C</td>
<td> custom </td>
<td>
</td></tr>
<tr>
<td> '''crossId1'''	</td>
<td> standard episode ID	</td>
<td> custom	</td>
<td> 
</td></tr>
<tr>
<td> '''crossId2	'''</td>
<td> content originator (only required for distributors)	</td>
<td> Nielsen provided	</td>
<td>
</td></tr>

</table>

==== Example Content Object (VOD)====
<syntaxhighlight lang="javascript">
var content_metadata_object = {  
  // SDK
  type:      'content',
  assetid:   'VID123-123456',
  program:   'program name',
  title:     'episode title',
  length:    '543',
  isfullepisode: 'n',
  adloadtype:'2'
}
</syntaxhighlight>

<br/>
==== Content Metadata (Live Streaming)====
Content metadata should remain constant throughout the completion of an episode / clip including the ads play.
<table>
<tr>
<th> Keys </th>
<th> Description </th>
<th> Example </th>
<th> Required
</th></tr>
<tr>
<td>'''type'''</td>
<td><code>'content', 'ad'</code></td>
<td> <code> 'content'</code> </td>
<td> Yes
</td></tr>
<tr>
<td> '''assetid''' </td>
<td> unique ID for each quarter </td>
<td> live021 </td>
<td> Yes
</td></tr>
<tr>
<td> '''program''' </td>
<td>name of program (25 character limit) </td>
<td> "CH Live" </td>
<td> Yes
</td></tr>
<tr>
<td> '''title''' </td>
<td>Use period as title name per each quarter </td>
<td>”02.00-02.14”</td>
<td> Yes</td></tr>
<tr>
<td> '''length''' </td>
<td> length of content in seconds </td>
<td>  900 </td>
<td> Yes
</td></tr>
<tr>
<td> '''isfullepisode''' </td>
<td>	full episode flag</td>
<td>	'y'- full episode</td>
<td> Yes
</td></tr>
<tr>
<td> <b>adloadtype</b>
</td>
<td> ad model (only pass value as 2)
</td>
<td> '2'</td>
<td>Yes
</td></tr>
<tr>
<td> '''segB''' </td>
<td> custom segment B</td>
<td> custom </td>
<td>
</td></tr>
<tr>
<td> '''segC''' </td>
<td> custom segment C</td>
<td> custom </td>
<td>
</td></tr>
<tr>
<td> '''crossId1'''	</td>
<td> standard episode ID	</td>
<td> custom	</td>
<td> 
</td></tr>
<tr>
<td> '''crossId2	'''</td>
<td> content originator (only required for distributors)	</td>
<td> Nielsen provided	</td>
<td>
</td></tr>
</table>

==== Example Content Object (Live Streaming)====
<syntaxhighlight lang="javascript">
var content_metadata_object = {  
  // SDK
  type:      'content',
  assetid:   'live021',
  program:   'CHLive',
  title:     '02.00-02.14',
  length:    '900',
  isfullepisode: 'y',
  adloadtype:'2'
}
</syntaxhighlight>

<br/>
=== Ad Metadata Object ===
The ad metadata should be passed for each individual ad.

{| class="wikitable"
|-
! Keys	!! Description	!! Values	!! Required
|-
| type	|| type of ad	|| 'preroll', 'midroll', 'postroll' or  'AD' ||	✓
|-
| assetid ||	unique ID assigned to ad	|| custom	|| ✓
|}

==== Example Ad Object ====
<syntaxhighlight lang="javascript">
var adMetadataObject = 
{  
  assetid: 'AD-1',
  type:    'preroll'
};
</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>


Avoid Carriage Return (CR) and/or Linefeeds (LF) in all fields (because of current data reporting as CSV)!
Implementations has to filter out CR/LF with appropriate programming.
It's also a good idea to check and validate entries from other systems (eg. CMS, player) before simply copy them to the variables in metadata.

==== Call Nielsen APIs ====
The method for calling events is ggPM().

<syntaxhighlight lang="javascript">
nSdkInstance.ggPM('event', parameter, ...);
</syntaxhighlight>

== Interrupt Scenarios ==

=== Pause Event ===
To indicate pause

* Call [[stop]] immediately and withhold sending playhead position.
* Start sending pings – [[loadMetadata]] and [[playheadPosition]] - once the playback resumes.

=== 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

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">
var stopped = false;
function closePlayer() {
	if (stopped) {return;}
	stopped = true;
	if (inMidroll) {    // Only inside a midroll indicate <stop> for the ad
		nSdkInstance.ggPM('stop', playheadPositionMidroll);
	}
	nSdkInstance.ggPM('end', playheadPositionContent);    // Indicate <end> for the content
};
window.addEventListener("beforeunload", function (e) {
	closePlayer();   // call nielsensdk with end/stop
});
window.addEventListener("pagehide", function (e) {	// for iOS mobile "pagehide" recommended by apple
	closePlayer();   // call nielsensdk with end/stop
});
</syntaxhighlight>

<blockquote>'''Note:''' User may need to add code to support specific browser versions (e.g. older versions of Internet Explorer or covering Safari on mobile browsers ... you may use "onpagehide" event as well).</blockquote>

== Call Nielsen APIs ==
The method for calling events is ggPM().

<syntaxhighlight lang="javascript">
nSdkInstance.ggPM('event', parameter);
</syntaxhighlight>

=== Events ===
The events are included in the table below:
{| class="wikitable"
|-
! Event name !! Values to pass !!  Description
|-
| 'loadMetadata'	|| content/ad metadata object	|| Needs to be called at the beginning of each content/ad metadata object
|-
| 'setPlayheadPosition'
||
*""VOD (or ad ): || current position in seconds (integer)<br/><br/> nSdkInstance.ggPM('setPlayheadPosition', Math.round(player.getcurrentPosition)) <br/><br/>
*""Live streaming: current Unix timestamp (seconds since Jan-1-1970 UTC)<br/>
var currenttime = Math.round(newDate()/1000);<br/> <br/>
nSdkInstance.ggPM("setPlayheadPosition",
currenttime);<br/>
||
Pass playhead position every second during playback
|-
| 'stop' ||	playhead position in seconds	|| Call when ads complete playing and at the very end of the stream. The playhead position must be passed when calling stop
|-
| 'end'	|| playhead position in seconds	|| This event has to be called once for the current video asset at the end of the playback.At the end of the content stream, if the user switches to another piece of content or when the browser is refreshed or closed.
|}

'''Note:''' Playhead position as integer

'''Note:''' 'setPlayheadPosition' has to be called every second (for livestream send the Unix timestamp (seconds since Jan-1-1970 UTC), for VOD send the time in seconds as integer) 

==== Example Events ====
<br/>

'''VOD'''

*'''Event:''' loadMetadata  |  '''Value Pass ( Object ):''' Content Metadata Object

<syntaxhighlight lang="javascript">
  nSdkInstance.ggPM('loadMetadata', contentMetadataObject); 
</syntaxhighlight>


*'''Event:''' loadMetadata  |  '''Value Pass  ( Object ):''' Pre-roll AD Metadata Object

<syntaxhighlight lang="javascript">
  nSdkInstance.ggPM('loadMetadata', prerollMetadataObject); 
</syntaxhighlight>


*'''Event:''' setPlayheadPosition  |  '''Value Pass ( Integer ):''' playheadPosition

<syntaxhighlight lang="javascript">
  nSdkInstance.ggPM('setPlayheadPosition', playheadPosition); 
</syntaxhighlight>


*'''Event:''' stop  |  '''Value Pass ( Integer ):''' stopPlayheadPosition 

<syntaxhighlight lang="javascript">
  nSdkInstance.ggPM('stop', stopPlayheadPosition); 
</syntaxhighlight>


*'''Event:''' end  |  '''Value Pass ( Integer ):''' endPlayheadPosition 

<syntaxhighlight lang="javascript">
  nSdkInstance.ggPM('end', endPlayheadPosition); 
</syntaxhighlight>

<br/>

'''Live Streaming'''

*'''Event:''' loadMetadata  |  '''Value Pass ( Object ):''' Content Metadata Object

<syntaxhighlight lang="javascript">
  nSdkInstance.ggPM('loadMetadata', contentMetadataObject); 
</syntaxhighlight>


*'''Event:''' setPlayheadPosition  |  '''Value Pass ( Integer ):''' playheadPosition

<syntaxhighlight lang="javascript">
  nSdkInstance.ggPM('setPlayheadPosition', playheadPosition); 
</syntaxhighlight>

<br/>

   '''When the quarters hour change'''
<br/>
*'''Event:''' end  |  '''Value Pass ( Integer ):''' endPlayheadPosition 

<syntaxhighlight lang="javascript">
  nSdkInstance.ggPM('end', endPlayheadPosition); 
</syntaxhighlight>


*'''Event:''' loadMetadata  |  '''Value Pass ( Object ):''' Content Metadata Object

<syntaxhighlight lang="javascript">
  nSdkInstance.ggPM('loadMetadata', contentMetadataObject); 
</syntaxhighlight>


*'''Event:''' setPlayheadPosition  |  '''Value Pass ( Integer ):''' playheadPosition

<syntaxhighlight lang="javascript">
  nSdkInstance.ggPM('setPlayheadPosition', playheadPosition); 
</syntaxhighlight>

==  SDK Event Lifecycle ==

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


{{Examples|
without Ads|

==== Event Lifecycle without ads: ====
<br>
[[File:even browser no ads.png]]

==== Example without ads: ====
<syntaxhighlight lang="javascript">
// START OF STREAM
nSdkInstance.ggPM('loadMetadata', contentMetadataObject);  // must be called as start of stream

// CONTENT
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);  // must be fired every second with playhead starting from 0 (or with seconds since 1970-01-01 00:00:00 in case of livestream)

... /*** pass playheads every second ***/

nSdkInstance.ggPM('setPlayheadPosition', lastPlayheadPosition);
// END OF STREAM
nSdkInstance.ggPM('end', endPlayheadPosition);  // has to be called here at the end of the content
// endPlayheadPosition = lastPlayheadPosition
</syntaxhighlight>


|with Ads=

==== Event Lifecycle with ads: ====
<br>
[[File:event browser.png|event browser.png]]
<br>

==== Example with ads: ====
<syntaxhighlight lang="javascript">
// START OF STREAM
nSdkInstance.ggPM('loadMetadata', contentMetadataObject); // must be called as start of stream (even if 1st asset is preroll)
 
// PREROLL
nSdkInstance.ggPM('loadMetadata', prerollMetadataObject);
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition); // must be fired every second with playhead starting from 0

... /*** pass playhead every second ***/

nSdkInstance.ggPM('setPlayheadPosition', lastPlayheadPosition);  // end pre-roll stream
nSdkInstance.ggPM('stop', stopPlayheadPosition);  // stopPlayheadPosition = lastPlayheadPosition
 
// CONTENT
nSdkInstance.ggPM('loadMetadata', contentMetadataObject);
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);  // must be fired every second with playhead starting from 0 for the first segment (or with seconds since 1970-01-01 00:00:00 in case of livestream)

... /*** pass playhead every second ***/

nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);

// MIDROLL
nSdkInstance.ggPM('loadMetadata', midrollMetadataObject);
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition); // must be fired every second with playhead starting from 0

... /*** pass playhead every second ***/
  
nSdkInstance.ggPM('setPlayheadPosition', lastPlayheadPosition);  // end mid-roll stream
nSdkInstance.ggPM('stop', stopPlayheadPosition);  // stopPlayheadPosition = lastPlayheadPosition
 
// CONTENT
nSdkInstance.ggPM('loadMetadata', contentMetadataObject);
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition); // must be fired every second with playhead starting from where it left off before mid-roll (or with seconds since 1970-01-01 00:00:00 in case of livestream)

... /*** pass playhead every second ***/
 
nSdkInstance.ggPM('setPlayheadPosition', lastPlayheadPosition); 
nSdkInstance.ggPM('end', endPlayheadPosition);  // has to be called here at the end of the content
// endPlayheadPosition = lastPlayheadPosition
 
// POSTROLL
nSdkInstance.ggPM('loadmetadata', postrollMetadataObject);
nSdkInstance.ggPM('setPlayheadPosition', playheadPosition);  // must be fired every second with playhead starting from 0

... /*** pass playhead every second ***/
 
nSdkInstance.ggPM('setPlayheadPosition', lastPlayheadPosition); // end post-roll stream
// END OF STREAM
nSdkInstance.ggPM('stop', stopPlayheadPosition);  // stopPlayheadPosition = lastPlayheadPosition
</syntaxhighlight>

<br>
}}

* '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'.

* after an 'end' in case there is a new content played, there is a need to have another 'loadmetadata' again.

* For Ad, 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.

* For pre-roll ads you have to call the loadMetadata event for content at the start of stream and after the preroll

== Nielsen 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 opt-out option, include the following two items in your privacy policy.
* A notice that the player includes proprietary measurement software that allows users to contribute to market research.
* A link to the Nielsen Digital Measurement Privacy Policy at https://priv-policy.imrworldwide.com/priv/browser/th/en/optout.html.
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.

The following paragraph is a template for an opt-out statement.

''The properties may feature Nielsen proprietary measurement software, which will allow users to contribute to market research. 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://priv-policy.imrworldwide.com/priv/browser/th/en/optout.html."

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

== Going Live ==
Following Nielsen testing, users need to make a couple of updates to the initialization call to ensure that the site is being measured properly.
# '''Debug Logging''': Disable logging by deleting <code>{nol_sdkDebug: 'debug'}</code> from initialization call.

====Example Production Initialization Call ====
Refer to the production initialization call below:

<syntaxhighlight lang="javascript">var nSdkInstance = NOLBUNDLE.nlsQ("PDA7D5EE6-B1B8-XXXX-XXXX-2A788BCXXXCA", "myPlayerName");
</syntaxhighlight>


'''Note''': before going live you have to inform Nielsen - this is necessary, because Nielsen team has to adjust internal configuration parameter to enable data collection. Without that notification no data will be collected and no data will be reported.