DCR Static Google Tag Manager

2019-03-20T18:50:55Z

Admin3:

File:Untitled-gtm.jpg

2019-03-20T18:48:18Z

Admin3:

Untitled-gtm

2019-03-08T00:19:55Z

Admin3:

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

== Prerequisites ==
To get started, an App ID is needed. The App ID is a unique ID assigned to the player/site/app. This will be provided upon starting the integration.
<syntaxhighlight lang="javascript">'PXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'</syntaxhighlight>

== Configure SDK ==
There are two steps required for configuring the SDK:
* Add Static Queue Snippet
* Create SDK Instance
=== Add Static Queue Snippet ===
Add the following script tag to the website:
<syntaxhighlight lang="javascript">
<script type = "text/javascript" >
/***************** Static Queue Snippet *********************/
! function(t, n) {
t[n] = t[n] || {
nlsQ: function(e, c, o, 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=" + c + "&ns=" + n, i = s.getElementsByTagName("script")[0], i.parentNode.insertBefore(r, i),
t[n][c] = t[n][c] || {
g: o || {},
ggPM: function(e, o, r, s, i) {
(t[n][c].q = t[n][c].q || []).push([e, o, r, s, i])
},
trackEvent: function(e) {
(t[n][c].te = t[n][c].te || []).push(e)
}
}, t[n][c]
}
}
}(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. 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", optout: "false"})
</syntaxhighlight>
<br>
When creating an instance, pass the following values: (<code>nol_sdkDebug</code> and <code>optout</code> are optional)
{| 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 || "{nol_sdkDebug: "debug"})"
|-
|optout || OptOut global parameter (Optional Parameter) || <code>1/0</code> or <code>true/false</code>
|}

==== 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 [[DCR Video Browser Bundled SDK#Privacy_and_Opt-Out|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:
<syntaxhighlight lang="javascript">
<script type = "text/javascript" >
/***************** Static Queue Snippet *********************/
! function(t, n) {
t[n] = t[n] || {
nlsQ: function(e, c, o, 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=" + c + "&ns=" + n, i = s.getElementsByTagName("script")[0], i.parentNode.insertBefore(r, i),
t[n][c] = t[n][c] || {
g: o || {},
ggPM: function(e, o, r, s, i) {
(t[n][c].q = t[n][c].q || []).push([e, o, r, s, i])
},
trackEvent: function(e) {
(t[n][c].te = t[n][c].te || []).push(e)
}
}, t[n][c]
}
}
}(window, "NOLBUNDLE");

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

== Simplified API Syntax ==
The existing API has a number of methods used for reporting player and application state changes to the SDK. The order of calls is important for the SDK in the existing API. In the new simplified API, all these calls will be replaced with one API call that will get one dictionary object with many key-value pairs, where any value could be another complex dictionary object. All the data provided in the older API in separate calls will be provided in one single call.

Main API call for the new NielsenEventTracker API:
<br/>
<syntaxhighlight lang="java"> nSdkInstance.trackEvent({metadata})
</syntaxhighlight>

=== Handling JSON Metadata ===
Parameter “data” is a JSON object with many key-value pairs that holds all information required by SDK.

Format of input object is the following:
<syntaxhighlight lang="json">
{
"event": <event identifier>,
"type": <type of metadata>,
"metadata":{
"content": <content metadata object>,
"ad": <ad metadata object>,
"static": <static metadata object>
},
"playheadPosition":<playhead value | UNIX timestamp (seconds since Jan-1-1970 UTC) >,
"id3Data": <id3 payload>,
}
</syntaxhighlight>
<br>
=== Event Types ===
The New API method supports the following event types:
{| class="wikitable"
!Key
!Description
|-
|'''playhead'''||
It is used to pass content, ad or static metadata, the current playhead value, Unix timestamp or id3 payload, ott information to the SDK.
|-
|'''pause'''||
This event should be used when
content playback is paused. <br > (Pause is detected by SDK automatically when the time gap between commands is more than 30 minutes.)
|-
|'''complete'''||
It is called when session is completed or ends.
|-
|'''adStop'''||
Should be called at the end of each ad. This event type is required to handle the case when advertisements could not be distinguished, as its assetId is the same.
|}
'''NOTE: Since only recording static data, playheadposition = ""'''

=== Static Metadata ===
The values passed through the Nielsen keys will determine the breakouts that are seen in reporting. The custom segments (A, B & C) will roll into the sub-brand. To not use custom segments A, B and C, do not pass any value in these keys.
<br/>
{| class="wikitable"
|-
! Key !! Description !! Data Type !! Value !! Required?
|-
| assetid || Unique ID for each article || dynamic || custom <br>(no [[Special Characters]]) || Yes
|-
| section || Section of each site which is limited to 25 unique values<br> (e.g. section value should be first level in page URL: website.com/section). || dynamic || custom || Yes
|-
| segA || custom segment for reporting: Limit to 25 unique values across custom segments<br> (segA + segB + segC) || dynamic || custom || No
|-
| segB || custom segment for reporting: Limit to 25 unique values across custom segments<br> (segA + segB + segC) || dynamic || custom || No
|-
| segC || custom segment for reporting: Limit to 25 unique values across custom segments<br> (segA + segB + segC) || dynamic || custom || No
|}

'''Aggregation Limits'''
There are limits on the number of unique values that can be aggregated on in reporting. The specific limitations by key are:
{| class="wikitable"
|-
! Key !! Aggregation Limit
|-
| section || maximum of 25 unique values (section <= 25)
|-
| segA || Maximum number of unique values allowed across segA, segB, and segC is 25 (segA + segB + segC<= 25)
|-
| segB || Maximum number of unique values allowed across segA, segB, and segC is 25 (segA + segB + segC<= 25)
|-
| segC || Maximum number of unique values allowed across segA, segB, and segC is 25 (segA + segB + segC<= 25)
|}

=== Static Metadata Sample ===
<syntaxhighlight lang="json">
// Sample input Object for static metadata
// Since only recording static data, playheadposition = ""
{
"metadata": {
"content": {},
"ad": {},
"static": {
"type":"static",
"assetid":"Static1",
"section":"Page",
"segA":"S07E04:NBC",
"segB":"teams",
"segC":"Atlanta",
"crossId1":"Reference"
}
},
"event": "playhead",
"type": "static",
"playheadPosition": "",
}
</syntaxhighlight>
=== Json Examples ===
[https://engineeringportal.nielsen.com/docs/Digital_Measurement_Simplified_SDK_Supplements Addtional JSON input object examples.]
{{Template:Browser_Privacy_and_Opt-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

<syntaxhighlight lang="javascript">
var nSdkInstance = NOLBUNDLE.nlsQ("XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX", "nlsnInstance", { outout: "false"});
</syntaxhighlight>

== Sample Code ==
This code is for example purposes only to demonstrate a very simple video implementation, with a single preroll and single content block.
<syntaxhighlight lang=javascript>
<script >
// Setup videojs sample player
var nielsenid = document.getElementById("my-sdkplayer");
var coolPlayer = videojs('my-sdkplayer', {
controls: true,
autoplay: true,
preload: 'auto',
});
var prevPos = null;

coolPlayer.preroll({
src: {
src: "assets/CleaningCrew.mp4",
type: "video/mp4"
},
href: "http://videojs.com",
adsOptions: {
debug: true
}
});

videojs('my-sdkplayer').ready(function() {
// EXAMPLE: Start playing the video.

coolPlayer.play();
var obj = {
event: 'playhead', // playhead,pause,complete,adstop
type: 'content',
playheadPosition: '0',
metadata: {
content: {
type: 'content',
assetid: 'VID98-2B88',
program: 'Put a programname here ',
title: 'S01E02',
length: '180',
airdate: '20190101 10:01:00',
isfullepisode: 'y',
crossId1: 'Standard Episode ID',
crossID2: 'Content Originator',
adloadtype: '2'
},
ad: {},
static: {}
}
};

coolPlayer.on('timeupdate', function() {
var getcurrentTime = coolPlayer.currentTime();
var intPlayedTime = parseInt(getcurrentTime, 10);
if (intPlayedTime > 0 && intPlayedTime !== prevPos && !coolPlayer.scrubbing()) {
// check for playhead change so it's only called once per second
console.log('PLAYHEAD EVENT **************************************************************');
console.log(Math.round(getcurrentTime));
obj.event = 'playhead';
obj.type = 'content';
obj.metadata.ad = {};
prevPos = intPlayedTime;
obj.playheadPosition = Math.round(getcurrentTime);
nSdkInstance.trackEvent(obj);
}
});

this.on('adstart', function() {
console.log('ADSTART EVENT **************************************************************');
obj.type = 'ad';
obj.metadata.ad = {
type: 'preroll',
assetid: 'AD9455',
adldx: '1',
program: 'Cant Skip Campaign',
title: 'Cleaning Crew',
length: '36',
};
nSdkInstance.trackEvent(obj);
});

this.on('contentresumed', function() {
console.log('CONTENT RESUMED EVENT **************************************************************');
obj.type = 'content';
obj.event = 'playhead';
obj.metadata.ad = {};
nSdkInstance.trackEvent(obj);
});

this.on('pause', function() {
console.log('PAUSE EVENT **************************************************************');
obj.event = 'pause';
obj.playheadPosition = Math.round(coolPlayer.currentTime());
nSdkInstance.trackEvent(obj);
});

this.on('adtimeupdate', function() {
var getcurrentTime = coolPlayer.currentTime();
var intPlayedTime = parseInt(getcurrentTime, 10);
if (intPlayedTime > 0 && intPlayedTime !== prevPos) {
// check for playhead change so it's only called once per second
console.log('AD PLAYHEAD EVENT **************************************************************');
console.log(Math.round(getcurrentTime));
prevPos = intPlayedTime;
obj.playheadPosition = Math.round(getcurrentTime);
nSdkInstance.trackEvent(obj);
};
});

this.on('adend', function() {
console.log('AD STOP EVENT **************************************************************');
obj.event = 'adstop';
nSdkInstance.trackEvent(obj);
});

this.on('ended', function() {
console.log('COMPLETE EVENT **************************************************************');
obj.event = 'complete';
nSdkInstance.trackEvent(obj);
});
});

</script>
</syntaxhighlight>