How to Serve Outstream Video Ads with Google Ad Manager and BiddingStack Video Player

You can place the BiddingStack video player directly on the page and have it play a VAST ad from a Google Ad Manager video ad unit. The player renders in a container you control and keeps a 16:9 ratio based on the container width, so it fits your article layout.

If you would rather serve video through an existing banner slot and a Google Ad Manager creative, see How to Serve Outstream Video Ads.

What You Need

• Your BiddingStack tag on the page.
• A Google Ad Manager video ad unit with video line items trafficked against it.
• A container element on the page where the player should render.

Example

<div id="video-slot" style="max-width:640px;margin:0 auto;"></div>
<script src="https://pubtm.com/serve/tag.js" async></script>
<script>
  (function () {
    async function renderVideo() {
      var el = document.getElementById("video-slot");

      // 16:9 sized from the container width
      var w = el.clientWidth || 640;
      var h = Math.round(w * 9 / 16);

      var vastUrl =
        "https://securepubads.g.doubleclick.net/gampad/ads" +
        "?iu=/124312541/video01" +          // your GAM video ad unit
        "&env=vp&output=vast&sz=640x360" +
        "&gdfp_req=1&unviewed_position_start=1" +
        "&url=" + encodeURIComponent(location.href) +
        "&description_url=" + encodeURIComponent(location.href) +
        "&correlator=" + Date.now();

      var ad = await window.BID_AD.displayAd({
        placement: "banner",
        mediaType: "video",
        data: {
          vastUrl: vastUrl,
        },
        config: {
          width: w,
          height: h,
          // closeButton: true,
          // disableCMP: true,   // only for test pages without a CMP
        },
      });

      // Place the player in your slot
      el.appendChild(ad.container);
    }

    (function waitForTag() {
      if (window.BID_AD && window.BID_AD.displayAd) {
        renderVideo().catch(console.error);
      } else {
        setTimeout(waitForTag, 50);
      }
    })();
  })();
</script>

Use your own BiddingStack tag URL in the <script src> line if it differs from the example, and replace iu=/124312541/video01 with your own video ad unit path.

Options

displayAd resolves with the rendered ad, and ad.container is the element to append to your slot.

Tips

• Set a max-width on the container so the player does not grow past your content column.

Need help setting up the video ad unit or line items? Contact the BiddingStack team.