본문으로 건너뛰기

헤더 비딩 적용

Prebid.js, Amazon UAM을 통한 HeaderBidding을 지원합니다.

1. Prebid.js 연동​

adSlot.setPbjsBidTargeting(pbjsTargeting)을 사용하여 Prebid.js 비딩 응답 결과를 설정합니다.

<script async src="https://ssl.pstatic.net/tveta/libs/glad/prod/gfp-core.js"></script>
<script async src="//acdn.adnxs.com/prebid/not-for-prod/prebid.js"></script>
<script>
  // NAM SDK 초기화 & adSlot 설정
  window.gladsdk = window.gladsdk || { cmd: [] };
  window.gladsdk.cmd.push(function () {
    window.gladsdk.defineAdSlot({
      adUnitId: 'GFP ad slot adUnitId',
      adSlotElementId: 'GFP ad slot adSlotElementId',
    });
    window.gladsdk.defineAdSlot({
      adUnitId: 'GFP ad slot adUnitId',
      adSlotElementId: 'GFP ad slot adSlotElementId',
    });
  });

  // Prebid의 비딩 요청 타임아웃
  var PREBID_TIMEOUT = 1000;
  // Prebid를 이용한 광고 렌더링 전체의 타임아웃
  var FAILSAFE_TIMEOUT = 3000;

  // pbjs 라이브러리 초기화
  var pbjs = pbjs || {};
  pbjs.que = pbjs.que || [];

  // Prebid 비딩 유닛 설정
  var pbAdUnits = [
    {
      code: 'GFP ad slot adSlotElementId', // example: div-1
      mediaTypes: {
        banner: {
          sizes: [
            [width, height],
            [width, height],
          ], //example: [[300,250], [300,600]]
        },
      },
      bids: [
        {
          bidder: 'appnexus',
          params: {
            placementId: 13144370,
          },
        },
      ],
    },
    {
      code: 'GFP ad slot adSlotElementId', // example: div-2
      mediaTypes: {
        banner: {
          sizes: [[width, height]], //example: [[728,90]]
        },
      },
      bids: [
        {
          bidder: 'appnexus',
          params: {
            placementId: 13144370,
          },
        },
      ],
    },
  ];

  // Prebid.js를 이용한 렌더링 전체에 대한 타이머
  var timer = setTimeout(function () {
    window.gladsdk.cmd.push(function () {
      window.gladsdk.refreshAdSlots();
    });
  }, FAILSAFE_TIMEOUT);

  // Prebid 비딩 요청
  pbjs.que.push(function () {
    pbjs.addAdUnits(pbAdUnits);
    pbjs.requestBids({
      bidsBackHandler: function () {
        window.gladsdk.cmd.push(function () {
          clearTimer(timer);

          var bidAllUnits = pbjs.getBidResponses();

          // Prebid의 비딩 결과를 각 광고 유닛별로 NAM SDK adSlot에 설정
          Object.keys(bidAllUnits).forEach(function (adSlotElementId) {
            var pbjsBids = pbjs.getBidResponsesForAdUnitCode(adSlotElementId).bids;

            var adSlot = window.gladsdk.findAdSlot(adSlotElementId);
            adSlot.setPbjsBidTargeting(pbjsBids);
          });

          // NAM SDK의 모든 광고 refresh
          window.gladsdk.refreshAdSlots();
        });
      },
      timeout: PREBID_TIMEOUT,
    });
  });
</script>

2. Amazon UAM 연동​

adSlot.setApsBidTargeting(apsTargeting)을 사용하여 Amazon UAM 비딩 응답 결과를 설정합니다.

