From a44e8abdfe06a84d5e3299ef47a01e9ceb632111 Mon Sep 17 00:00:00 2001 From: Jameson Steiner Date: Thu, 11 Nov 2021 18:31:07 +0100 Subject: [PATCH 01/27] Add demo for ad verification using Open Measurement SDK --- player/ad-event-verification-omsdk/README.md | 8 + .../ad-event-verification-omsdk/css/style.css | 115 ++++++++++++ player/ad-event-verification-omsdk/icon.svg | 20 ++ player/ad-event-verification-omsdk/index.html | 129 +++++++++++++ player/ad-event-verification-omsdk/info.json | 20 ++ player/ad-event-verification-omsdk/info.yaml | 17 ++ .../ad-event-verification-omsdk/js/script.js | 173 ++++++++++++++++++ player/ad-event-verification-omsdk/page.html | 20 ++ player/ad-event-verification-omsdk/page.js | 38 ++++ 9 files changed, 540 insertions(+) create mode 100644 player/ad-event-verification-omsdk/README.md create mode 100644 player/ad-event-verification-omsdk/css/style.css create mode 100644 player/ad-event-verification-omsdk/icon.svg create mode 100644 player/ad-event-verification-omsdk/index.html create mode 100644 player/ad-event-verification-omsdk/info.json create mode 100644 player/ad-event-verification-omsdk/info.yaml create mode 100644 player/ad-event-verification-omsdk/js/script.js create mode 100644 player/ad-event-verification-omsdk/page.html create mode 100644 player/ad-event-verification-omsdk/page.js diff --git a/player/ad-event-verification-omsdk/README.md b/player/ad-event-verification-omsdk/README.md new file mode 100644 index 00000000..cbc8c6ee --- /dev/null +++ b/player/ad-event-verification-omsdk/README.md @@ -0,0 +1,8 @@ +# Ad Event Verification + +Enable ad event reporting +To be defined. + +### Tags + + - To be defined \ No newline at end of file diff --git a/player/ad-event-verification-omsdk/css/style.css b/player/ad-event-verification-omsdk/css/style.css new file mode 100644 index 00000000..d14f283a --- /dev/null +++ b/player/ad-event-verification-omsdk/css/style.css @@ -0,0 +1,115 @@ +@media (min-width: 1680px) { + .demo-row { + flex-direction: row; + } + .demo-video { + width: 62% !important; + margin-right: 3%; + } + .demo-input { + width: 35% !important; + } + .demo-start { + padding-top: 0px !important; + } +} + +.demo-event-box { + padding: 23px; + border: solid 1px #CBE0ED; + border-radius: 4px; +} + +.demo-event-box>div { + font-size: 20px; + font-weight: 500; + padding-bottom: 23px; +} + +#logContent { + height: 300px; + width: 100%; + font-size: 16px; + line-height: 19px; + overflow-y: scroll; + overflow-wrap: break-word; + margin-top: 0px; + padding-top: 0px; + padding-left: 0px; + background-color: #fff; + font-family: 'Courier New', Courier, monospace; + color: #000000; +} + +.log-message { + display: flex; + flex-direction: row; + margin-bottom: unset !important; + flex-wrap: wrap; +} + +.demo-input-box { + border: solid 1px #CBE0ED; + border-radius: 4px; + padding: 15px 20px 10px 20px; + margin: 7px; + width: 100%; +} + +.demo-input-box>div { + padding-bottom: 15px; +} + +.demo-button { + width: 100%; +} + +.demo-input-box>input { + margin-bottom: 10px; +} + +.demo-row { + display: flex; +} + +.demo-start { + margin: 7px; +} + +.demo-input { + display: flex; + flex-direction: column; + width: 100%; + align-items: flex-end; +} + +.demo-video { + width: 100%; +} + +.demo-button { + height: 40px; +} + +.demo-defaults { + display: flex; + flex-direction: row; +} + +.demo-defaults>.default-text { + padding-left: 15px; + font-size: 15px; +} + +.demo-detail ol li { + margin-bottom: 1rem; +} + +.demo-detail a { + font-size: 18px; +} + +.error { + color: red; + font-weight: bold; +} diff --git a/player/ad-event-verification-omsdk/icon.svg b/player/ad-event-verification-omsdk/icon.svg new file mode 100644 index 00000000..e74d536a --- /dev/null +++ b/player/ad-event-verification-omsdk/icon.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/player/ad-event-verification-omsdk/index.html b/player/ad-event-verification-omsdk/index.html new file mode 100644 index 00000000..11042cd8 --- /dev/null +++ b/player/ad-event-verification-omsdk/index.html @@ -0,0 +1,129 @@ + + + + + + +
+

