# Prebid.js + Amamzon Publisher Services - Ad Generation Integration [Web]

Prebid.jsとAmazon Publisher Services(APS)とAd Generation SDKをWebで連携するための実装例です。

# サービスのご利用前に

# 実装例

<head>
  <script type="text/javascript" src="prebid.js" async></script>
  <script>
    !function(a9,a,p,s,t,A,g){if(a[a9])return;function q(c,r){a[a9]._Q.push([c,r])}a[a9]={init:function(){q("i",arguments)},fetchBids:function(){q("f",arguments)},setDisplayBids:function(){},targetingKeys:function(){return[]},_Q:[]};A=p.createElement(s);A.async=!0;A.src=t;g=p.getElementsByTagName(s)[0];g.parentNode.insertBefore(A,g)}("apstag",window,document,"script","//c.amazon-adsystem.com/aax2/apstag.js");
  </script>
  <script>
  // タイムアウト時間
  var TIMEOUT = 2000;

  // prebid.js初期化
  var pbjs = pbjs || {};
    pbjs.que = pbjs.que || [];

    // APS初期化
    apstag.init({
      pubID: '<pubID>',
      bidTimeout: 2000
    });

  var ads = [{
    pbjsAdUnits: [{
      code: '<ad-generation-adID>',
      sizes: [
        [300, 250]
      ],
      bids: [{
        bidder: 'Bidder Code', // Bidder Codeを指定
        params: {
          bidParams: 'xxxxxxxx', // リクエストに必要なパラメタを指定（Bidder毎に異なります）
        }
      }]
    }],
    apsSlot: [{
      slotID: '<ad-generation-adID>',
      slotName: '<ad-name>', // 任意の広告枠名
      sizes: [
        [300, 250]
      ]
    }],
    adid: '<ad-generation-adID>',
    targetid: '<adgeneration-targetID>', // 広告枠のコンテナ(divタグ)のID
    adType: 'RECT', // SP(320x50), LARGE(320x100), TABLET(728×90), RECT(300x250)
    elementid: 'adg-div', // 広告を設置するdivのID
    displayid: '1' // 1:inline 9:overlay
  },{
    // pbjsAdUnits: [{
    //   code: '<ad-generation-adID2>',
    //   sizes: [
    //     [300, 250]
    //   ],
    //   bids: [{
    //     bidder: 'Bidder Code',
    //     params: {
    //       bidParams: 'xxxxxxxx',
    //     }
    //   }]
    // }],
    // apsSlot: [{
    //   slotID: '<ad-generation-adID2>',
    //   slotName: '<ad-name>',
    //   sizes: [
    //     [300, 250]
    //   ]
    // }],
    // adid: '<ad-generation-adID2>',
    // targetid: '<adgeneration-targetID2>',
    // adType: 'RECT',
    // elementid: 'adg-div2',
    // displayid: '1'
  }];

  var apsResponseBids; // APS検索結果を待避させるための領域

    function fetchHeaderBids() {
      // Prebid.js bidリクエストの情報を抽出
      var pbjsAdUnits = ads.map(function(ad) {
        return ad.pbjsAdUnit;
      })
      .filter(Boolean);

      // APS bidリクエストの情報を抽出
      var apsSlots = ads.map(function (ad) {
        return ad.apsSlot;
      })
      .filter(Boolean);

      var requestManager = {
        adserverRequestSent: false,
      };

      // リクエスト識別ヘッダ一覧
      var bidders = ['aps', 'prebid'];

      bidders.forEach(function (bidder) {
        requestManager[bidder] = false;
      });

      function allBiddersBack() {
        var allBiddersBack = bidders
          .map(function (bidder) {
            return requestManager[bidder];
          })
          .filter(Boolean)
          .length === bidders.length;
        return allBiddersBack;
      }

      function headerBidderBack(bidder) {
        if (requestManager.adserverRequestSent === true) {
          return;
        }
        if (typeof requestManager[bidder] === 'boolean'){
          requestManager[bidder] = true;
        }
        if (allBiddersBack()) {
          sendAdserverRequest();
        }
      }

      // ADG広告タグ生成
      function sendAdserverRequest() {
        if (requestManager.adserverRequestSent === true) {
          return;
        }
        requestManager.adserverRequestSent = true;
        ads.forEach(function(ad) {
          try {
            // ADG BrowserURL
            var adgSrc = 'https://i.socdm.com/sdk/js/adg-script-loader.js' +
              '?id=' + ad.adid +
              '&targetID=adg_' + ad.targetid +
              '&adType=' + ad.adType +
              '&displayid=' + ad.displayid +
              '&async=true&flexibleOL=true&autoPadding=true&tagver=2.0.0';

            // Prebid bidder情報取得
            if (ad.pbjsAdUnit && ad.pbjsAdUnit.code) {
              var targeting = pbjs.getAdserverTargetingForAdUnitCode(ad.pbjsAdUnit.code);
              if (targeting && Object.keys(targeting).length) {
                adgSrc +=
                  '&gp_hb_pb=' + targeting.hb_pb +
                  '&gp_hb_adid=' + targeting.hb_adid +
                  '&gp_hb_bidder=' + targeting.hb_bidder +
                  '&gp_hb_size=' + targeting.hb_size;
              }
            }

            // APS bidder情報取得
            if (ad.apsSlot && ad.apsSlot.slotID && apsResponseBids) {
              var bid = apsResponseBids.find(function (bid) {
                return bid.slotID === ad.apsSlot.slotID;
              });
              if (bid) {
                adgSrc +=
                  '&apsamznbid=' + bid.amznbid +
                  '&apsamzniid=' + bid.amzniid;
              }
            }

            // scriptタグを挿入
            var adgscript = document.createElement('script');
            adgscript.src = adgSrc;
            document.getElementById(ad.elementid).appendChild(adgscript);
          } catch (e) {
            console.log(e);
          }
        })
      }

      // Prebid.jsリクエスト
      function requestBids() {
        pbjs.que.push(function () {
          pbjs.addAdUnits(pbjsAdUnits);
          pbjs.requestBids({
            bidsBackHandler: function () {
              headerBidderBack('prebid');
            }
          });
        });
        // APS bidリクエスト
        apstag.fetchBids({
          slots: apsSlots,
        }, function (bids) {
          apsResponseBids = bids;
          headerBidderBack('aps');
        });
      }
      requestBids();
      window.setTimeout(function () {
        sendAdserverRequest();
      }, TIMEOUT);
    }
    fetchHeaderBids();
  </script>
</head>
<body>
  <!-- 広告を配置する場所にdiv要素を追加 -->
  <div id="adg-div"></div>
  <!-- <div id='adg-div2'></div> -->
</body>
Last Updated: 5/24/2022, 7:54:39 PM

← 注意事項および共有事項 →