DTVR Browser SDK: Difference between revisions

From Engineering Client Portal

No edit summary
No edit summary
Line 1: Line 1:
{{Breadcrumb|}} {{Breadcrumb|Digital}} {{Breadcrumb|US DCR & DTVR}}  {{CurrentBreadcrumb}}
{{Breadcrumb|}} {{Breadcrumb|Digital}} {{Breadcrumb|DCR & DTVR}}  {{CurrentBreadcrumb}}
[[Category:Digital]]
[[Category:Digital]]


Line 10: Line 10:
! Description
! Description
! Source
! Source
|-style="background-color:#d0f6f8;"
|-
|| ☑ || '''App ID (appid)''' || Unique ID assigned to the player/site and configured by product. || Contact Nielsen
|| ☑ || '''App ID (apid)''' || 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 ==
== Configure SDK ==
Line 68: Line 65:
|-
|-
| nol_sdkDebug:"debug" || Enables Debug Mode which allows output to be viewed in console. || "{nol_sdkDebug: "debug"}" || No
| nol_sdkDebug:"debug" || Enables Debug Mode which allows output to be viewed in console. || "{nol_sdkDebug: "debug"}" || No
|-
| containerId || HTML DOM element id of the player container || {"containerId: "player1"} || Yes - if implementing Viewability/Audibility
|}
|}


Line 108: Line 107:
//Create SDK Instance
//Create SDK Instance
var nSdkInstance = NOLBUNDLE.nlsQ("XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX", "nlsnInstance", {nol_sdkDebug: "debug"});
var nSdkInstance = NOLBUNDLE.nlsQ("XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX", "nlsnInstance", {nol_sdkDebug: "debug"});
</script>
</syntaxhighlight>
== SDK Initialization to measure Viewability & Audibility ==
To support Viewability and Audibility metrics in the web page the integrator has to provide a tag value of the player view to let Nielsen SDK know that there is a player that needs to be tracked. It’s called the ‘containerId’ and it should be passed in as a string while initializing the Nielsen browser SDK.
<syntaxhighlight lang="javascript">
NOLBUNDLE.nlsQ("<apid>", "<instanceName>",{containerId: <playerElementID>, nol_sdkDebug: "debug"})
</syntaxhighlight>
=== Example SDK Initialization for Viewability & Audibility ===
Your configuration should include the Static Queue Snippet and an SDK Instance for your unique App ID as shown in the example:
<syntaxhighlight lang="javascript">
//Add Static Queue Snippet
<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");
//Create SDK Instance with containerId
var nSdkInstance = NOLBUNDLE.nlsQ("XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX", "nlsnInstance", {containerId: "player1", nol_sdkDebug: "debug"});
</script>
</script>
</syntaxhighlight>
</syntaxhighlight>
Line 146: Line 187:
=== Ad Metadata Object ===
=== Ad Metadata Object ===
<br/>
<br/>
PLEASE NOTE: The Ad Metadata Object is only required in a DCR/DTVR hybrid implementation.
If Ad is not ID3 tagged, then Ad metadata should be passed for each individual Ad, if ads are available during or before the stream begins.
<br/>
<br/>
{| class="wikitable"
{| class="wikitable"
Line 152: Line 193:
! Keys !! Description !! Values !! Required
! Keys !! Description !! Values !! Required
|-
|-
| type || type of Ad ||  <code>'preroll'</code>,  <code>'midroll'</code>,  <code>'postroll'</code> <br> <code>'ad'</code>  - If specific type can not be identified.||
| type || type of Ad ||  <code>'preroll'</code>,  <code>'midroll'</code>,  <code>'postroll'</code> <br> <code>'ad'</code>  - If specific type can not be identified.||
|-
|-
| assetid || unique ID assigned to ad || custom (no [[Special Characters]]) ||  
| assetid || unique ID assigned to ad || custom (no [[Special Characters]]) ||
|}
|}
<br/>
<br/>
Line 174: Line 215:
|-
|-
| 'sendID3' || Used to send the ID3 tag payload retrieved from the stream || Needs to be called at the beginning of playback
| 'sendID3' || Used to send the ID3 tag payload retrieved from the stream || Needs to be called at the beginning of playback
|-
| 'setVolume'  || Used to pass in the player volume levels in % || Needs to be called when the player volume changes. This is applicable only for Audibility feature
|}
|}


