Between Digital

Как показывать видео креативы в Prebid.js через ANOutstreamVideo плеер

Шаг 1: Сборка Prebid.js

Вариант 1: на сайте Prebid.js. Перейдите на сайт prebid.org/download.html , выберите в списке адаптер BetweenDigital, нажмите кнопку «Get Prebid.js!» внизу страницы.

Вариант 2: на сайте Github. Перейдите на сайт github и соберите Prebid согласно инструкции.

Шаг 2: Установка Prebid на странице

В качестве примера используются параметры:

s: 3649326 — id секции

code: video_slot — id div'a, в котором будет показываться креатив

playerSize: [640, 480] — размеры плеера

maxd: 90/mid: 0 — max/min duration

Подключите в <head> собранный Prebid.js: <script src="prebid.js"></script>
Вставьте в <head> следующий код:

Вставте в <body> <div id="video_slot"></div>:

Полный пример:

    
      <!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>