View source for DCR Static Browser SDK (6.0.0)

{{Breadcrumb|}} {{Breadcrumb|Digital}} {{Breadcrumb|US DCR & DTVR}}  {{CurrentBreadcrumb}}
[[Category:Digital]]

== Prerequisites ==
To start using the App SDK, the following items are required:
{| class="wikitable"
|-
! style="width: 30px;" |
! 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]]'''

== Implementation Steps ==
=== Add Tracking Code ===
The Nielsen DCR Tracking Code must be added to each page.
<syntaxhighlight lang="javascript"><script>
  // 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");

  // SDK Initialization
var nSdkInstance = NOLBUNDLE.nlsQ("PXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX", "nlsnInstance", {
    nol_sdkDebug: "debug"
});
  
  // Content Metadata 
  var nielsenMetadata = {
    type: 'static', 
    assetid: 'HHF887465-9486', // *DYNAMIC METADATA*: unique ID for each article **REQUIRED**
    section: 'SPORTS', // *DYNAMIC METADATA*: section of site **REQUIRED**
    segA: 'HDVIDEOS', // *DYNAMIC METADATA*: custom segment
    segB: '', // *DYNAMIC METADATA*: custom segment
    segC: ''  // *DYNAMIC METADATA*: custom segment
    }; 
    
  // Event 'staticstart' Call
  nSdkInstance.ggPM("staticstart", nielsenMetadata);
</script></syntaxhighlight>
<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>

=== Tracking Code Components ===
The tracking code includes
* Static Queue Snippet
* SDK Initialization
* Content Metadata
* staticstart Event

'''Static Queue Snippet'''

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.
<syntaxhighlight lang="javascript">
! 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");
</syntaxhighlight>


'''SDK Initialization'''

While creating an SDK instance, initialize the SDK by calling:

'''Initialization API Call'''

<syntaxhighlight lang="javascript">NOLBUNDLE.nlsQ("PXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX", "",{nol_sdkDebug: "debug"})</syntaxhighlight>

When the initialization call is made, a unique static config file, <code><apid>.js</code>, will be downloaded based on the <code>apid</code> and cached by the client-side browser(s).

Once the static config file is downloaded, the SDK will be fully downloaded and initialized. All SDK modules are included in one file:
"nlsSDK600.bundle.min.js".

'''Content Metadata'''

Metadata can be passed through key-values using the Nielsen reserved keys. The tracking code includes the Nielsen reserved keys and placeholder values.

Pass dynamic metadata for the keys with the <code><metadataPlaceholder></code> value (e.g. <code>section: ''</code>).

'''staticstart Event'''

There is only one event call required:
<syntaxhighlight lang="javascript">nSdkInstance.ggPM("staticstart", nielsenMetadata);</syntaxhighlight>

The content metadata object is passed as a parameter when calling 'staticstart' event . To know more about configuring metadata refer [[DCR_Static_Browser_SDK_(6.0.0)#Configure_Metadata|Configure Metadata]].

=== Pass App ID in Initialization Call ===
Pass the unique App ID in the first parameter of the initialization call, <code><apid></code>.

'''Example SDK Initialization'''

<syntaxhighlight lang="javascript">var nSdkInstance = NOLBUNDLE.nlsQ("PXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX", "nlsnInstance", {nol_sdkDebug: "debug"});</syntaxhighlight>

The initialization call has three parameters:
{| class="wikitable"
|-
! Parameter !! Description !! Values
|-
| apid || Unique ID assigned to player/site. || <code>PXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX</code>
|-
| instanceName || Name of SDK instance || Any string value
|-
| nol_sdkDebug: "debug" || Enables Nielsen console logging. Only required for testing || <code>{nol_sdkDebug: "debug"}</code>
|}

Update <code><apid></code> with the AppID provided. Refer to the [[#Going_Live|Going Live]] section to know about updating the AppID to production after testing is completed.

{{Template:Browser_Metadata}}

{{Template:Browser_Privacy_and_Opt-Out}}

== Infinite Scrolling ==

 <code>onPaginate</code> will refire the view ping with the existing/original metadata.

<source lang="javascript">nSdkInstance.ggPM("onPaginate", scrolloffset);</source>
<br>
{|
!width="23%"| Parameter
!width="19%"| Description
|-
| event
| <code>onPaginate</code>
|-
| scrolloffset
| The <code>scrolloffset</code> value should be the y-scroll position:
|}

=== onPaginate ===

<code>onPageinate</code> is a slightly modified version of <code>staticstart</code> to enable tracking of user’s focus in pages with continuous scrolling. <code>onPaginate</code> event provides the same behavior as <code>staticstart</code> keeping it local to only clients who wish to implement continuous scrolling. (Note: This event <code>onPaginate</code> will not reset the page duration timer.)

* The maximum number of static View pings allowed per session is ‘1’. This is enforced via the <code>nol_maxPingCount</code> parameter in the tag and the cadence of impression.
* When an <code>onPaginate</code> event is called at the end of section / a focus shift (within the same page), this filter will reset the current ping count to ‘0’ for the static View ping. This change of value will cause a new View ping when the Browser SDK receives the next <code>staticPosition</code> event (at the section end). This sequence continues through the end of scrolling or till the close of static page session.
*One of the following must occur before an onPaginate event should be sent : user-initiated action, more than 50% of the content has changed or an ad, or the potential for an ad, is being loaded

[[File:StaticPageEvent35.jpg|center|link=]]

== Going Live ==
Once the DCR Tracking Code is added, Nielsen will validate the implementation. Following Nielsen testing, users need to make a couple of updates to the initialization call to ensure that the site is being measured properly.
# '''App ID''': Ensure that correct <apid> is used during initialization<syntaxhighlight lang="javascript">'PXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'</syntaxhighlight>
# '''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("PXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX", "nlsnInstance");</syntaxhighlight>