DTVR Browser SDK: Difference between revisions

From Engineering Client Portal

(Updated DTVR to 600)
Line 4: Line 4:
== Prerequisites ==
== Prerequisites ==
To start using the App SDK, the following details are required:
To start using the App SDK, the following details are required:
* '''App ID (appid):''' Unique ID assigned to the player/site and configured by product.
* '''App ID (apid):''' Unique ID assigned to the player/site and configured by product.
* '''sfcode:''' Location of collection environment. During testing, please use the sfcode as “cert“.
* '''sfcode:''' Location of collection environment. Please set the sfcode to “dcr“.
If you do not have any of these pre-requisites or if you have any questions, please contact our SDK sales support team.
If you do not have any of these pre-requisites or if you have any questions, please contact our SDK sales support team.


== Import Library ==
== Configure SDK ==
In the HTML head section of each page, call the Nielsen library using the script tag, as shown below.
There are two steps required for configuring your SDK: 1. Add Static Queue Snippet and 2. Create SDK Instance.
<syntaxhighlight lang="javascript">    <script type="Javascript" src="http://secure-cert.imrworldwide.com/novms/js/2/ggcmb510.js"></script></syntaxhighlight>


== Define GlobalParams ==
== Add Static Queue Snippet ==
<syntaxhighlight lang="javascript">   <script type=”text/javascript”>
 
     var _nolggGlobalParams =
Add the following script tag to your website:
    {
 
        sfcode: "cert",
<syntaxhighlight lang="javascript">
        apid: "XXXXXXXXXXXXXXX",
<script>
        apn: "test-setup"
     ! function(t, n) {
     };
        t[n] = t[n] || {
    </script></syntaxhighlight>
            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>
</syntaxhighlight>
 
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:
 
<syntaxhighlight lang="javascript">
NOLBUNDLE.nlsQ("<apid>", "<instanceName>",{nol_sdkDebug: "debug"})
</syntaxhighlight>
 
When creating your instance, you will need to pass three parameter values. The available parameters are listed in the table below:


== Initialize SDK ==
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 data requirement. The Nielsen Browser SDK supports multiple processing instances. To create an instance, call the <code>getInstance()</code> function
<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
<syntaxhighlight lang="javascript">    var nSdkInstance=NOLCMB.getInstance();</syntaxhighlight>
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.
{| class="wikitable"
{| class="wikitable"
|-
|-
! Parameters !! Description !! Value !! Required? (Y/N)
! Parameters !! Description !! Value !! Required? (Y/N)
|-
|-
| apid || UniqueID assigned to player/site. There are two IDs provided for
| apid || UniqueID assigned to player/site.  
# Test: begins with 'T' and is used for testing, and
|| "XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX" || Yes
# 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 || No
| instanceName || User-defined string value for describing the player/site. || Client specified || Yes
|-
|-
| sfcode || Location of collection environment. During testing, all traffic should be directed to "cert". || "cert" – testing
| sfcode || Location of collection environment. All traffic should be directed to "dcr". || Yes
"us" – production || Yes
|-
|-
| nol_sdkDebug || Enables Debug Mode which allows output to be viewed in console. || "console" || No
| nol_sdkDebug:"debug" || Enables Debug Mode which allows output to be viewed in console. || "{nol_sdkDebug: "debug"}" || No
|}
|}


<code>apid</code> and <code>sfcode</code> are mandatory parameters while <code>nol_sdkDebug</code> and <code>apn</code> are optional. Use <code>nol_sdkDebug</code> to create logs, only in test environments.
== Example SDK Initialization ==
<syntaxhighlight lang="javascript">   var gg = window.NOLCMB.getInstance(instanceName /*optional*/);
<syntaxhighlight lang="javascript">
     gg.ggInitialize(window._nolggGlobalParams);</syntaxhighlight>
var nSdkInstance = NOLBUNDLE.nlsQ("XXXXXXXXXXX-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 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:
 
<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
var nSdkInstance = NOLBUNDLE.nlsQ("XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX", "nlsnInstance", {nol_sdkDebug: "debug"});
</script>
</syntaxhighlight>


== Configure and fire API calls ==
== Configure and fire API calls ==

Revision as of 21:27, 23 August 2017

Engineering Portal breadcrumbArrow.png Digital breadcrumbArrow.png Digital in TV Ratings breadcrumbArrow.png DTVR Browser SDK

Prerequisites

To start using the App SDK, the following details are required:

  • App ID (apid): Unique ID assigned to the player/site and configured by product.
  • sfcode: Location of collection environment. Please set the sfcode to “dcr“.

If you do not have any of these pre-requisites or if you have any questions, please contact our SDK sales support team.

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
sfcode Location of collection environment. All traffic should be directed to "dcr". Yes
nol_sdkDebug:"debug" Enables Debug Mode which allows output to be viewed in console. "{nol_sdkDebug: "debug"}" No

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

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.

    this.onMeta(function(data, player) {nSdkInstance.ggPM("loadMetadata", metadataObject) });

Below is a sample metadata object.

    var metadataObject =
    {
        channelName: "WXYZ",
        type: "content",
        adModel: "1"
    }

Configure API calls - sendID3

Use sendID3 (Browser) to send ID3 payload of HLS content being played, as and when an ID3 packet is received (approximately, once in every 10 seconds).

    this.onTimedMetadata(function(args) {nSdkInstance.ggPM("sendID3", ID3_Object) });

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

Sample ID3 tags

  • www.nielsen.com/X100zdCIGeIlgZnkYj6UvQ==/X100zdCIGeIlgZnkYj6UvQ==/AAAB2Jz2_k74GXSzx4npHuI_JwJd3QSUpW30rDkGTcbHEzIMWleCzM-uvNOP9fzJcQMWQLJqzXMCAxParOb5sGijSV9dNM3QiBniJYGZ5GI-lL1fXTTN0IgZ4iWBmeRiPpS9AAAAAAAAAAAAAAAAAAAAAFJWFM5SVhTONNU=/00000/00000/00
  • www.nielsen.com/X100zdCIGeIlgZnkYj6UvQ==/R8WHe7pEBeqBhu8jTeXydg==/AAICoyitYqlxT7n6aZ0oMCGheFi4CXFp46AMUPZz1lMr_M9tr3_cjee1SHqxrOiVerMDLeyn9xzocZSKwi746Re8vNOtpNCAZjYABs_J0R25IHpvOc1HS8QHGgD5TgOJeS6gX100zdCIGeIlgZnkYj6UvVJWFNhSVhTiPE0=/00000/46016/00

Note: ID3 tags are not applicable for International (Germany)

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

Configure API calls - end

Call end (Browser) only at the end of playback. Call play (Browser) when resuming the stream / starting the new stream.

If you are viewing Live content, you do not need to use the end call.

Nielsen Measurement Opt-Out Implementation

  • 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.
  • When the user wants to opt in or opt out of Nielsen measurement, a new dynamic page (with content similar to [1]) should be displayed.
  • For more details, refer to Browser SDK API Reference - Browser Opt-Out Implementation and Nielsen Digital Privacy.

Testing an Implementation - App

See Digital Measurement Testing.