+ This demo showcases how to enable ad event reporting using the Open Measurement SDK for viewability measurement and tracking. +

+
+
+
+
+
+
+
+
+
+
+ OM SDK Tracker Configuration +
+
+
+ + + +
+
+ + + +
+
+
+
+ Verification Resource +
+
+ + + + + + +
+
+
+
+ +
+
+
+
+
+
+
+ Event Log +
+
+
+
+
+
+
+
+

+ Getting Started Guide +

+
+
+

+ 1. Aquire the OM SDK files from the + + IAB Tech Lab Tools Portal + +

+

+ 2. Include the following scripts in your page +

+
    +
  • + OM SDK Scripts: Service Script and JS Session Client +
    • +
  • + Bitmovin Player Scripts including the Bitmovin Advertising module (BAM) and the Advertising OM SDK module +
    • +
+
+
+ ${code:page.html} +
+
+

+ 3. Set up the player instance for ad verification using OM SDK +

+
    +
  1. + Add player modules to player core +
    2. +
  2. + Create a player configuration including a + + OM SDK Tracker configuration + +
    3. +
  3. + Instantiate the player with above configuration, load a source & play +
    4. +
+

+ Note: The configured + + validationScriptUrl + + , among other things, defines which ad tracking events should subscribed to and the location of the verification server to report to. +