=== Configure and fire API calls ===
== Configure and fire API calls ==
<br />
<br />
The syntax for firing events is:
The syntax for firing events is:
<syntaxhighlight lang="javascript">nSdkInstance.ggPM("event", parameter object);</syntaxhighlight>
<syntaxhighlight lang="javascript">   nSdkInstance.ggPM("event", parameter object);</syntaxhighlight>
<br />
<br />
Event is passed in parameter 1 and the argument is passed in parameter 2.
Event is passed in parameter 1 and the argument is passed in parameter 2.


==== Configure API calls - loadMetadata ====
=== Configure API calls - loadMetadata ===
<br />
<br />
Use [[loadMetadata (Browser)]] to pass the metadata object. The data must be passed as a JSON string.
Use [[loadMetadata (Browser)]] to pass the metadata object. The data must be passed as a JSON string.
Line 189: Line 232:
<syntaxhighlight lang="javascript">nSdkInstance.ggPM("loadMetadata", metadataObject);</syntaxhighlight>
<syntaxhighlight lang="javascript">nSdkInstance.ggPM("loadMetadata", metadataObject);</syntaxhighlight>


==== Configure API calls - sendID3 ====
=== Configure API calls - sendID3 ===
<br />
<br />
Use [[sendID3 (Browser)]] to send ID3 payload of the HLS content being played. This will allow the ID3 payload to be sent every time an ID3 packet is received (approximately, once in every 10 seconds).
Use [[sendID3 (Browser)]] to send ID3 payload of the HLS content being played. This will allow the ID3 payload to be sent every time an ID3 packet is received (approximately, once in every 10 seconds).
Line 195: Line 238:
<syntaxhighlight lang="javascript">nSdkInstance.ggPM("sendID3", ID3_Payload);</syntaxhighlight>
<syntaxhighlight lang="javascript">nSdkInstance.ggPM("sendID3", ID3_Payload);</syntaxhighlight>
<br />
<br />
===== Sample ID3 tags =====
==== Sample ID3 tags ====
<br />
<br />
<syntaxhighlight>
<syntaxhighlight>
Line 206: Line 249:
<br />
<br />
Refer to [[Browser SDK API Reference#Retrieving ID3 Tags|Browser SDK API Reference - Retrieving ID3 Tags]] section to know more details.
Refer to [[Browser SDK API Reference#Retrieving ID3 Tags|Browser SDK API Reference - Retrieving ID3 Tags]] section to know more details.
=== Configure API calls - setVolume ===
<br />
Use the setVolume(Browser) to send the player volume for Audibility feature. By default the volumeLevel is set to -1. VolumeLevel is the Audibility percentage (0-100).  If the player is muted, use volumeLevel of 0.
<br />
<syntaxhighlight lang="javascript">nSdkInstance.ggPM("setVolume", volumeLevel);</syntaxhighlight>


<!--
<!--

Revision as of 18:03, 28 September 2022

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

Prerequisites

Before you start the integration, you will need:

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

Configure SDK

There are two steps required for configuring your SDK: 1. Add Static Queue Snippet and 2. Create SDK Instance.

Add Static Queue Snippet

Add the following script tag to your website:

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

The static queue snippet allows the SDK APIs to be called while the actual SDK and configuration file are still being downloaded. Since the queue is able to 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, you will need to create an SDK instance by making the initialization call:

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


When creating your instance, you will need to pass three parameter values. The available parameters are listed in the table below:

Parameters Description Value Required? (Y/N)
apid UniqueID assigned to player/site. "XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX" Yes
instanceName User-defined string value for describing the player/site. Client specified Yes
nol_sdkDebug:"debug" Enables Debug Mode which allows output to be viewed in console. "{nol_sdkDebug: "debug"}" No
containerId HTML DOM element id of the player container {"containerId: "player1"} Yes - if implementing Viewability/Audibility

SDK Initialization

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

When the initialization call is made, a unique static configuration file, <apid>.js, will be downloaded based on your apid and 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".

Example SDK Initialization

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

//Add Static Queue Snippet
<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");

//Create SDK Instance
var nSdkInstance = NOLBUNDLE.nlsQ("XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX", "nlsnInstance", {nol_sdkDebug: "debug"});
</script>


SDK Initialization to measure Viewability & Audibility

To support Viewability and Audibility metrics in the web page the integrator has to provide a tag value of the player view to let Nielsen SDK know that there is a player that needs to be tracked. It’s called the ‘containerId’ and it should be passed in as a string while initializing the Nielsen browser SDK.

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

Example SDK Initialization for Viewability & Audibility

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

//Add Static Queue Snippet
<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");

//Create SDK Instance with containerId
var nSdkInstance = NOLBUNDLE.nlsQ("XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX", "nlsnInstance", {containerId: "player1", 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 Object


Content metadata should remain constant throughout the completion of an episode or live stream.

Key Description Values Required
type type of asset "content"
adModel linear vs dynamic ad model * 1) - Linear – matches TV ad load * 2) Dynamic – Dynamic Ad Insertion (DAI)


Example Content Object

 var contentMetadataObject =
{  
  type: 'content',
  adModel: '1'
};

Ad Metadata Object


If Ad is not ID3 tagged, then Ad metadata should be passed for each individual Ad, if ads are available during or before the stream begins.

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 = 
{  
  assetid: 'AD-1',
  type:    'preroll'
};

SDK Events


Event Parameter Description
'loadMetadata' content/Ad metadata object Needs to be called at the beginning of each asset to pass type and adModel
'sendID3' Used to send the ID3 tag payload retrieved from the stream Needs to be called at the beginning of playback
'setVolume' Used to pass in the player volume levels in % Needs to be called when the player volume changes. This is applicable only for Audibility feature

Configure and fire API calls


The syntax for firing events is:

    nSdkInstance.ggPM("event", parameter object);


Event is passed in parameter 1 and the argument is passed in parameter 2.

Configure API calls - loadMetadata


Use loadMetadata (Browser) to pass the metadata object. The data must be passed as a JSON string.

nSdkInstance.ggPM("loadMetadata", metadataObject);

Configure API calls - sendID3


Use sendID3 (Browser) to send ID3 payload of the HLS content being played. This will allow the ID3 payload to be sent every time an ID3 packet is received (approximately, once in every 10 seconds).

nSdkInstance.ggPM("sendID3", ID3_Payload);


Sample ID3 tags


www.nielsen.com/X100zdCIGeIlgZnkYj6UvQ==/X100zdCIGeIlgZnkYj6UvQ==/AAAB2Jz2_k74GXSzx4npHuI_<wbr />JwJd3QSUpW30rDkGTcbHEzIMWleCzM-uvNOP9fzJcQMWQLJqzXMCAxParOb5sGijSV9dNM3QiBniJYGZ5GI-lL1fXTTN0IgZ4iWBmeRiPpS9AAAAAAAAAAAAAAAAAAAAAFJWFM5SVhTONNU=/00000/00000/00


www.nielsen.com/X100zdCIGeIlgZnkYj6UvQ==/R8WHe7pEBeqBhu8jTeXydg==/AAICoyitYqlxT7n6aZ0oMCGhe<wbr />Fi4CXFp46AMUPZz1lMr_M9tr3_cjee1SHqxrOiVerMDLeyn9xzocZSKwi746Re8vNOtpNCAZjYABs_J0R25IHpvOc1HS8<wbr />QHGgD5TgOJeS6gX100zdCIGeIlgZnkYj6UvVJWFNhSVhTiPE0=/00000/46016/00


ID3_Payload is the container to pass the retrieved ID3 tag from the streaming. The player should look for 'PRIV' ID3 tags and send 'owner' field (which typically starts from "www.nielsen.com") through this API. Refer to Browser SDK API Reference - Retrieving ID3 Tags for more information.

Refer to Browser SDK API Reference - Retrieving ID3 Tags section to know more details.

Configure API calls - setVolume


Use the setVolume(Browser) to send the player volume for Audibility feature. By default the volumeLevel is set to -1. VolumeLevel is the Audibility percentage (0-100). If the player is muted, use volumeLevel of 0.


nSdkInstance.ggPM("setVolume", volumeLevel);


SDK DTVR Event Sequence


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

nSdkInstance.ggPM('loadMetadata', contentMetadataObject); 
nSdkInstance.ggPM('sendID3', ID3_Payload); //call sendID3 every 10 seconds and stop calling during any playback interruptions

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