prebid.js 7.48.0 → 7.50.0

package/integrationExamples/videoModule/eventsUI/eventsUI.js

@@ -0,0 +1,181 @@
+"use strict";
+
+let sequenceCount = 0;
+const eventLogGroups = {};
+const Uint8Array = window.Uint8Array;
+const TimeRanges = window.TimeRanges;
+
+function stringify(value, replacer, space) {
+  try {
+    return truncate(JSON.stringify(value, replacer || stringifyReplacer(value), space), 100000);
+  } catch (error) {
+    return `[${error}]`;
+  }
+}
+
+function truncate(str, length) {
+  return (str && str.length) > length ? (str.substr(0, length) +
+    '\n... Event truncated due to length (see console for complete output)') : str;
+}
+
+function stringifyReplacer(parentValue) {
+  const references = [];
+  const safeResults = [];
+  let complexity = 0;
+  return function stringifyKeyValue(key, value) {
+    if (typeof value === 'object') {
+      if (value === null || value instanceof Date || value instanceof RegExp) {
+        return value;
+      }
+      if (!!Uint8Array && value instanceof Uint8Array) {
+        // Stub values of Arrays with more than 1000 items
+        let str = ('' + value);
+        str = (str.length > 40 ? (str.substr(0, 40) + '...(see console)') : str);
+        return `Uint8Array(${value.length}) [${str}]`;
+      }
+      if (!!TimeRanges && value instanceof TimeRanges) {
+        const ranges = [];
+        for (let i = 0; i < value.length; i++) {
+          ranges[i] = `start(${i}) = ${value.start(i)} end(${i}) = ${value.end(i)}`;
+        }
+        return `TimeRanges(${value.length}) [${ranges}]`;
+      }
+      if (value === parentValue && complexity > 0) {
+        return '<parent object>';
+      }
+      const referenceIndex = references.indexOf(value);
+      if (referenceIndex !== -1) {
+        // Duplicate reference found
+        const safe = safeResults[referenceIndex];
+        if (safe) {
+          return safe;
+        }
+        try {
+          // Test for circular references
+          JSON.stringify(value);
+        } catch (error) {
+          return (safeResults[referenceIndex] = '<' + value + '...(see console)>');
+        }
+        safeResults[referenceIndex] = value;
+      }
+      if (complexity++ > 10000) {
+        return '<complexity exceeded>';
+      }
+      references.push(value);
+      return value;
+    }
+    if (typeof value === 'function') {
+      return `${value}`;
+    }
+    return value;
+  };
+}
+
+function createEventSequenceElement(eventGroup) {
+  const element = document.createElement('div');
+  element.classList.add('sequence', `mode-${eventGroup}`);
+  element.setAttribute('data-sequence', `${sequenceCount++}`);
+  return element;
+}
+
+function appendSequenceElement(container, element) {
+  container.appendChild(element);
+}
+
+function textContentGrouped(inEvent, group) {
+  if (group) {
+    return `${inEvent} (${group[inEvent]})`;
+  }
+  return inEvent;
+}
+
+function appendEvent(container, currentEventType, currentEventGroup, data) {
+  const div = document.createElement('div');
+  div.classList.add('group-' + currentEventGroup, 'event-' + currentEventType, 'pre');
+  div.textContent = textContentGrouped(currentEventType);
+  div.setAttribute('title', `${currentEventGroup} event "${currentEventType}"`);
+  div.setAttribute('tabindex', '0');
+  const theData = Object.assign({}, data);
+  div.onclick = div.onkeyup = function(e) {
+    if (e && e.keyCode && e.keyCode !== 13) {
+      return;
+    }
+
+    console.log(theData);
+    div.textContent = ((div.expanded = !div.expanded)) ?
+      textContentExpanded(currentEventType, [theData]) : textContentGrouped(currentEventType);
+    if (e) {
+      e.preventDefault();
+    }
+    return [theData];
+  };
+  container.appendChild(div);
+  return div;
+}
+
+function textContentExpanded(inEvent, allData) {
+  return `${inEvent} (${allData.map((item, i) =>
+    (allData.length > 1 ? `[${i}] = ` : '') + stringify(item, null, 4)).join('\n')})`;
+}
+
+function incrementEvent(group, currentEventType, currentEventGroup, div, datum) {
+  group[currentEventType]++;
+  div.textContent = textContentGrouped(currentEventType, group);
+  const logPreviousEvents = div.onclick;
+  const scopedDatum = Object.assign({}, datum);
+  div.onclick = div.onkeyup = function(e) {
+    if (e && e.keyCode && e.keyCode !== 13) {
+      return;
+    }
+
+    const allData = logPreviousEvents();
+    allData.push(scopedDatum);
+    console.log(scopedDatum);
+    div.textContent = (div.expanded) ? textContentExpanded(currentEventType, allData) : textContentGrouped(currentEventType, group);
+    if (e) {
+      e.preventDefault();
+    }
+    return allData;
+  };
+}
+
+function getGenericEventHandler() {
+  const logContainer = document.querySelector('#eventsLog');
+  let currentEventGroup = '';
+  let currentEventType = '';
+  let lastEvent = '';
+  let lastGroup;
+  const genericEventHandler = function(e, type, eventGroup) {
+    currentEventGroup = eventGroup;
+    currentEventType = type;
+
+    let group = eventLogGroups[eventGroup];
+    if (!group || group !== lastGroup) {
+      const beforeReadyElement = createEventSequenceElement(currentEventGroup);
+      appendSequenceElement(logContainer, beforeReadyElement);
+      group = eventLogGroups[currentEventGroup] = {
+        eventGroup: currentEventGroup,
+        event: currentEventType,
+        container: logContainer,
+        eventElement: beforeReadyElement
+      };
+      lastGroup = lastGroup || group;
+    }
+    if (lastEvent === currentEventType && !(/^(?:meta|hlsBufferAppend)/).test(currentEventType)) {
+      incrementEvent(group, currentEventType, currentEventGroup, group.pre, e);
+    } else {
+      const eventElement = createEventSequenceElement(currentEventGroup);
+      group[currentEventType] = 1;
+      group.eventElement = eventElement;
+      group.lastEventGroup = currentEventGroup;
+      group.pre = appendEvent(eventElement, currentEventType, currentEventGroup, e);
+      appendSequenceElement(group.container, eventElement);
+    }
+    lastEvent = currentEventType;
+    lastGroup = group;
+  };
+
+  return genericEventHandler;
+}
+
+window.getGenericEventHandler = getGenericEventHandler;

