Between Digital

How to show video creatives in Prebid.js via the ANOutstreamVideo player

Step 1: Building Prebid.js

Option 1: on Prebid.js website. Go to prebid.org/download.html , «Get Prebid.js!» at the bottom of the page.

Option 2: from Github. Go to github and build sources according to instructions.

Step 2: Setup Prebid on a website

The parameters are used as an example:

  1. Include into <head> builded prebid.js: <script src="prebid.js></script>
  2. Include into <head> following code:
  • Include into <body> this code: <div id="video_slot"></div>:

    • Currency

    You can choose in which currency the SSP server will send cpm: 'RUB', 'USD' or 'EUR'. Default is 'RUB'. To do this, in the params field of our adapter you need to add the cur field, which takes one of the values: 'RUB', 'USD' or 'EUR'.

    For example, you want cpm to be sent in dollars. Then the code of our adapter settings will look like this: 

            
{
 bidder: 'between',
  params: {
   s: 	BETWEEN_SECTION_ID,
   cur: 'USD'
  }
}

    Full example: 

        
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <meta http-equiv="X-UA-Compatible" />
          <title>Prebid Video Test</title>
          <script src="prebid.js"></script>
      
          <script>
            var PREBID_TIMEOUT = 1000;
            var adUnits = [
              {
                code: "video_slot",
                mediaTypes: {
                  video: {
                    context: "outstream",
                    playerSize: [640, 480],
                    maxd: 90,
                    mind: 0,
                    codeType: "inpage",
                  },
                },
                renderer: {
                url: "https://acdn.adnxs.com/video/outstream/ANOutstreamVideo.js",
                render: function (bid) {
                  var adResponse = {
                    ad: {
                      video: {
                        content: bid.ad,
                        player_height: bid.height,
                        player_width: bid.width,
                      },
                    },
                  };
                  bid.renderer.push(function() {
                    ANOutstreamVideo.renderAd({
                      targetId: bid.adUnitCode, // target div id to render video.
                      adResponse: adResponse,
                    });
                  });
                },
              },
                bids: [
                  {
                    bidder: "between",
                    params: {
                      s: 4423226,
                      cur: "RUB",
                    },
                  },
                ],
              },
            ];
      
            var pbjs = pbjs || {};
            pbjs.que = pbjs.que || [];
          </script>
      
          <script>
            pbjs.que.push(function () {
                pbjs.setConfig({
                  userSync: {
                    iframeEnabled: true,
                  },
                });
              pbjs.addAdUnits(adUnits);
              pbjs.requestBids({
                bidsBackHandler: sendAdserverRequest,
              });
            });
            function sendAdserverRequest() {
              if (pbjs.adserverRequestSent) return;
              pbjs.adserverRequestSent = true;
      
              var videoParams = pbjs.getAdserverTargetingForAdUnitCode("video_slot");
              var video_slot = document.getElementById("video_slot");
      
      
              if (videoParams && videoParams["hb_adid"]) {
                pbjs.renderAd(video_slot, videoParams["hb_adid"]);
              }
            }
            setTimeout(function () {
              sendAdserverRequest();
            }, PREBID_TIMEOUT);
          </script>
        </head>
        <body>
          <div id="video_slot"></div>
        </body>
      </html>