<script async src="https://ssl.pstatic.net/tveta/libs/glad/prod/gfp-core.js"></script>
<script>
  //apstag.js 로드
  !(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');

  // NAM SDK 초기화 & adSlot 설정
  window.gladsdk = window.gladsdk || { cmd: [] };
  window.gladsdk.cmd.push(function () {
    window.gladsdk.defineAdSlot({
      adUnitId: 'GFP ad slot adUnitId',
      adSlotElementId: 'GFP ad slot adSlotElementId',
    });
    window.gladsdk.defineAdSlot({
      adUnitId: 'GFP ad slot adUnitId',
      adSlotElementId: 'GFP ad slot adSlotElementId',
    });
  });

  // apstag.js 라이브러리 초기화
  apstag.init({
    pubID: 'xxxx', // APS Tag pub ID
  });
  // apstag.js 비딩 요청
  apstag.fetchBids(
    {
      slots: [
        {
          slotID: 'GFP ad slot adSlotElementId',
          slotName: 'GFP ad slot adUnitId',
          sizes: [
            [width, height],
            [width, height],
          ], //example: [[300,250], [300,600]]
        },
        {
          slotID: 'GFP ad slot adSlotElementId',
          slotName: 'GFP ad slot adUnitId',
          sizes: [[width, height]], //example: [[728,90]]
        },
      ],
      timeout: 2e3,
    },
    function (apsBids) {
      window.gladsdk.cmd.push(function () {
        // apsbid.js의 비딩 결과를 각 광고 유닛별로 NAM SDK adSlot에 설정
        apsBids.forEach(function (apsBid) {
          var adSlot = window.gladsdk.findAdSlot(apsBid.slotID);
          adSlot.setApsBidTargeting(apsBid);
        });

        // NAM SDK의 모든 광고 refresh
        window.gladsdk.refreshAdSlots();
      });
    }
  );
</script>

3. Prebid.js 및 Amazon UAM 통합 연동​

통합 연동 예제​

<head>
  <script async src="https://ssl.pstatic.net/tveta/libs/glad/prod/gfp-core.js"></script>
  <script async src="//acdn.adnxs.com/prebid/not-for-prod/prebid.js"></script>
  <script>
    //apstag.js 로드
    !(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');

    // NAM SDK 초기화 & adSlot 설정
    window.gladsdk = window.gladsdk || { cmd: [] };
    window.gladsdk.cmd.push(function () {
      window.gladsdk.defineAdSlot({
        adUnitId: 'PC_Viewer_end_nativebigbanner_600x500_image',
        adSlotElementId: 'div-1',
      });
    });

    // apstag.js 라이브러리 초기화
    apstag.init({
      pubID: 'b666510a-742f-41ea-b848-3cb7b48ca273',
      bidTimeout: 2e3,
    });

    // pbjs 라이브러리 초기화
    var pbjs = pbjs || {};
    pbjs.que = pbjs.que || [];

    var FAILSAFE_TIMEOUT = 2000;

    pbjs.que.push(function () {
      // pbjs.setConfig({ useBidCache: false });
      pbjs.addAdUnits([
        {
          code: 'div-1',
          mediaTypes: {
            banner: {
              sizes: [
                [300, 250],
                [300, 600],
              ],
            },
          },
          bids: [
            {
              bidder: 'appnexus',
              params: {
                placementId: 13144370,
              },
            },
            {
              bidder: 'criteo',
              params: {
                networkId: 6910,
                zoneId: 1402231,
              },
            },
          ],
        },
      ]);
    });

    // Prebid 비딩 요청
    // GFP 개별 adSlot 단위로 Prebid.js 및 Amazon UAM 통합 비딩 요청을 관리하는 BidManager 모듈 초기화
    var bidManager = new BidManager({
      adSlotInfo: {
        adUnitId: 'PC_Viewer_end_nativebigbanner_600x500_image',
        adSlotElementId: 'div-1',
        sizes: [
          [300, 250],
          [300, 600],
        ],
      },
      timeout: FAILSAFE_TIMEOUT,
      bidsBackHandler: function () {
        // Prebid.js 및 Amazon UAM 비딩 결과를 받았거나 전체 타임아웃이 초과한 경우 콜백 호출
      },
    });

    /** Executes a parallel auction with prebid **/
    function executeParallelAuctionAlongsidePrebid() {
      bidManager.requestBids();
    }
  </script>
</head>
<body style="padding:0;margin:0;">
  <button onclick="executeParallelAuctionAlongsidePrebid()">fetchBids</button>
  <div id="div-1"></div>
</body>
  • BidManager 코드 샘플
    • GFP 개별 adSlot 단위로 Prebid.js 및 Amazon UAM 통합 비딩 요청을 지원하기 위한 유틸리티성 모듈로 반드시 해당 모듈 샘플 코드 형태로 적용해야할 필요는 없습니다.
    • 매체별 필요에 따라 위의 개별 헤더비딩 라이브러리 별 샘플 코드 및 BidManager 코드를 참고하여 비딩 요청 및 비딩 파라미터 응답 결과를 GFP API를 통해 전달 및 광고 요청을 해주시면 됩니다.
export default class BidManager {
  constructor(config) {
    const {
      adSlotInfo: { adUnitId, adSlotElementId },
      timeout,
      bidsBackHandler,
    } = config;

    this.adUnitId = adUnitId;
    this.adSlotElementId = adSlotElementId;
    this.timeout = timeout || 2000;
    this.bidsBackHandler = bidsBackHandler;
  }

  requestBids() {
    const requestTimeoutForBids = this.setRequestTimeoutForBids();
    const requestBidsAll = Promise.all([this.setRequestBidsForAps(), this.setRequestBidsForPbjs()]);

    Promise.race([requestBidsAll, requestTimeoutForBids])
      .then(function (result) {
        console.debug('success');
        clearTimeout(this.id);
      })
      .catch(function (err) {
        console.debug('fail');
        console.debug(err); //timeout!
      })
      .finally(function () {
        this.refreshAds();
      });
  }

  refreshAds() {
    window.gladsdk.cmd.push(function () {
      console.debug('refreshAds');
      var adSlot = window.gladsdk.findAdSlot(this.adSlotElementId);
      window.gladsdk.refreshAdSlots([adSlot]);
    });

    this.bidsBackHandler();
  }

  setRequestBidsForAps() {
    return new Promise(function (resolve, reject) {
      // APS request
      apstag.fetchBids(
        {
          slots: [
            {
              slotID: this.adSlotElementId,
              slotName: this.adUnitId,
              sizes: [
                [300, 250],
                [300, 600],
              ],
            },
          ],
        },
        function (apsBids) {
          window.gladsdk.cmd.push(function () {
            console.debug('aps bidResponse', apsBids);

            for (var apsBid of apsBids) {
              var adSlot = window.gladsdk.findAdSlot(apsBid.slotID);
              adSlot.setApsBidTargeting(apsBid);
            }
            resolve(apsBids);
          });
        }
      );
    });
  }

  setRequestBidsForPbjs() {
    return new Promise(function (resolve, reject) {
      // put prebid request here
      pbjs.que.push(function () {
        pbjs.requestBids({
          adUnitCodes: [this.adSlotElementId],
          bidsBackHandler: function () {
            window.gladsdk.cmd.push(function () {
              var pbjsBids = pbjs.getBidResponsesForAdUnitCode(this.adSlotElementId).bids;
              console.debug('pbjs bidResponse', pbjsBids);
              // console.debug(pbjs.getBidResponses())

              var adSlot = window.gladsdk.findAdSlot(this.adSlotElementId);
              adSlot.setPbjsBidTargeting(pbjsBids);
              resolve(pbjsBids);
            });
          },
          timeout: this.timeout,
        });
      });
    });
  }

  setRequestTimeoutForBids() {
    return new Promise(function (resolve, reject) {
      this.id = setTimeout(function () {
        clearTimeout(this.id);
        reject('timeout');
      }, this.timeout);
    });
  }
}