package/integrationExamples/videoModule/jwplayer/eventsUI.html

@@ -0,0 +1,295 @@
+<html>
+
+<head>
+    <script src="https://cdn.jwplayer.com/libraries/l5MchIxB.js"></script>
+    <script async src="../../../build/dev/prebid.js"></script>
+    <script src="../eventsUI/eventsUI.js"></script>
+    <link href="../eventsUI/eventsUI.css" rel="stylesheet" type="text/css">
+
+    <title>JW Player Event UI</title>
+
+    <!--This demo listens to the Video events that are fired when an ad impression or ad error came from a bid. -->
+
+    <script>
+      // Setup ad units
+      var adUnits = [{
+        code: 'testUnit',
+        mediaTypes: {
+          video: {}
+        },
+        video: {
+          divId: 'player', // required to indicate which player is being used to render this ad unit.
+        },
+
+        bids: [{
+          bidder: 'ix',
+          params: {
+            siteId: '300',
+          }
+        }]
+      }];
+
+      var pbjs = pbjs || {};
+      pbjs.que = pbjs.que || [];
+
+      pbjs.que.push(function () {
+        pbjs.setConfig({
+          video: {
+            providers: [{
+              divId: 'player',
+              vendorCode: 1, // jwplayer vendorCode
+              playerConfig: {
+                licenseKey: '577+5vXsluqV2Uy0drAS8wrgiqJlYijZxz3DmoYDm8FTJjdoIe8zYA==',
+                params: {
+                  vendorConfig: {
+                    playlist: [{
+                      file: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/SubaruOutbackOnStreetAndDirt.mp4',
+                      title: "Subaru Outback on Street and Dirt",
+                    }],
+                    advertising: { client: 'vast' }
+                  }
+                }
+              },
+            },]
+          },
+          debugging: {
+            enabled: true,
+            intercept: [
+              {
+                when: {
+                  adUnitCode: 'testUnit',
+                },
+                then: {
+                  cpm: 25,
+                  mediaType: "video",
+                  ad: "<VAST version=\"3.0\"> <Ad id=\"123\"> <InLine> <AdSystem>PubMatic</AdSystem> <AdTitle>VAST 2.0 Instream Test</AdTitle> <Description>VAST 2.0 Instream Test</Description> <Error> <![CDATA[https://aktrack.pubmatic.com/er=[ERRORCODE]]]> </Error> <Impression> <![CDATA[https://aktrack.pubmatic.com?e=impression]]> </Impression> <Creatives> <Creative AdID=\"123\"> <Linear> <Duration>00:00:30</Duration> <TrackingEvents> <Tracking event=\"creativeView\"> <![CDATA[https://aktrack.pubmatic.com?e=creativeView]]> </Tracking> <Tracking event=\"start\"> <![CDATA[https://aktrack.pubmatic.com?e=start]]> </Tracking> <Tracking event=\"midpoint\"> <![CDATA[https://aktrack.pubmatic.com?e=midpoint]]> </Tracking> <Tracking event=\"firstQuartile\"> <![CDATA[https://aktrack.pubmatic.com?e=firstQuartile]]> </Tracking> <Tracking event=\"thirdQuartile\"> <![CDATA[https://aktrack.pubmatic.com?e=thirdQuartile]]> </Tracking> <Tracking event=\"complete\"> <![CDATA[https://aktrack.pubmatic.com?e=complete]]> </Tracking> </TrackingEvents> <VideoClicks> <ClickThrough> <![CDATA[https://www.pubmatic.com]]> </ClickThrough> </VideoClicks> <MediaFiles> <MediaFile delivery=\"progressive\" type=\"video/mp4\" bitrate=\"500\" width=\"480\" height=\"460\" scalable=\"true\" maintainAspectRatio=\"true\"> <![CDATA[https://staging.pubmatic.com:8443/test/spinning-logo-480x360_video.mp4]]> </MediaFile> <MediaFile delivery=\"progressive\" type=\"video/ogg\" bitrate=\"500\" width=\"480\" height=\"460\" scalable=\"true\" maintainAspectRatio=\"true\"> <![CDATA[https://staging.pubmatic.com:8443/test/spinning-logo-480x360_video.ogg]]> </MediaFile> <MediaFile delivery=\"progressive\" type=\"video/x-flv\" bitrate=\"500\" width=\"400\" height=\"300\" scalable=\"true\" maintainAspectRatio=\"true\"> <![CDATA[https://staging.pubmatic.com:8443/test/PubMatic_test_video.flv]]> </MediaFile> </MediaFiles> </Linear> </Creative> <Creative AdID=\"123\"> <NonLinearAds> <TrackingEvents></TrackingEvents> <NonLinear height=\"50\" width=\"300\" minSuggestedDuration=\"00:00:05\"> <StaticResource creativeType=\"image/jpeg\"> <![CDATA[https://staging.pubmatic.com:8443/test/PubMatic_LetsBeClear_300x50.jpeg]]> </StaticResource> <NonLinearClickThrough> <![CDATA[https://www.pubmatic.com]]> </NonLinearClickThrough> </NonLinear> </NonLinearAds> </Creative> <Creative AdID=\"123\"> <CompanionAds> <Companion width=\"300\" height=\"250\"> <StaticResource creativeType=\"image/jpeg\"> <![CDATA[https://staging.pubmatic.com:8443/test/PubMatic_LetsBeClear_320x250.jpg]]> </StaticResource> <CompanionClickThrough> <![CDATA[https://www.pubmatic.com]]> </CompanionClickThrough> </Companion> </CompanionAds> </Creative> </Creatives> </InLine> </Ad> </VAST>",
+                  vastUrl: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=",
+                }
+              },
+            ]
+          }
+        });
+
+        pbjs.addAdUnits(adUnits);
+        const eventHandler = window.getGenericEventHandler();
+
+        pbjs.onEvent('videoSetupComplete', (e) => {
+          console.log('player setup complete: ', e);
+          eventHandler(e, e.type, "player", );
+        });
+
+        pbjs.onEvent('videoSetupFailed', e => {
+          console.log('player setup failed: ', e);
+          eventHandler(e, e.type, "player", );
+        });
+
+        pbjs.onEvent('videoDestroyed', e => {
+          console.log('player destroyed: ', e);
+          eventHandler(e, e.type, "player", );
+        });
+
+        pbjs.onEvent('videoPlaylist', (e) => {
+          console.log('videos pb playlist: ', e);
+          eventHandler(e, e.type, "media", );
+        });
+
+        pbjs.onEvent('videoPlaybackRequest', (e) => {
+          console.log('videos pb playbackRequest: ', e);
+          eventHandler(e, e.type, "media", );
+        });
+
+        pbjs.onEvent('videoAutostartBlocked', (e) => {
+          console.log('videos pb autostartBlocked: ', e);
+          eventHandler(e, e.type, "media", );
+        });
+
+        pbjs.onEvent('videoPlayAttemptFailed', (e) => {
+          console.log('videos pb playAttemptFailed: ', e);
+          eventHandler(e, e.type, "media", );
+        });
+
+        pbjs.onEvent('videoContentLoaded', (e) => {
+          console.log('videos pb contentLoaded: ', e);
+          eventHandler(e, e.type, "media", );
+        });
+
+        pbjs.onEvent('videoPlay', (e) => {
+          console.log('videos pb play: ', e);
+          eventHandler(e, e.type, "media", );
+        });
+
+        pbjs.onEvent('videoPause', (e) => {
+          console.log('videos pb pause: ', e);
+          eventHandler(e, e.type, "media", );
+        });
+
+        pbjs.onEvent('videoBuffer', (e) => {
+          console.log('videos pb buffer: ', e);
+          eventHandler(e, e.type, "media", );
+        });
+
+        pbjs.onEvent('videoSeekStart', (e) => {
+          console.log('videos pb seekStart: ', e);
+          eventHandler(e, e.type, "media", );
+        });
+
+        pbjs.onEvent('videoSeekEnd', (e) => {
+          console.log('videos pb seekEnd: ', e);
+          eventHandler(e, e.type, "media", );
+        });
+
+        pbjs.onEvent('videoRenditionUpdate', (e) => {
+          console.log('videos pb renditionUpdate: ', e);
+          eventHandler(e, e.type, "media", );
+        });
+
+        pbjs.onEvent('videoMute', (e) => {
+          console.log('videos pb mute: ', e);
+          eventHandler(e, e.type, "player", );
+        });
+
+        pbjs.onEvent('videoVolume', (e) => {
+          console.log('videos pb volume: ', e);
+          eventHandler(e, e.type, "player", );
+        });
+
+        pbjs.onEvent('videoTime', (e) => {
+          console.log('videos pb time: ', e);
+            eventHandler(e, e.type, "media", );
+        });
+
+        pbjs.onEvent('videoComplete', (e) => {
+          console.log('videos pb complete: ', e);
+          eventHandler(e, e.type, "media", );
+        });
+
+        pbjs.onEvent('videoPlaylistComplete', (e) => {
+          console.log('videos pb playlistComplete: ', e);
+          eventHandler(e, e.type, "media", );
+        });
+
+        pbjs.onEvent('videoFullscreen', (e) => {
+          console.log('videos pb fullscreen: ', e);
+          eventHandler(e, e.type, "player", );
+        });
+
+        pbjs.onEvent('videoPlayerResize', (e) => {
+          console.log('videos pb playerResize: ', e);
+          eventHandler(e, e.type, "player", );
+        });
+
+        pbjs.onEvent('videoError', (e) => {
+          console.log('videos pb error: ', e);
+          eventHandler(e, e.type, "media", );
+        });
+
+        pbjs.onEvent('videoViewable', (e) => {
+          console.log('videos pb viewable: ', e);
+          eventHandler(e, e.type, "player", );
+        });
+
+        pbjs.onEvent('videoCast', (e) => {
+          console.log('videos pb cast: ', e);
+          eventHandler(e, e.type, "player", );
+        });
+
+        pbjs.onEvent('videoAdBreakStart', e => {
+          console.log('videos pb ad break start: ', e);
+          eventHandler(e, e.type, "ads", );
+        });
+
+        pbjs.onEvent('videoAdRequest', (e) => {
+          console.log('videos pb ad request: ', e);
+          eventHandler(e, e.type, "ads", );
+        });
+
+        pbjs.onEvent('videoAdLoaded', e => {
+          console.log('videos pb ad load: ', e);
+          eventHandler(e, e.type, "ads", );
+        });
+
+        pbjs.onEvent('videoAdImpression', (e) => {
+          console.log('videos pb ad impression: ', e);
+          eventHandler(e, e.type, "ads", );
+        });
+
+        pbjs.onEvent('videoAdStarted', (e) => {
+          console.log('videos pb ad started: ', e);
+          eventHandler(e, e.type, "ads", );
+        });
+
+        pbjs.onEvent('videoAdPlay', (e) => {
+          console.log('videos pb ad play: ', e);
+          eventHandler(e, e.type, "ads", );
+        });
+
+        pbjs.onEvent('videoAdPause', (e) => {
+          console.log('videos pb ad pause: ', e);
+          eventHandler(e, e.type, "ads", );
+        });
+
+        pbjs.onEvent('videoAdTime', (e) => {
+          console.log('videos pb ad time: ', e);
+        eventHandler(e, e.type, "ads", );
+        });
+
+        pbjs.onEvent('videoAdComplete', (e) => {
+          console.log('videos pb ad complete: ', e);
+          eventHandler(e, e.type, "ads", );
+        });
+
+        pbjs.onEvent('videoAdSkipped', (e) => {
+          console.log('videos pb ad skipped: ', e);
+          eventHandler(e, e.type, "ads", );
+        });
+
+        pbjs.onEvent('videoAdClick', (e) => {
+          console.log('videos pb ad click: ', e);
+          eventHandler(e, e.type, "ads", );
+        });
+
+        pbjs.onEvent('videoAdError', (e) => {
+          console.log('videos pb ad error: ', e);
+          eventHandler(e, e.type, "ads", );
+        });
+
+        pbjs.onEvent('videoAuctionAdLoadAbort', (e) => {
+          console.log('videos pb auction ad load attempt: ', e);
+          eventHandler(e, "auctionAdLoadAbort", "auction", );
+        });
+
+        pbjs.onEvent('videoAuctionAdLoadQueued', (e) => {
+          console.log('videos pb auction ad load queued: ', e);
+          eventHandler(e, "auctionAdLoadQueued", "auction", );
+        });
+
+        pbjs.onEvent('videoAuctionAdLoadAttempt', e => {
+          console.log('The Video Module is attempting to load an ad into the player! \n', e);
+          eventHandler(e, "auctionAdLoadAttempt", "auction", );
+        });
+
+        pbjs.onEvent('videoBidError', e => {
+          console.log('An Ad Error came from a Bid: ', e);
+          eventHandler(e, "bidError", "auction", );
+        });
+
+        pbjs.onEvent('videoBidImpression', e => {
+          console.log('An Ad Impression came from a Bid: ', e);
+          eventHandler(e, "bidImpression", "auction", );
+        });
+
+        pbjs.requestBids(adUnits);
+      });
+    </script>
+</head>
+
+<body>
+<div id="playerContainer"style="width: 640px; height: 360px;">
+    <div id ="player"></div>
+</div>
+
+<div id ="eventsLog"></div>
+
+</body>
+
+</html>