+
+
+ ${code:page.js} +
+
+ diff --git a/player/ad-event-verification-omsdk/info.json b/player/ad-event-verification-omsdk/info.json new file mode 100644 index 00000000..11fc295e --- /dev/null +++ b/player/ad-event-verification-omsdk/info.json @@ -0,0 +1,20 @@ +{ + "title": "Ad Verification with OM SDK", + "description": "Ad Verification using Open Measurement SDK", + "long_description": "To be defined.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "page.js", + "page.html" + ] + }, + "tags": [ + "To be defined" + ] +} diff --git a/player/ad-event-verification-omsdk/info.yaml b/player/ad-event-verification-omsdk/info.yaml new file mode 100644 index 00000000..affa925c --- /dev/null +++ b/player/ad-event-verification-omsdk/info.yaml @@ -0,0 +1,17 @@ +title: Ad Verification with OM SDK +description: Ad Verification using Open Measurement SDK +long_description: To be defined. + +executable: + executable: true + indexfile: index.html + +code: + show_code: true + language: js + files: + - page.js + - page.html + +tags: + - To be defined diff --git a/player/ad-event-verification-omsdk/js/script.js b/player/ad-event-verification-omsdk/js/script.js new file mode 100644 index 00000000..8d3f5a18 --- /dev/null +++ b/player/ad-event-verification-omsdk/js/script.js @@ -0,0 +1,173 @@ +var conf = { + key: '29ba4a30-8b5e-4336-a7dd-c94ff3b25f30', + playback: { + muted: true + }, + advertising: { + adBreaks: [{ + tag: { + url: `https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=${Date.now()}`, // TODO: + type: 'vast' + }, + position: 'pre', + }], + withCredentials: false, + trackers: { + omSdk: assembleOmSdkTrackerConfig(), + } + }, +}; +var source = { + dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd', + hls: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8', + progressive: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4', + poster: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg' +}; +var player; + +function getTimestamp() { + var now = new Date(); + var h = checkTime(now.getHours()); + var m = checkTime(now.getMinutes()); + var s = checkTime(now.getSeconds()); + var mm = checkTime(now.getMilliseconds()); + now = h + ":" + m + ":" + s + ":" + mm; + return '' + now + ''; +} + +function checkTime(i) { + return (i < 10) ? "0" + i : i; +} + +/** + * Used by the OM SDK validation script to log tracking events + */ +window.log = function(message, data) { + $('

').append(getTimestamp() + ' - ').append(message, ' ', renderjson(data)).prependTo('#logContent'); +} + +function clearEventLog() { + var log = document.querySelector('#logContent'); + + while (log.firstChild) { + log.removeChild(log.lastChild); + } +} + +function displayError(message) { + document.querySelector('#error').innerHTML = message; +} + +function clearError(message) { + document.querySelector('#error').innerHTML = ''; +} + +$('#validationscripturl-input').on('input', function(e) { + if (e.target.value) { + $('#event-log').hide(); + } else { + $('#event-log').show(); + } +}); + +$('#apply-settings-btn').on('click', function(e) { + var recreate = function() { + conf.advertising.trackers.omSdk = assembleOmSdkTrackerConfig(); + player = setupPlayer(conf, source); + }; + + if (player) { + player.destroy().then(function() { + recreate(); + clearEventLog(); + }); + } else { + recreate(); + clearEventLog(); + } + + clearError(); +}); + +function getPartnerName() { + const input = document.querySelector('#partnername-input'); + return input.value || input.placeholder; +} + +function getPartnerVersion() { + const input = document.querySelector('#partnerversion-input'); + return input.value || input.placeholder; +} + +function getValidationScriptUrl() { + var demoValidationScript = 'https://cdn.bitmovin.com/content/player-web/lib/omsdk/omid-validation-verification-script-v1-player-demo.js'; + return document.querySelector('#validationscripturl-input').value || demoValidationScript; +} + +function getVendorKey() { + return document.querySelector('#vendorkey-input').value; +} + +function getParams() { + return document.querySelector('#params-input').value; +} + +function assembleVerificationResourceConfig() { + var verificationResource = { + validationScriptUrl: getValidationScriptUrl(), + }; + var vendorKey = getVendorKey(); + if (vendorKey) { + verificationResource.vendorKey = vendorKey; + } + var params = getParams(); + if (params) { + verificationResource.params = params; + } + return verificationResource; +} + +function assembleOmSdkTrackerConfig() { + return { + partnerName: getPartnerName(), + partnerVersion: getPartnerVersion(), + verificationResources: [ + assembleVerificationResourceConfig() + ], + }; +} + +function setupPlayer(conf, source) { + var playerContainer = document.querySelector('#player-container'); + var player = new bitmovin.player.Player(playerContainer, conf); + + player.on('error', function(e) { + displayError(`Error: ${e.code}/${e.name}`); + }); + + player.load(source); + return player; +} + +function injectScript(src) { + return new Promise((resolve, reject) => { + const script = document.createElement('script'); + script.src = src; + script.addEventListener('load', resolve); + script.addEventListener('error', e => reject(e.error)); + document.head.appendChild(script); + }); +} + +$(document).ready(function() { + renderjson.set_icons('+ ', '- '); + + Promise.all([ + injectScript('https://cdn.bitmovin.com/player/web/8/modules/bitmovinplayer-advertising-bitmovin.js'), + injectScript('https://cdn.bitmovin.com/player/web/8/modules/bitmovinplayer-advertising-omsdk.js') + ]).then(() => { + bitmovin.player.Player.addModule(bitmovin.player['advertising-bitmovin'].default); + bitmovin.player.Player.addModule(bitmovin.player['advertising-omsdk'].default); + player = setupPlayer(conf, source); + }); +}); diff --git a/player/ad-event-verification-omsdk/page.html b/player/ad-event-verification-omsdk/page.html new file mode 100644 index 00000000..f7a465b4 --- /dev/null +++ b/player/ad-event-verification-omsdk/page.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/player/ad-event-verification-omsdk/page.js b/player/ad-event-verification-omsdk/page.js new file mode 100644 index 00000000..e40ac8f6 --- /dev/null +++ b/player/ad-event-verification-omsdk/page.js @@ -0,0 +1,38 @@ +// Add modules for ordinary playback, e.g. here specifically for DASH streams (step a) +bitmovin.player.core.Player.addModule(bitmovin.player['engine-bitmovin'].default); +bitmovin.player.core.Player.addModule(bitmovin.player['mserenderer'].default); +bitmovin.player.core.Player.addModule(bitmovin.player['xml'].default); +bitmovin.player.core.Player.addModule(bitmovin.player['dash'].default); +bitmovin.player.core.Player.addModule(bitmovin.player['abr'].default); +bitmovin.player.core.Player.addModule(bitmovin.player['container-mp4'].default); +bitmovin.player.core.Player.addModule(bitmovin.player['polyfill'].default); + +// Add Bitmovin Advertising and OM SDK player modules +bitmovin.player.core.Player.addModule(bitmovin.player['advertising-core'].default); +bitmovin.player.core.Player.addModule(bitmovin.player['advertising-bitmovin'].default); +bitmovin.player.core.Player.addModule(bitmovin.player['advertising-omsdk'].default); + +// Create player config & include a OM SDK tracker config (step b) +var conf = { + key: '', + advertising: { + adBreaks: [ /* ... */ ], + trackers: { + omSdk: { + partnerName: 'awesome-company', + partnerVersion: '1.3.25', + verificationResources: [{ + validationScriptUrl: 'https://somewhere.com/validation-script.js', + }] + }, + } + }, +}; + +// Create player instance & load source (step c) +var playerContainer = document.getElementById('player-container'); +var player = new bitmovin.player.core.Player(playerContainer, conf); + +player.load({ + dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd', +}); From 986a88993b483ec572b3c7fe2a128fe9a4bc7d2a Mon Sep 17 00:00:00 2001 From: Jameson Steiner Date: Thu, 11 Nov 2021 19:09:53 +0100 Subject: [PATCH 02/27] Fix hiding logs if custom validation script is used --- player/ad-event-verification-omsdk/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/player/ad-event-verification-omsdk/index.html b/player/ad-event-verification-omsdk/index.html index 11042cd8..d115011f 100644 --- a/player/ad-event-verification-omsdk/index.html +++ b/player/ad-event-verification-omsdk/index.html @@ -58,8 +58,8 @@ -
-
+
+
Event Log
From bec9d06da25565259d082212bc532c123f932f7a Mon Sep 17 00:00:00 2001 From: Jameson Steiner Date: Fri, 12 Nov 2021 14:40:59 +0100 Subject: [PATCH 03/27] Refine content of README.md --- player/ad-event-verification-omsdk/README.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/player/ad-event-verification-omsdk/README.md b/player/ad-event-verification-omsdk/README.md index cbc8c6ee..f7acfe40 100644 --- a/player/ad-event-verification-omsdk/README.md +++ b/player/ad-event-verification-omsdk/README.md @@ -1,8 +1,11 @@ -# Ad Event Verification +# Ad Event Verification using Open Measurement SDK -Enable ad event reporting -To be defined. +Ad viewability and verification measurement using the IAB Tech Lab's [Open Measurement SDK](https://iabtechlab.com/standards/open-measurement-sdk/). ### Tags - - - To be defined \ No newline at end of file + + - advertisement + - tracking + - verification + - om sdk + - open measurement \ No newline at end of file From 5c0645ca1feb0309612d9ac096e19a850ef20048 Mon Sep 17 00:00:00 2001 From: Jameson Steiner Date: Fri, 12 Nov 2021 14:41:39 +0100 Subject: [PATCH 04/27] Add long_description to info.json and info.yaml --- player/ad-event-verification-omsdk/info.json | 2 +- player/ad-event-verification-omsdk/info.yaml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/player/ad-event-verification-omsdk/info.json b/player/ad-event-verification-omsdk/info.json index 11fc295e..765c0c35 100644 --- a/player/ad-event-verification-omsdk/info.json +++ b/player/ad-event-verification-omsdk/info.json @@ -1,7 +1,7 @@ { "title": "Ad Verification with OM SDK", "description": "Ad Verification using Open Measurement SDK", - "long_description": "To be defined.", + "long_description": "Ad viewability and verification measurement using the IAB Tech Lab's Open Measurement SDK.", "executable": { "executable": true, "indexfile": "index.html" diff --git a/player/ad-event-verification-omsdk/info.yaml b/player/ad-event-verification-omsdk/info.yaml index affa925c..5e2a801d 100644 --- a/player/ad-event-verification-omsdk/info.yaml +++ b/player/ad-event-verification-omsdk/info.yaml @@ -1,6 +1,6 @@ title: Ad Verification with OM SDK description: Ad Verification using Open Measurement SDK -long_description: To be defined. +long_description: Ad viewability and verification measurement using the IAB Tech Lab's Open Measurement SDK. executable: executable: true From 4d1065156176bb3f84aabcf516ea94262a5d3fd9 Mon Sep 17 00:00:00 2001 From: Jameson Steiner Date: Fri, 12 Nov 2021 14:43:11 +0100 Subject: [PATCH 05/27] Add tags to info.json and info.yaml --- player/ad-event-verification-omsdk/info.json | 6 +++++- player/ad-event-verification-omsdk/info.yaml | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/player/ad-event-verification-omsdk/info.json b/player/ad-event-verification-omsdk/info.json index 765c0c35..5552773a 100644 --- a/player/ad-event-verification-omsdk/info.json +++ b/player/ad-event-verification-omsdk/info.json @@ -15,6 +15,10 @@ ] }, "tags": [ - "To be defined" + "advertisement", + "tracking", + "verification", + "om sdk", + "open measurement" ] } diff --git a/player/ad-event-verification-omsdk/info.yaml b/player/ad-event-verification-omsdk/info.yaml index 5e2a801d..21ef8351 100644 --- a/player/ad-event-verification-omsdk/info.yaml +++ b/player/ad-event-verification-omsdk/info.yaml @@ -14,4 +14,8 @@ code: - page.html tags: - - To be defined + - advertisement + - tracking + - verification + - om sdk + - open measurement \ No newline at end of file From 9ebe61dfbac5a8e8ffadaa6ca757664f6f42d60a Mon Sep 17 00:00:00 2001 From: Jameson Steiner Date: Fri, 12 Nov 2021 18:44:30 +0100 Subject: [PATCH 06/27] Improve error displaying --- player/ad-event-verification-omsdk/index.html | 6 ++++-- player/ad-event-verification-omsdk/js/script.js | 2 ++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/player/ad-event-verification-omsdk/index.html b/player/ad-event-verification-omsdk/index.html index d115011f..29148120 100644 --- a/player/ad-event-verification-omsdk/index.html +++ b/player/ad-event-verification-omsdk/index.html @@ -9,6 +9,10 @@ This demo showcases how to enable ad event reporting using the Open Measurement SDK for viewability measurement and tracking.

+
+ +
@@ -48,8 +52,6 @@
-
-

- 1. Aquire the OM SDK files from the + 1. Acquire the OM SDK files from the IAB Tech Lab Tools Portal From 59c146014bb22f3c436d3ae04a1e71396be031b9 Mon Sep 17 00:00:00 2001 From: Jameson Steiner Date: Mon, 15 Nov 2021 15:09:15 +0100 Subject: [PATCH 15/27] Remove info.yaml As it's now obsolete as per https://github.com/bitmovin/demos/pull/67 --- player/ad-event-verification-omsdk/info.yaml | 21 -------------------- 1 file changed, 21 deletions(-) delete mode 100644 player/ad-event-verification-omsdk/info.yaml diff --git a/player/ad-event-verification-omsdk/info.yaml b/player/ad-event-verification-omsdk/info.yaml deleted file mode 100644 index 21ef8351..00000000 --- a/player/ad-event-verification-omsdk/info.yaml +++ /dev/null @@ -1,21 +0,0 @@ -title: Ad Verification with OM SDK -description: Ad Verification using Open Measurement SDK -long_description: Ad viewability and verification measurement using the IAB Tech Lab's Open Measurement SDK. - -executable: - executable: true - indexfile: index.html - -code: - show_code: true - language: js - files: - - page.js - - page.html - -tags: - - advertisement - - tracking - - verification - - om sdk - - open measurement \ No newline at end of file From 4127b33b54cbf8620f25b53afc14b8b64d62cdd2 Mon Sep 17 00:00:00 2001 From: Jameson Steiner Date: Mon, 15 Nov 2021 15:47:47 +0100 Subject: [PATCH 16/27] Update info.json in prep for auto-generating README.md --- player/ad-event-verification-omsdk/info.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/player/ad-event-verification-omsdk/info.json b/player/ad-event-verification-omsdk/info.json index 5552773a..918ff806 100644 --- a/player/ad-event-verification-omsdk/info.json +++ b/player/ad-event-verification-omsdk/info.json @@ -1,7 +1,7 @@ { - "title": "Ad Verification with OM SDK", - "description": "Ad Verification using Open Measurement SDK", - "long_description": "Ad viewability and verification measurement using the IAB Tech Lab's Open Measurement SDK.", + "title": "Ad Verification with Open Measurement SDK", + "description": "Ad viewability and verification measurement using the Open Measurement SDK.", + "long_description": "The IAB Tech Lab's OM SDK facilitates third-party access to ad measurement data for ads played out by the Bitmovin player.", "executable": { "executable": true, "indexfile": "index.html" From bac5bc200d065d825ded3c00a185c7e3efc38004 Mon Sep 17 00:00:00 2001 From: Jameson Steiner Date: Mon, 15 Nov 2021 15:49:00 +0100 Subject: [PATCH 17/27] Update to auto-generated README.md --- player/ad-event-verification-omsdk/README.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/player/ad-event-verification-omsdk/README.md b/player/ad-event-verification-omsdk/README.md index f7acfe40..57ff8795 100644 --- a/player/ad-event-verification-omsdk/README.md +++ b/player/ad-event-verification-omsdk/README.md @@ -1,11 +1,12 @@ -# Ad Event Verification using Open Measurement SDK +# Ad Verification with Open Measurement SDK -Ad viewability and verification measurement using the IAB Tech Lab's [Open Measurement SDK](https://iabtechlab.com/standards/open-measurement-sdk/). +Ad viewability and verification measurement using the Open Measurement SDK. +The IAB Tech Lab's OM SDK facilitates third-party access to ad measurement data for ads played out by the Bitmovin player. ### Tags - - - advertisement - - tracking - - verification - - om sdk + + - advertisement + - tracking + - verification + - om sdk - open measurement \ No newline at end of file From 4c8a54252ac7b2871937f74e77d3b79ffea7fb67 Mon Sep 17 00:00:00 2001 From: Jameson Steiner Date: Mon, 15 Nov 2021 16:12:09 +0100 Subject: [PATCH 18/27] Remove period --- player/ad-event-verification-omsdk/info.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/player/ad-event-verification-omsdk/info.json b/player/ad-event-verification-omsdk/info.json index 918ff806..ffd9d21d 100644 --- a/player/ad-event-verification-omsdk/info.json +++ b/player/ad-event-verification-omsdk/info.json @@ -1,6 +1,6 @@ { "title": "Ad Verification with Open Measurement SDK", - "description": "Ad viewability and verification measurement using the Open Measurement SDK.", + "description": "Ad viewability and verification measurement using the Open Measurement SDK", "long_description": "The IAB Tech Lab's OM SDK facilitates third-party access to ad measurement data for ads played out by the Bitmovin player.", "executable": { "executable": true, From f71d52208dfde9d3c93bb7c1902582414189503e Mon Sep 17 00:00:00 2001 From: Jameson Steiner Date: Wed, 17 Nov 2021 18:53:40 +0100 Subject: [PATCH 19/27] Change template string to string concatenation --- player/ad-event-verification-omsdk/js/script.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/player/ad-event-verification-omsdk/js/script.js b/player/ad-event-verification-omsdk/js/script.js index ac4eedbd..3582d588 100644 --- a/player/ad-event-verification-omsdk/js/script.js +++ b/player/ad-event-verification-omsdk/js/script.js @@ -1,3 +1,4 @@ +var adTag = 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=' + Date.now(); var conf = { key: '29ba4a30-8b5e-4336-a7dd-c94ff3b25f30', playback: { @@ -6,7 +7,7 @@ var conf = { advertising: { adBreaks: [{ tag: { - url: `https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=${Date.now()}`, // TODO: + url: adTag, type: 'vast' }, position: 'pre', From 40baf225333d5d42d55d18c3d97d26e5dfb9791f Mon Sep 17 00:00:00 2001 From: Jameson Steiner Date: Wed, 17 Nov 2021 18:55:11 +0100 Subject: [PATCH 20/27] Show message and abort demo on IE and Edge 18 --- player/ad-event-verification-omsdk/js/script.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/player/ad-event-verification-omsdk/js/script.js b/player/ad-event-verification-omsdk/js/script.js index 3582d588..0bcec1d4 100644 --- a/player/ad-event-verification-omsdk/js/script.js +++ b/player/ad-event-verification-omsdk/js/script.js @@ -167,9 +167,22 @@ function injectScript(src) { }); } +function isIe() { + return /MSIE|Trident/.test(navigator.userAgent); +} + +function isEdgeLegacy() { + return /Edge\/18/.test(navigator.userAgent); +} + $(document).ready(function() { renderjson.set_icons('+ ', '- '); + if (isIe() || isEdgeLegacy()) { + displayError('Sorry! This demo is not supported on Internet Explorer and Microsoft Edge 18'); + return; + } + Promise.all([ injectScript('https://cdn.bitmovin.com/player/web/8/modules/bitmovinplayer-advertising-bitmovin.js'), injectScript('https://cdn.bitmovin.com/player/web/8/modules/bitmovinplayer-advertising-omsdk.js') From caa89e031c254e8b31ee58a244243d116f68a041 Mon Sep 17 00:00:00 2001 From: Jameson Steiner Date: Wed, 17 Nov 2021 19:31:59 +0100 Subject: [PATCH 21/27] Add hiding player and event log --- player/ad-event-verification-omsdk/index.html | 4 ++-- player/ad-event-verification-omsdk/js/script.js | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/player/ad-event-verification-omsdk/index.html b/player/ad-event-verification-omsdk/index.html index 1b9075f1..23b80269 100644 --- a/player/ad-event-verification-omsdk/index.html +++ b/player/ad-event-verification-omsdk/index.html @@ -13,7 +13,7 @@

-
+
@@ -60,7 +60,7 @@
-
+
Event Log diff --git a/player/ad-event-verification-omsdk/js/script.js b/player/ad-event-verification-omsdk/js/script.js index 0bcec1d4..6fefebe8 100644 --- a/player/ad-event-verification-omsdk/js/script.js +++ b/player/ad-event-verification-omsdk/js/script.js @@ -67,9 +67,9 @@ function clearError(message) { $('#validationscripturl-input').on('input', function(e) { if (e.target.value) { - $('#event-log').hide(); + $('#event-log-row').hide(); } else { - $('#event-log').show(); + $('#event-log-row').show(); } }); @@ -180,6 +180,8 @@ $(document).ready(function() { if (isIe() || isEdgeLegacy()) { displayError('Sorry! This demo is not supported on Internet Explorer and Microsoft Edge 18'); + document.querySelector('#player-row').classList.add('d-none') + document.querySelector('#event-log-row').classList.add('d-none') return; } From 1a59c46798ec8dcb76541acf4664061d6246480e Mon Sep 17 00:00:00 2001 From: Jameson Steiner Date: Wed, 17 Nov 2021 19:36:03 +0100 Subject: [PATCH 22/27] Fix `hr` tag --- player/ad-event-verification-omsdk/index.html | 113 +++++++++--------- 1 file changed, 56 insertions(+), 57 deletions(-) diff --git a/player/ad-event-verification-omsdk/index.html b/player/ad-event-verification-omsdk/index.html index 23b80269..c2b2e238 100644 --- a/player/ad-event-verification-omsdk/index.html +++ b/player/ad-event-verification-omsdk/index.html @@ -70,62 +70,61 @@
-
-
-

- Getting Started Guide -

-
-
-

- 1. Acquire the OM SDK files from the - - IAB Tech Lab Tools Portal +

+
+

+ Getting Started Guide +

+
+
+

+ 1. Acquire the OM SDK files from the + + IAB Tech Lab Tools Portal + +

+

+ 2. Include the following scripts in your page +

+
    +
  • + OM SDK Scripts: Service Script and JS Session Client +
    • +
  • + Bitmovin Player Scripts including the Bitmovin Advertising module (BAM) and the Advertising OM SDK module +
    • +
+
+
+ ${code:page.html} +
+
+

+ 3. Set up the player instance for ad verification using OM SDK +

+
    +
  1. + Add player modules to player core +
    2. +
  2. + Create a player configuration including a + + OM SDK Tracker configuration -

    -

    - 2. Include the following scripts in your page -

    -
      -
    • - OM SDK Scripts: Service Script and JS Session Client -
      • -
    • - Bitmovin Player Scripts including the Bitmovin Advertising module (BAM) and the Advertising OM SDK module -
      • -
    -
-
- ${code:page.html} -
-
-

- 3. Set up the player instance for ad verification using OM SDK -

-
    -
  1. - Add player modules to player core -
    2. -
  2. - Create a player configuration including a - - OM SDK Tracker configuration - -
    3. -
  3. - Instantiate the player with above configuration, load a source & play -
    4. -
-

- Note: The configured - - validationScriptUrl - - , among other things, defines which ad tracking events should subscribed to and the location of the verification server to report to. -

-
-
- ${code:page.js} -
+ +
  • + Instantiate the player with above configuration, load a source & play +
    • + +

    + Note: The configured + + validationScriptUrl + + , among other things, defines which ad tracking events should subscribed to and the location of the verification server to report to. +

    - +
    + ${code:page.js} +
    +
    From dcc2b5a9d7a16fe2e41e95395d2dd6b1f64ae810 Mon Sep 17 00:00:00 2001 From: Jameson Steiner Date: Thu, 18 Nov 2021 14:37:05 +0100 Subject: [PATCH 23/27] Improve message --- player/ad-event-verification-omsdk/js/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/player/ad-event-verification-omsdk/js/script.js b/player/ad-event-verification-omsdk/js/script.js index 6fefebe8..d15b618a 100644 --- a/player/ad-event-verification-omsdk/js/script.js +++ b/player/ad-event-verification-omsdk/js/script.js @@ -179,7 +179,7 @@ $(document).ready(function() { renderjson.set_icons('+ ', '- '); if (isIe() || isEdgeLegacy()) { - displayError('Sorry! This demo is not supported on Internet Explorer and Microsoft Edge 18'); + displayError('Sorry! This demo is not supported on Internet Explorer and Edge Legacy web browsers.'); document.querySelector('#player-row').classList.add('d-none') document.querySelector('#event-log-row').classList.add('d-none') return; From 6886b7963f1eea7e95067072b2366ca78f1c487b Mon Sep 17 00:00:00 2001 From: Jameson Steiner Date: Thu, 18 Nov 2021 16:52:58 +0100 Subject: [PATCH 24/27] Fix `input` tags --- player/ad-event-verification-omsdk/index.html | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/player/ad-event-verification-omsdk/index.html b/player/ad-event-verification-omsdk/index.html index c2b2e238..cf89bc1b 100644 --- a/player/ad-event-verification-omsdk/index.html +++ b/player/ad-event-verification-omsdk/index.html @@ -30,14 +30,12 @@ Partner Name -
    -
    @@ -46,11 +44,8 @@
    - - - - - + +
    -
    From 0a2d5405692d472b9b686c96d75a6acadfb155c7 Mon Sep 17 00:00:00 2001 From: Jameson Steiner Date: Thu, 18 Nov 2021 16:54:07 +0100 Subject: [PATCH 26/27] Remove template strings with string concatenation --- player/ad-event-verification-omsdk/js/script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/player/ad-event-verification-omsdk/js/script.js b/player/ad-event-verification-omsdk/js/script.js index d15b618a..300b4d57 100644 --- a/player/ad-event-verification-omsdk/js/script.js +++ b/player/ad-event-verification-omsdk/js/script.js @@ -145,11 +145,11 @@ function setupPlayer(conf, source) { var player = new bitmovin.player.Player(playerContainer, conf); player.on('error', function(e) { - displayError(`Error: ${e.code}/${e.name}`); + displayError('Error: ' + e.code + '/' + e.name); }); player.on('aderror', function(e) { - displayError(`Ad Error: ${e.message} (potentially caused by ad blocker)`); + displayError('Ad Error: ' + e.message + ' (potentially caused by ad blocker)'); console.warn(e); }); From 0d91ce87a08024862da5ace8d957d8e3f084c5f9 Mon Sep 17 00:00:00 2001 From: Jameson Steiner Date: Thu, 18 Nov 2021 16:54:38 +0100 Subject: [PATCH 27/27] Change to not use arrow functions --- player/ad-event-verification-omsdk/js/script.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/player/ad-event-verification-omsdk/js/script.js b/player/ad-event-verification-omsdk/js/script.js index 300b4d57..cc75ea3b 100644 --- a/player/ad-event-verification-omsdk/js/script.js +++ b/player/ad-event-verification-omsdk/js/script.js @@ -158,11 +158,13 @@ function setupPlayer(conf, source) { } function injectScript(src) { - return new Promise((resolve, reject) => { + return new Promise(function(resolve, reject) { const script = document.createElement('script'); script.src = src; script.addEventListener('load', resolve); - script.addEventListener('error', e => reject(e.error)); + script.addEventListener('error', function(e) { + reject(e.error) + }); document.head.appendChild(script); }); } @@ -188,7 +190,7 @@ $(document).ready(function() { Promise.all([ injectScript('https://cdn.bitmovin.com/player/web/8/modules/bitmovinplayer-advertising-bitmovin.js'), injectScript('https://cdn.bitmovin.com/player/web/8/modules/bitmovinplayer-advertising-omsdk.js') - ]).then(() => { + ]).then(function() { bitmovin.player.Player.addModule(bitmovin.player['advertising-bitmovin'].default); bitmovin.player.Player.addModule(bitmovin.player['advertising-omsdk'].default); player = setupPlayer(conf, source);