Skip to main content

Apply Header Bidding

HeaderBidding is supported via Prebid.js and Amazon UAM.

1. Prebid.js integration​

Use adSlot.setPbjsBidTargeting(pbjsTargeting) to set the Prebid.js biding response result.

<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>
  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',
    });
  });

  var PREBID_TIMEOUT = 1000;
  var FAILSAFE_TIMEOUT = 3000;

  var pbjs = pbjs || {};
  pbjs.que = pbjs.que || [];

  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,
          },
        },
      ],
    },
  ];

  var timer = setTimeout(function () {
    window.gladsdk.cmd.push(function () {
      window.gladsdk.refreshAdSlots();
    });
  }, FAILSAFE_TIMEOUT);

  // Request for Prebid Bidding
  pbjs.que.push(function () {
    pbjs.addAdUnits(pbAdUnits);
    pbjs.requestBids({
      bidsBackHandler: function () {
        window.gladsdk.cmd.push(function () {
          clearTimer(timer);

          var bidAllUnits = pbjs.getBidResponses();

          Object.keys(bidAllUnits).forEach(function (adSlotElementId) {
            var pbjsBids = pbjs.getBidResponsesForAdUnitCode(adSlotElementId).bids;

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

          window.gladsdk.refreshAdSlots();
        });
      },
      timeout: PREBID_TIMEOUT,
    });
  });
</script>

2. Amazon UAM integration​

adSlot.setApsBidTargeting(apsTargeting) to set the Amazon UAM bidding response result.

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

  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.init({
    pubID: 'xxxx', // APS Tag pub ID
  });
  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 () {
        apsBids.forEach(function (apsBid) {
          var adSlot = window.gladsdk.findAdSlot(apsBid.slotID);
          adSlot.setApsBidTargeting(apsBid);
        });

        window.gladsdk.refreshAdSlots();
      });
    }
  );
</script>

3. Integration of Prebid.js and Amazon UAM​

Integration example​

<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>
    !(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');

    window.gladsdk = window.gladsdk || { cmd: [] };
    window.gladsdk.cmd.push(function () {
      window.gladsdk.defineAdSlot({
        adUnitId: 'PC_Viewer_end_nativebigbanner_600x500_image',
        adSlotElementId: 'div-1',
      });
    });

    apstag.init({
      pubID: 'b666510a-742f-41ea-b848-3cb7b48ca273',
      bidTimeout: 2e3,
    });

    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,
              },
            },
          ],
        },
      ]);
    });

    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 () {
        // callback when Prebid.js and Amazon UAM bidding results are received or the overall timeout is exceeded
      },
    });

    /** 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 sample code
    • This BidManager sample code is a utility module to support integrated bidding requests of Prebid.js and Amazon UAM each GFP ad slot. It is not mandatory to apply in your code as the below same.
    • Depending on the needs of each media, refer to the sample code of BidManager and each header bidding library above, request a bidding first and then by using NAM SDK APIs set a bidding response payload for the ad slot and request the ad.
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);
    });
  }
}