# Amazon Publisher Services - Ad Generation Integration [Web]

Amazon Publisher Services(APS)とAd Generation SDKをWebで連携するためのマニュアルとなります。

# サービスご利用にあたって

本連携については、Amazon Publisher Servicesの登録がお済みのうえ、行って頂くようお願いいたします。
Amazon Publisher Servicesのドキュメント等、公式サイトよりご確認お願いいたいます。

# Ad Generation管理画面での広告枠設定

対象枠でカスタムタグを作成します。
カスタムタグ認証情報として「Amazon Header Bidding」を選択します。
アドネットワーク名を入力する。こちらは表示にのみ使用されます。
Key/CPMを設定します。

# Amazon Publisher Services SDKの導入

Amazon Publisher ServicesのJavaScriptライブラリ(apstag)をロードし、 apstag.init() を実行します。
apstag.fetchBids()でを実行します。
apstag.fetchBids()のコールバック内で、Ad GenerationのJavaScriptタグの生成を行います。

<head>
  ...
  <script>
    // APSのJavaScriptライブラリをロード
    !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");

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

    // 広告情報
    var ads = [{
      slot: {
        slotID: '<ad-generation-adID>', // 広告枠ID
        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: 'aps-div', // 広告を設置するdivのID
      displayid: '1' // 1:inline 9:overlay
    },
    // {
    //   複数のbidリクエストを送信する場合、その数だけslotを追加してください。
    //   slot: {
    //     slotID: '<ad-generation-adID2>',
    //     slotName: '<ad-name2>',
    //     sizes: [[300, 250]]
    //   },
    //   adid: '<ad-generation-adID2>',
    //   targetid: '<adgeneration-targetID2>',
    //   adType: 'RECT',
    //   elementid: 'aps-div2',
    //   displayid: '1'
    // }
    ];

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

    // APS bidリクエスト
    apstag.fetchBids({
      slots: apsSlots,
      timeout: 2e3
    }, function (bids) {
      ads.forEach(function (ad) {
        try {
          // scriptタグを生成
          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';

          if (ad.slot && ad.slot.slotID) {
            var bid = bids.find(function (bid) {
              return bid.slotID === ad.slot.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);
        }
      });
    });
  </script>
  ...
</head>
<body>
  ...
  <!-- 広告を配置する場所にdiv要素を追加 -->
  <div id='aps-div'></div>
  <!-- <div id='aps-div2'></div> -->
  ...
</body>

# Google Ad Managerとの併用

apstag.fetchBids() の実行までは同様で、リクエストパラメーターにGoogle Ad Manager用のパラメーターを追加し、コールバック内の任意のタイミングでGoogle Ad Manager用のコードを実行してください。

apstag.fetchBids({
  slots: [

    ...

    {
        slotID: 'div-gpt-ad-1475102693815-0',
        slotName: '12345/box-1',
        sizes: [[300, 250], [300, 600]]
    },
    {
        slotID: 'div-gpt-ad-1475185990716-0',
        slotName: '12345/leaderboard-1',
        sizes: [[728 ,90]]
    },

    ...

  ],
  timeout: 2e3
}, function(bids) {

  ...

  /*
    Set apstag targeting on googletag,
    then trigger the first googletag request
    in googletag's disableInitialLoad integration
  */
  googletag.cmd.push(function(){
      apstag.setDisplayBids();
      googletag.pubads().refresh();
  });

  ...

});

# Prebid.jsとの併用

Prebid.jsとの併用についてはPrebid.js + Amamzon Publisher Services - Ad Generation Integrationをご確認ください。

← APS(Android) ADG > AdMob(iOS) →