Skip to content

Commit

Permalink
Merge pull request #70 from bitmovin/feature/disable-omsdk-demo-on-ie…
Browse files Browse the repository at this point in the history 
…-and-edge18

Disable Open Measurement SDK ad verification demo on IE and Edge browsers
  • Loading branch information
@jmsn
jmsn authored Nov 19, 2021
2 parents a04c795 + 0d91ce8 commit a7fd1ba
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 75 deletions.
128 changes: 61 additions & 67 deletions player/ad-event-verification-omsdk/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<div id="error" class="alert alert-danger" role="alert">
</div>
</div>
<div class="demo-row">
<div id='player-row' class="demo-row">
<div class="demo-video tv-frame">
<div id="player-container">
</div>
Expand All @@ -30,14 +30,12 @@
Partner Name
</label>
<input class="form-control" id="partnername-input" name="manifest-input" placeholder="awesome-company" type="text">
</input>
</div>
<div>
<label for="partnerversion-input">
Partner Version
</label>
<input class="form-control" id="partnerversion-input" name="manifest-input" placeholder="1.3.25" type="text">
</input>
</div>
<div class="demo-input-box input mx-0">
<div class="demo-item-header">
Expand All @@ -46,21 +44,18 @@
</div>
</div>
<input class="form-control" id="validationscripturl-input" name="manifest-input" placeholder="Validation Script URL (using demo script if empty)" type="text">
<input class="form-control" id="vendorkey-input" name="manifest-input" placeholder="Vendor Key (optional)" type="text">
<input class="form-control" id="params-input" name="manifest-input" placeholder="Params (optional)" type="text">
</input>
</input>
</input>
<input class="form-control" id="vendorkey-input" name="manifest-input" placeholder="Vendor Key (optional)" type="text">
<input class="form-control" id="params-input" name="manifest-input" placeholder="Params (optional)" type="text">
</div>
<div class="demo-start m-0">
<button class="btn btn-outline-primary active demo-button" id="apply-settings-btn" type="apply-settings">
<button class="btn btn-outline-primary active demo-button" id="apply-settings-btn" type="button">
Apply Custom Settings
</button>
</div>
</div>
</div>
</div>
<div id="event-log" class="demo-row">
<div id="event-log-row" class="demo-row">
<div class="col-lg-12 demo-event-box">
<div>
Event Log
Expand All @@ -70,62 +65,61 @@
</div>
</div>
<hr class="mb-3">
<div class="demo-row">
<div class="w-100 my-2">
<h2>
Getting Started Guide
</h2>
</div>
<div class="w-100 my-4">
<p>
1. Acquire the OM SDK files from the
<a href="https://tools.iabtechlab.com/omsdk">
IAB Tech Lab Tools Portal
<div class="demo-row">
<div class="w-100 my-2">
<h2>
Getting Started Guide
</h2>
</div>
<div class="w-100 my-4">
<p>
1. Acquire the OM SDK files from the
<a href="https://tools.iabtechlab.com/omsdk">
IAB Tech Lab Tools Portal
</a>
</p>
<p class="mb-3">
2. Include the following scripts in your page
</p>
<ul class="ml-4">
<li>
OM SDK Scripts: Service Script and JS Session Client
</li>
<li>
Bitmovin Player Scripts including the Bitmovin Advertising module (BAM) and the Advertising OM SDK module
</li>
</ul>
</div>
<div class="setup-code w-100">
${code:page.html}
</div>
<div class="w-100 my-4">
<p class="mb-3">
3. Set up the player instance for ad verification using OM SDK
</p>
<ol class="ml-4" type="a">
<li>
Add player modules to player core
</li>
<li>
Create a player configuration including a
<a href="https://bitmovin.com/docs/player/api-reference/web/web-sdk-api-reference-v8#/player/web/8/docs/interfaces/advertising.verificationresource.html">
OM SDK Tracker configuration
</a>
</p>
<p class="mb-3">
2. Include the following scripts in your page
</p>
<ul class="ml-4">
<li>
OM SDK Scripts: Service Script and JS Session Client
</li>
<li>
Bitmovin Player Scripts including the Bitmovin Advertising module (BAM) and the Advertising OM SDK module
</li>
</ul>
</div>
<div class="setup-code w-100">
${code:page.html}
</div>
<div class="w-100 my-4">
<p class="mb-3">
3. Set up the player instance for ad verification using OM SDK
</p>
<ol class="ml-4" type="a">
<li>
Add player modules to player core
</li>
<li>
Create a player configuration including a
<a href="https://bitmovin.com/docs/player/api-reference/web/web-sdk-api-reference-v8#/player/web/8/docs/interfaces/advertising.verificationresource.html">
OM SDK Tracker configuration
</a>
</li>
<li>
Instantiate the player with above configuration, load a source & play
</li>
</ol>
<p class="my-4">
Note: The configured
<code>
validationScriptUrl
</code>
, among other things, defines which ad tracking events should subscribed to and the location of the verification server to report to.
</p>
</div>
<div class="setup-code w-100">
${code:page.js}
</div>
</li>
<li>
Instantiate the player with above configuration, load a source & play
</li>
</ol>
<p class="my-4">
Note: The configured
<code>
validationScriptUrl
</code>
, among other things, defines which ad tracking events should subscribed to and the location of the verification server to report to.
</p>
</div>
<div class="setup-code w-100">
${code:page.js}
</div>
</hr>
</div>
34 changes: 26 additions & 8 deletions player/ad-event-verification-omsdk/js/script.js
View file
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -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',
Expand Down Expand Up @@ -66,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();
}
});

Expand Down Expand Up @@ -144,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);
});

Expand All @@ -157,22 +158,39 @@ 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);
});
}

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 Edge Legacy web browsers.');
document.querySelector('#player-row').classList.add('d-none')
document.querySelector('#event-log-row').classList.add('d-none')
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')
]).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);
Expand Down

0 comments on commit a7fd1ba

Please sign in to comment.