Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Setup your OpenWrap profile
  2. Upload slot config for video
  3. Page setup
  4. Test the setup
  5. Sample pages
Info
titleDFP is now called, Google Ad Manager (GAM)

When you see DFP mentioned in this guide, it is referring to GAM.

...

The following sample pages let you test various video configurations.

    1. Single video slot HTML

      Code Block
      languagexml
      themeMidnight
      titleSingle video slot HTML
      linenumberstrue
      collapsetrue
      <!DOCTYPE HTML>
      <html lang="en-us">
      <head>
          <meta http-equiv="Content-type" content="text/html; charset=utf-8">
          <title>NON SRA</title>
          <!-- videojs -->
          <!-- use recent version of videojs to ensure proper functioning with the iOS devices -->
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video-js.css">
          <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video.js"></script>
          <!-- videojs-vast-vpaid -->
          <link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs.vast.vpaid.min.css"
              rel="stylesheet">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs_5.vast.vpaid.min.js"></script>
           
          <!-- Loading Asynchronously -->
          <script type="text/javascript">
              Array.$constructor = function () {
                  for (i = 0; i < this.length; i++) {
                      this[i] = this[i].toUpperCase();
                  }
              };
          </script>
          <script type="text/javascript">
              (function () {
                  var purl = window.location.href;
                  var url = '//ads.pubmatic.com/AdServer/js/pwt/5890/2130'; // Update PUB_ID & PROF_ID
                  var profileVersionId = '';
                  if (purl.indexOf('pwtv=') > 0) {
                      var regexp = /pwtv=(.*?)(&|$)/g;
                      var matches = regexp.exec(purl);
                      if (matches.length >= 2 && matches[1].length > 0) {
                          profileVersionId = '/' + matches[1];
                      }
                  }
                  var wtads = document.createElement('script');
                  wtads.async = true;
                  wtads.type = 'text/javascript';
                  wtads.src = url + profileVersionId + '/pwt.js';
                  var node = document.getElementsByTagName('script')[0];
                  node.parentNode.insertBefore(wtads, node);
              })();
          </script>
           
          <script type='text/javascript'>
              var googletag = googletag || {};
              googletag.cmd = googletag.cmd || [];
              var PWT = {}; //Initialize Namespace
              PWT.jsLoaded = function () { //PubMatic pwt.js on load callback is used to load GPT
                  var gads = document.createElement('script');
                  gads.type = "text/javascript";
                  gads.async = true;
                  gads.src = 'https://www.googletagservices.com/tag/js/gpt.js';
                  var node = document.getElementsByTagName('script')[0];
                  node.parentNode.insertBefore(gads, node);
              };
          </script>
           
          <script type="text/javascript">
              googletag.cmd.push(function () {
       
                  var s2 = googletag.defineSlot('/43743431/QAVideo', [
                      [640, 480]
                  ], 'Div1').addService(googletag.pubads());
                  s2.setTargeting('a', [1]);
                  s2.setTargeting('b', [2]);
                  s2.setTargeting('c', 3);
                  s2.setTargeting('d', ['a', 'b', 'c']);
                  // var s2 = googletag.defineSlot('/43743431/DMDemo1', [
                  //  [728, 90]
                  // ], 'Div2').addService(googletag.pubads());
                  // s2.setTargeting('aa', [11]);
                  // s2.setTargeting('bb', [22]);
                  // s2.setTargeting('dd', ['aa', 'bb', 'cc']);
                   
       
                   
                  // common targetings
                  googletag.pubads().setTargeting('v', 'classifieds');
                  googletag.pubads().setTargeting('cpage', 'browseads');
                  googletag.pubads().setTargeting('article-id', '65207');
                  googletag.pubads().setTargeting('automation', '1');
                  googletag.enableServices();
                  if ("undefined" != typeof (PWT) && typeof (PWT.addKeyValuePairsToGPTSlots) == "function") {
                      PWT.requestBids(
                          PWT.generateConfForGPT(googletag.pubads().getSlots()),
                          function (adUnitsArray) {
                              console.log("AdUnitsArray", adUnitsArray);
                              // PWT.addKeyValuePairsToGPTSlots(adUnitsArray);
                              // googletag.display('Div1');
                              // googletag.display('Div2');
                               
                              var videoUrl = window.PWT.generateDFPURL(adUnitsArray[0], {
                                  section: 'blog',
                                  anotherKey: 'anotherValue'
                              });
                              invokeVideoPlayer(videoUrl);
       
                          }
                      );
                  }
              });
          </script>
      </head>
      <body>
           
          <h2>OpenWrap - Prebid Video -- video.js</h2>
           
          <div class="example-video-container" id='Div1'>
               
              <video id="vid1" class="video-js vjs-default-skin vjs-big-play-centered" controls data-setup='{}' width='640'
                  height='480'>
                  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
                  <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
                  <source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg' />
              </video>
          </div>
           
           
          <script>
              var page_load_time;
              page_load_time = new Date().getTime() - performance.timing.navigationStart;
              console.log(page_load_time + "ms -- Player loading!");
              var vid1 = videojs('vid1');
              page_load_time = new Date().getTime() - performance.timing.navigationStart;
              console.log(page_load_time + "ms -- Player loaded!");
              function invokeVideoPlayer(url) {
                   
                  page_load_time = new Date().getTime() - performance.timing.navigationStart;
                  console.log(page_load_time + "ms -- Prebid VAST url = " + url);
                  /* Access the player instance by calling `videojs()` and passing
                     in the player's ID. Add a `ready` listener to make sure the
                     player is ready before interacting with it. */
                   
                  videojs("vid1").ready(function () {
                       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- Player is ready!");
                      /* PASS SETTINGS TO VAST PLUGIN
       
                         Pass in a JSON object to the player's `vastClient` (defined
                         by the VAST/VPAID plugin we're using). The requires an
                         `adTagUrl`, which will be the URL returned by Prebid. You
                         can view all the options available for the `vastClient`
                         here:
       
                         https://github.com/MailOnline/videojs-vast-vpaid#options */
                       
                      var player = this;
                      var vastAd = player.vastClient({
                          adTagUrl: url,
                          playAdAlways: true,
                          verbosity: 4,
                          adCancelTimeout: 10000,
                          vpaidFlashLoaderPath: "https://github.com/MailOnline/videojs-vast-vpaid/blob/RELEASE/bin/VPAIDFlash.swf?raw=true",
                          autoplay: true
                      });
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- Prebid VAST tag inserted!");
                      player.muted(true);
                      player.play();
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- invokeVideoPlayer complete!");
                  });
              }
          </script>
      </body>
       
      </html>


    2. Single video slot without GPT

      Code Block
      languagexml
      themeMidnight
      titleSingle video slot without GPT
      linenumberstrue
      collapsetrue
      <!DOCTYPE html>
      <html>
      
      <head>
          <link rel="icon" type="image/png" href="/favicon.png">
          <meta charset="utf-8" />
          <title>OpenWrap Client-Side Video -- video.js with IMA</title>
      
          <!-- Load dependent stylesheets. -->
          <link rel="stylesheet" href="//googleads.github.io/videojs-ima/node_modules/video.js/dist/video-js.min.css" />
          <link rel="stylesheet" href="//googleads.github.io/videojs-ima/node_modules/videojs-contrib-ads/dist/videojs.ads.css" />
          <link rel="stylesheet" href="//googleads.github.io/videojs-ima/dist/videojs.ima.css" />
      
          <style type="text/css">
              body {
                  font-family: sans-serif;
              }
          </style>
      
          <script type="text/javascript">
              var PWT = {};
              (function() {
                  var purl = window.location.href;
                  var url = '//ads.pubmatic.com/AdServer/js/pwt/156276/2146';
                  var profileVersionId = '';
                  if (purl.indexOf('pwtv=') > 0) {
                      var regexp = /pwtv=(.*?)(&|$)/g;
                      var matches = regexp.exec(purl);
                      if (matches.length >= 2 && matches[1].length > 0) {
                          profileVersionId = '/' + matches[1];
                      }
                  }
                  var wtads = document.createElement('script');
                  wtads.async = true;
                  //wtads.async = false;
                  wtads.type = 'text/javascript';
                  wtads.src = url + profileVersionId + '/pwt.js';
                  var node = document.getElementsByTagName('script')[0];
                  node.parentNode.insertBefore(wtads, node);
              })();
          </script>
      </head>
      
      <body>
          <h2>OpenWrap Client Side Video -- video.js + IMA</h2>
      
          <p> This example shows how to implement OpenWrap client-side Video when not using GPT or when
              constructing the OpenWrap Ad Unit array manually</p>
      
          <div class="example-video-container">
              <video id="content_video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
                  <source src="//commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
                  </source>
              </video>
          </div>
      
      
          <!-- Load dependent scripts -->
          <script src="//googleads.github.io/videojs-ima/node_modules/video.js/dist/video.min.js"></script>
          <script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
          <script src="//googleads.github.io/videojs-ima/node_modules/videojs-contrib-ads/dist/videojs.ads.min.js"></script>
          <script src="//googleads.github.io/videojs-ima/dist/videojs.ima.js"></script>
      
          <script>
              function invokeVideoPlayer(url) {
      
                  var vjsOptions = {
                      autoplay: true,
                      muted: true,
                      debug: true
                  }
                  var player = videojs('content_video', vjsOptions);
      
                  var options = {
                      id: 'content_video',
                      adTagUrl: url
                  };
      
                  player.muted(true);
                  player.ima(options);
              }
          </script>
      
          <script>
              function ow_bids() {
                  if (typeof PWT.requestBids === 'function') {
                      console.log("OpenWrap bidding starting");
                      var ow_slots = [{
                          code: "video-1", // mandatory
                          divId: "content_video", // mandatory
                          adUnitId: "/40619304/OW_Video", // mandatory: can be any string, GAM ad unit id is often used
                          adUnitIndex: "0", // mandatory
                          mediaTypes: { // mandatory
                              video: { // mandatory
                                  "mimes": ["video/mp4"], // mandatory
                                  "playerSize": [640, 480], // mandatory when using OpenWrap versions with Prebid 4.x and later
                                  "w": 640, // Only needed for OpenWrap versions with Prebid 3.x
                                  "h": 480 // Only needed for OpenWrap versions with Prebid 3.x
                              }
                          },
                          sizes: [
                              [640, 480]
                          ] // mandatory
                      }];
      
                      var start_time = new Date().getTime();
                      PWT.requestBids(
                          ow_slots,
                          function(adUnitsArray) {
                              var end_time = new Date().getTime();
                              var diff = end_time - start_time;
                              console.log("OpenWrap Time taken: " + diff.toString());
                              var videoUrl = window.PWT.generateDFPURL(adUnitsArray[0], {});
                              invokeVideoPlayer(videoUrl);
                          }
                      );
                  } else {
                      setTimeout(ow_bids, 10);
                  }
              }
      
              ow_bids();
          </script>
      </body>
      </html>
      
      
      


    3. Multiple video slots HTML

      Code Block
      languagexml
      themeMidnight
      titleMultiple video slot HTML
      linenumberstrue
      collapsetrue
      <!DOCTYPE HTML>
       
      <html lang="en-us">
       
      <head>
          <meta http-equiv="Content-type" content="text/html; charset=utf-8">
          <title>NON SRA</title>
          <!-- videojs -->
          <!-- use recent version of videojs to ensure proper functioning with the iOS devices -->
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video-js.css">
          <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video.js"></script>
          <!-- videojs-vast-vpaid -->
          <link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs.vast.vpaid.min.css"
              rel="stylesheet">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs_5.vast.vpaid.min.js"></script>
       
          <!-- Loading Asynchronously -->
          <script type="text/javascript">
              Array.$constructor = function () {
                  for (i = 0; i < this.length; i++) {
                      this[i] = this[i].toUpperCase();
                  }
              };
          </script>
          <script type="text/javascript">
              (function () {
                  var purl = window.location.href;
                  var url = '//ads.pubmatic.com/AdServer/js/pwt/5890/2133';
                  var profileVersionId = '';
                  if (purl.indexOf('pwtv=') > 0) {
                      var regexp = /pwtv=(.*?)(&|$)/g;
                      var matches = regexp.exec(purl);
                      if (matches.length >= 2 && matches[1].length > 0) {
                          profileVersionId = '/' + matches[1];
                      }
                  }
                  var wtads = document.createElement('script');
                  wtads.async = true;
                  wtads.type = 'text/javascript';
                  wtads.src = url + profileVersionId + '/pwt.js';
                  var node = document.getElementsByTagName('script')[0];
                  node.parentNode.insertBefore(wtads, node);
              })();
          </script>
       
          <script type='text/javascript'>
              var googletag = googletag || {};
              googletag.cmd = googletag.cmd || [];
              var PWT = {}; //Initialize Namespace
              PWT.jsLoaded = function () { //PubMatic pwt.js on load callback is used to load GPT
                  var gads = document.createElement('script');
                  gads.type = "text/javascript";
                  gads.async = true;
                  gads.src = 'https://www.googletagservices.com/tag/js/gpt.js';
                  var node = document.getElementsByTagName('script')[0];
                  node.parentNode.insertBefore(gads, node);
              };
          </script>
       
          <script type="text/javascript">
              googletag.cmd.push(function () {
       
                  var s2 = googletag.defineSlot('/43743431/QAVideo', [
                      [640, 480]
                  ], 'Div2').addService(googletag.pubads());
                  s2.setTargeting('a', [1]);
                  s2.setTargeting('b', [2]);
                  s2.setTargeting('c', 3);
                  s2.setTargeting('d', ['a', 'b', 'c']);
       
                  var s1 = googletag.defineSlot('/43743431/QAVideo', [
                      [640, 480]
                  ], 'Div1').addService(googletag.pubads());
                  s1.setTargeting('aa', [11]);
                  s1.setTargeting('bb', [22]);
                  s1.setTargeting('cc', 33);
                  s1.setTargeting('dd', ['aa', 'bb', 'cc']);
       
       
                  // common targetings
                  googletag.pubads().setTargeting('v', 'classifieds');
                  googletag.pubads().setTargeting('cpage', 'browseads');
                  googletag.pubads().setTargeting('article-id', '65207');
                  googletag.pubads().setTargeting('automation', '1');
       
                  googletag.enableServices();
       
                  if ("undefined" != typeof (PWT) && typeof (PWT.addKeyValuePairsToGPTSlots) == "function") {
                      PWT.requestBids(
                          PWT.generateConfForGPT(googletag.pubads().getSlots()),
                          function (adUnitsArray) {
                              console.log("AdUnitsArray", adUnitsArray);
                              // PWT.addKeyValuePairsToGPTSlots(adUnitsArray);
                              // googletag.display('Div1');
                              // googletag.display('Div2');
       
                              var videoUrl = window.PWT.generateDFPURL(adUnitsArray[0], {
                                  section: 'blog',
                                  anotherKey: 'anotherValue'
                              });
                              invokeVideoPlayer(videoUrl);
                              var videoUrl1 = window.PWT.generateDFPURL(adUnitsArray[1], {
                                  section: 'blog',
                                  anotherKey: 'anotherValue'
                              });
                              invokeVideoPlayer1(videoUrl1);
                              PWT.addKeyValuePairsToGPTSlots(adUnitsArray);
       
                          }
                      );
                  }
       
       
              });
          </script>
      </head>
       
      <!-- <body style='background-color:whitesmoke;'>
       
          <h2 style='text-align:center;'>
              NON SRA
          </h2>
       
          <br><br>
          Adslot : /43743431/DMDemo
          <br>
          <div id='Div1'>
          </div>
       
          <br><br>
          Adslot : /43743431/DMDemo1
          <br>
          <div id='Div2'>
          </div>
      </body> -->
       
      <body>
       
          <h2>OpenWrap - Prebid Video -- video.js</h2>
       
          <div class="example-video-container" id='Div2'>
       
              <video id="vid1" class="video-js vjs-default-skin vjs-big-play-centered" controls data-setup='{}' width='640'
                  height='480'>
                  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
                  <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
                  <source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg' />
              </video>
          </div>
          <br><br>
          <div class="example-video-container" id='Div1'>
       
              <video id="vid2" class="video-js vjs-default-skin vjs-big-play-centered" controls data-setup='{}' width='640'
                  height='480'>
                  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
                  <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
                  <source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg' />
              </video>
          </div>
       
       
       
          <script>
              var page_load_time;
       
              page_load_time = new Date().getTime() - performance.timing.navigationStart;
              console.log(page_load_time + "ms -- Player loading!");
       
              var vid1 = videojs('vid1');
              var vid2 = videojs('vid2');
       
              page_load_time = new Date().getTime() - performance.timing.navigationStart;
              console.log(page_load_time + "ms -- Player loaded!");
       
              function invokeVideoPlayer(url) {
       
                  page_load_time = new Date().getTime() - performance.timing.navigationStart;
                  console.log(page_load_time + "ms -- Prebid VAST url = " + url);
       
                  /* Access the player instance by calling `videojs()` and passing
                     in the player's ID. Add a `ready` listener to make sure the
                     player is ready before interacting with it. */
       
                  videojs("vid1").ready(function () {
       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- Player is ready!");
       
                      /* PASS SETTINGS TO VAST PLUGIN
       
                         Pass in a JSON object to the player's `vastClient` (defined
                         by the VAST/VPAID plugin we're using). The requires an
                         `adTagUrl`, which will be the URL returned by Prebid. You
                         can view all the options available for the `vastClient`
                         here:
       
                         https://github.com/MailOnline/videojs-vast-vpaid#options */
       
                      var player = this;
                      var vastAd = player.vastClient({
                          adTagUrl: url,
                          playAdAlways: true,
                          verbosity: 4,
                          adCancelTimeout: 25000,
                          vpaidFlashLoaderPath: "https://github.com/MailOnline/videojs-vast-vpaid/blob/RELEASE/bin/VPAIDFlash.swf?raw=true",
                          autoplay: true
                      });
       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- Prebid VAST tag inserted!");
       
                      player.muted(true);
                      player.play();
       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- invokeVideoPlayer complete!");
       
                  });
              }
       
              function invokeVideoPlayer1(url) {
       
                  page_load_time = new Date().getTime() - performance.timing.navigationStart;
                  console.log(page_load_time + "ms -- Prebid VAST url = " + url);
       
                  /* Access the player instance by calling `videojs()` and passing
                     in the player's ID. Add a `ready` listener to make sure the
                     player is ready before interacting with it. */
       
                  videojs("vid2").ready(function () {
       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- Player is ready!");
       
                      /* PASS SETTINGS TO VAST PLUGIN
       
                         Pass in a JSON object to the player's `vastClient` (defined
                         by the VAST/VPAID plugin we're using). The requires an
                         `adTagUrl`, which will be the URL returned by Prebid. You
                         can view all the options available for the `vastClient`
                         here:
       
                         https://github.com/MailOnline/videojs-vast-vpaid#options */
       
                      var player = this;
                      var vastAd = player.vastClient({
                          adTagUrl: url,
                          playAdAlways: true,
                          verbosity: 4,
                          adCancelTimeout: 25000,
                          vpaidFlashLoaderPath: "https://github.com/MailOnline/videojs-vast-vpaid/blob/RELEASE/bin/VPAIDFlash.swf?raw=true",
                          autoplay: true
                      });
       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- Prebid VAST tag inserted!");
       
                      player.muted(true);
                      player.play();
       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- invokeVideoPlayer complete!");
       
                  });
              }
          </script>
      </body>
       
      </html>


    4. MultiSlots with banner and video inventory

      Code Block
      languagexml
      themeMidnight
      titleMultiple slot for banner and video HTML
      collapsetrue
      <!DOCTYPE HTML>
      
      <html lang="en-us">
      
      <head>
      	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
      	<title>NON SRA</title>
              <!-- videojs -->
              <!-- use recent version of videojs to ensure proper functioning with the iOS devices -->
              <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video-js.css">
              <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video.js"></script>
              <!-- videojs-vast-vpaid -->
              <link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs.vast.vpaid.min.css" rel="stylesheet">
              <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs_5.vast.vpaid.min.js"></script>
      
      	<!-- Loading Asynchronously -->
      	<script type="text/javascript">
      		Array.$constructor = function () {
      			for (i = 0; i < this.length; i++) {
      				this[i] = this[i].toUpperCase();
      			}
      		};
      	</script>
      	<script type="text/javascript">
      		(function () {
      			var purl = window.location.href;
      			var url = '//ads.pubmatic.com/AdServer/js/pwt/5890';
      			var profileId = '';
      			var profileVersionId = '';
      			if (purl.indexOf('profileid=') > 0) {
      				var regexp = /profileid=(.*?)(&|$)/g;
      				var matches = regexp.exec(purl);
      				if (matches.length >= 2 && matches[1].length > 0) {
      					profileId = '/' + matches[1];
      				}
      			}
      			if (purl.indexOf('pwtv=') > 0) {
      				var regexp = /pwtv=(.*?)(&|$)/g;
      				var matches = regexp.exec(purl);
      				if (matches.length >= 2 && matches[1].length > 0) {
      					profileVersionId = '/' + matches[1];
      				}
      			}
      			var wtads = document.createElement('script');
      			wtads.async = true;
      			wtads.type = 'text/javascript';
      			wtads.src = url+profileId+profileVersionId+'/pwt.js';
      			//wtads.src = "https://test.com/Libs/OW/Video/owt.js";
      			// wtads.src = "http://test.com/Libs/OW/Video/owt_working.js";
      			var node = document.getElementsByTagName('script')[0];
      			node.parentNode.insertBefore(wtads, node);
      		})();
      	</script>
      
      	<script type='text/javascript'>
      		var googletag = googletag || {};
      		googletag.cmd = googletag.cmd || [];
      		(function () {
      			setTimeout(function () {
      				var gads = document.createElement('script');
      				gads.async = true;
      				gads.type = 'text/javascript';
      				var useSSL = 'https:' == document.location.protocol;
      				gads.src = (useSSL ? 'https:' : 'http:') +
      					'//www.googletagservices.com/tag/js/gpt.js';
      				var node = document.getElementsByTagName('script')[0];
      				node.parentNode.insertBefore(gads, node);
      			}, 250); // Adding 250ms delay to gpt.js for PubMatic script to load
      		})();
      	</script>
      
      	<script type="text/javascript">
      		googletag.cmd.push(function () {
      			
      			var s2 = googletag.defineSlot('/43743431/QAVideo', [
      				[640, 480]
      			], 'Div2').addService(googletag.pubads());
      			s2.setTargeting('a', [1]);
      			s2.setTargeting('b', [2]);
      			s2.setTargeting('c', 3);
      			s2.setTargeting('d', ['a', 'b', 'c']);
      			// var s2 = googletag.defineSlot('/43743431/DMDemo1', [
      			// 	[728, 90]
      			// ], 'Div2').addService(googletag.pubads());
      			// s2.setTargeting('aa', [11]);
      			// s2.setTargeting('bb', [22]);
      			// s2.setTargeting('dd', ['aa', 'bb', 'cc']);
      
      			var s1=googletag.defineSlot('/43743431/OpenWrapBothNativeBanner1', [['fluid'],[728, 90],[300,250],[160,600]], 'Div1').addService(googletag.pubads());
      			s1.setTargeting('a', [1]);
      			s1.setTargeting('b', [2]);
      			s1.setTargeting('c', 3);
      			s1.setTargeting('d', ['a', 'b', 'c']);		
      
      							
      			
      			
      
      			var s3=googletag.defineSlot('/43743431/DMDemo2', [[160, 600],[728,90],[300, 250]], 'Div3').addService(googletag.pubads());
      			s3.setTargeting('aaa', [111]);
      			s3.setTargeting('bbb', [222]);
      			s3.setTargeting('ddd', ['aaa', 'bbb', 'ccc']);		
      
      
      			// common targetings
      			googletag.pubads().setTargeting('v', 'classifieds');
      			googletag.pubads().setTargeting('cpage', 'browseads');
      			googletag.pubads().setTargeting('article-id', '65207');
      			googletag.pubads().setTargeting('automation', '1');
      
      			googletag.enableServices();
      
      			if ("undefined" != typeof (PWT) && typeof (PWT.addKeyValuePairsToGPTSlots) == "function") {
      				PWT.requestBids(
      					PWT.generateConfForGPT(googletag.pubads().getSlots()),
      					function (adUnitsArray) {
      						console.log("AdUnitsArray", adUnitsArray);
      						// PWT.addKeyValuePairsToGPTSlots(adUnitsArray);
      						// googletag.display('Div1');
      						// googletag.display('Div2');
      
      					    var videoUrl = window.PWT.generateDFPURL(adUnitsArray[0],{
                                              section: 'blog',
                                              anotherKey: 'anotherValue'
                                          });
                                  invokeVideoPlayer(videoUrl);
      							PWT.addKeyValuePairsToGPTSlots(adUnitsArray);
      							googletag.display('Div1');
      							googletag.display('Div3');
      					}
      				);
      			}
      
      
      		});
      	</script>
      </head>
      
      <!-- <body style='background-color:whitesmoke;'>
      
      	<h2 style='text-align:center;'>
      		NON SRA
      	</h2>
      
      	<br><br>
      	Adslot : /43743431/DMDemo
      	<br>
      	<div id='Div1'>
      	</div>
      
      	<br><br>
      	Adslot : /43743431/DMDemo1
      	<br>
      	<div id='Div2'>
      	</div>
      </body> -->
      
      <body>
      
      	<h2>OpenWrap - Prebid Video -- video.js</h2>
      
      	<div class="example-video-container" id='Div2'>
      
      		<video id="vid1" class="video-js vjs-default-skin vjs-big-play-centered" controls data-setup='{}' width='640' height='480'>
      			<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'/>
      			<source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'/>
      			<source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg'/>
      		</video>
      	</div>
      	
      	<br><br>
      	Adslot : /43743431/DMDemo
      	<br>
      	<div id='Div1'>
      	</div>
      
      	<br><br>
      	Adslot : /43743431/DMDemo1
      	<br>
      	<div id='Div3'>
      	</div>
      
      	<script>
      		var page_load_time;
      
      		page_load_time = new Date().getTime() - performance.timing.navigationStart;
      		console.log(page_load_time + "ms -- Player loading!");
      
      		var vid1 = videojs('vid1');
      
      		page_load_time = new Date().getTime() - performance.timing.navigationStart;
      		console.log(page_load_time + "ms -- Player loaded!");
      
      		function invokeVideoPlayer(url) {
      
      			page_load_time = new Date().getTime() - performance.timing.navigationStart;
      			console.log(page_load_time + "ms -- Prebid VAST url = " + url);
      
      			/* Access the player instance by calling `videojs()` and passing
      			   in the player's ID. Add a `ready` listener to make sure the
      			   player is ready before interacting with it. */
      
      			videojs("vid1").ready(function() {
      
      				page_load_time = new Date().getTime() - performance.timing.navigationStart;
      				console.log(page_load_time + "ms -- Player is ready!");
      
      				/* PASS SETTINGS TO VAST PLUGIN
      
      				   Pass in a JSON object to the player's `vastClient` (defined
      				   by the VAST/VPAID plugin we're using). The requires an
      				   `adTagUrl`, which will be the URL returned by Prebid. You
      				   can view all the options available for the `vastClient`
      				   here:
      
      				   https://github.com/MailOnline/videojs-vast-vpaid#options */
      
      				var player = this;
      				var vastAd = player.vastClient({
      					adTagUrl: url,
      					playAdAlways: true,
      					verbosity: 4,adCancelTimeout: 25000,
      					vpaidFlashLoaderPath: "https://github.com/MailOnline/videojs-vast-vpaid/blob/RELEASE/bin/VPAIDFlash.swf?raw=true",
      					autoplay: true
      				});
      
      				page_load_time = new Date().getTime() - performance.timing.navigationStart;
      				console.log(page_load_time + "ms -- Prebid VAST tag inserted!");
      
      				player.muted(true);
      				player.play();
      
      				page_load_time = new Date().getTime() - performance.timing.navigationStart;
      				console.log(page_load_time + "ms -- invokeVideoPlayer complete!");
      
      			});
      		}
      
      	</script>
      </body>
      </html>


    5. Multi-format (banner and video) single slot

      Code Block
      languagexml
      themeMidnight
      titleMulti-format banner & video HTML
      linenumberstrue
      collapsetrue
      <!DOCTYPE HTML>
       
      <html lang="en-us">
       
      <head>
          <meta http-equiv="Content-type" content="text/html; charset=utf-8">
          <title>NON SRA</title>
          <!-- videojs -->
          <!-- use recent version of videojs to ensure proper functioning with the iOS devices -->
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video-js.css">
          <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video.js"></script>
          <!-- videojs-vast-vpaid -->
          <link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs.vast.vpaid.min.css"
              rel="stylesheet">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs_5.vast.vpaid.min.js"></script>
       
          <!-- Loading Asynchronously -->
          <script type="text/javascript">
              Array.$constructor = function () {
                  for (i = 0; i < this.length; i++) {
                      this[i] = this[i].toUpperCase();
                  }
              };
          </script>
          <script type="text/javascript">
              (function () {
                  var purl = window.location.href;
                  var url = '//ads.pubmatic.com/AdServer/js/pwt/5890/2141';
                  var profileVersionId = '';
                  if (purl.indexOf('pwtv=') > 0) {
                      var regexp = /pwtv=(.*?)(&|$)/g;
                      var matches = regexp.exec(purl);
                      if (matches.length >= 2 && matches[1].length > 0) {
                          profileVersionId = '/' + matches[1];
                      }
                  }
                  var wtads = document.createElement('script');
                  wtads.async = true;
                  wtads.type = 'text/javascript';
                  wtads.src = url + profileVersionId + '/pwt.js';
                  var node = document.getElementsByTagName('script')[0];
                  node.parentNode.insertBefore(wtads, node);
              })();
          </script>
       
          <script type='text/javascript'>
              var googletag = googletag || {};
              googletag.cmd = googletag.cmd || [];
              var PWT = {}; //Initialize Namespace
              PWT.jsLoaded = function () { //PubMatic pwt.js on load callback is used to load GPT
                  var gads = document.createElement('script');
                  gads.type = "text/javascript";
                  gads.async = true;
                  gads.src = 'https://www.googletagservices.com/tag/js/gpt.js';
                  var node = document.getElementsByTagName('script')[0];
                  node.parentNode.insertBefore(gads, node);
              };
          </script>
       
          <script type="text/javascript">
              googletag.cmd.push(function () {
       
       
                  var s1 = googletag.defineSlot('/43743431/OpenWrapBothNativeBanner1', [
                      ['fluid'],
                      [728, 90],
                      [300, 250],
                      [160, 600],
                      [640, 480]
                  ], 'Div1').addService(googletag.pubads());
                  s1.setTargeting('a', [1]);
                  s1.setTargeting('b', [2]);
                  s1.setTargeting('c', 3);
                  s1.setTargeting('d', ['a', 'b', 'c']);
       
       
       
                  // common targetings
                  googletag.pubads().setTargeting('v', 'classifieds');
                  googletag.pubads().setTargeting('cpage', 'browseads');
                  googletag.pubads().setTargeting('article-id', '65207');
                  googletag.pubads().setTargeting('automation', '1');
       
                  googletag.enableServices();
       
                  if ("undefined" != typeof (PWT) && typeof (PWT.addKeyValuePairsToGPTSlots) == "function") {
                      PWT.requestBids(
                          PWT.generateConfForGPT(googletag.pubads().getSlots()),
                          function (adUnitsArray) {
                              console.log("AdUnitsArray", adUnitsArray);
                              if (adUnitsArray[0].bidData.kvp.pwtplt == "video") {
                                  var videoUrl = window.PWT.generateDFPURL(adUnitsArray[0], {
                                      section: 'blog',
                                      anotherKey: 'anotherValue'
                                  });
                                  invokeVideoPlayer(videoUrl);
       
                              } else {
                                  PWT.addKeyValuePairsToGPTSlots(adUnitsArray);
                                  googletag.display('Div1');
                              }
                          }
                      );
                  }
       
       
              });
          </script>
      </head>
       
      <body>
       
          <h2>OpenWrap - Prebid Video -- video.js</h2>
       
          <div class="example-video-container" id="Div1">
       
              <video id="vid1" class="video-js vjs-default-skin vjs-big-play-centered" controls data-setup='{}' width='640'
                  height='480'>
                  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
                  <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
                  <source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg' />
              </video>
          </div>
       
       
          <script>
              var page_load_time;
       
              page_load_time = new Date().getTime() - performance.timing.navigationStart;
              console.log(page_load_time + "ms -- Player loading!");
       
              var vid1 = videojs('vid1');
       
              page_load_time = new Date().getTime() - performance.timing.navigationStart;
              console.log(page_load_time + "ms -- Player loaded!");
       
              function invokeVideoPlayer(url) {
       
                  page_load_time = new Date().getTime() - performance.timing.navigationStart;
                  console.log(page_load_time + "ms -- Prebid VAST url = " + url);
       
                  /* Access the player instance by calling `videojs()` and passing
                     in the player's ID. Add a `ready` listener to make sure the
                     player is ready before interacting with it. */
       
                  videojs("vid1").ready(function () {
       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- Player is ready!");
       
                      /* PASS SETTINGS TO VAST PLUGIN
       
                         Pass in a JSON object to the player's `vastClient` (defined
                         by the VAST/VPAID plugin we're using). The requires an
                         `adTagUrl`, which will be the URL returned by Prebid. You
                         can view all the options available for the `vastClient`
                         here:
       
                         https://github.com/MailOnline/videojs-vast-vpaid#options */
       
                      var player = this;
                      var vastAd = player.vastClient({
                          adTagUrl: url,
                          playAdAlways: true,
                          verbosity: 4,
                          adCancelTimeout: 25000,
                          vpaidFlashLoaderPath: "https://github.com/MailOnline/videojs-vast-vpaid/blob/RELEASE/bin/VPAIDFlash.swf?raw=true",
                          autoplay: true
                      });
       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- Prebid VAST tag inserted!");
       
                      player.muted(true);
                      player.play();
       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- invokeVideoPlayer complete!");
       
                  });
              }
          </script>
      </body>
       
      </html>
      


Important considerations

  • AdUnit config slotnames are case sensitive.
  • ConfigPattern is optional and take only two values: _AU_ & _DIV_ (default is _AU_).
  • Default config is optional and key name is, default.
  • OpenWrap JavaScript currently supports only client-side partners for video inventory. In the case of hybrid profiles, PubMatic server does not  accept calls for video inventory.
  • Currently, OpenWrap accepts only the Custom AdServer Option.
  • PubMatic does not send video impressions when AdServer is GAM.
  • All partners require a 0x0 mapping file entry to support video.
  • Disregard the console warning, "fun-hooks: referenced 'registerAdserver' but it was never created"—it will be removed in a future release.

New convenience method on OpenWrap JavaScript API

Along with the other methods mentioned in the OpenWrap JavaScript API documentation, there is now the additional method, PWT.generateDFPURL, described below.

...