6b - Header Bidding with Prebid.js (part 2)

Previous step

Read the part 1 article 6a - Header Bidding with Prebid.js (part 1) which includes:

  • an overview of Prebid.js
  • information about activation
  • the setup to be done in Smart AdServer's user interface

Client-side integration on publisher site

The website prebid.org provides comprehensive documentation about prebid.js. The most relevant pages are:

Bid price adjustment

Smart AdServer returns the CPM as a gross CPM (before any fee is taken). However, you may work with other bidders who return net CPMs (after fees are taken). This situation sets Smart AdServer's bids at an unfair advantage.

To prevent this distortion, prebid.js allows you to adjust Smart AdServer's CPM.

Available resources:

You can also use bid price adjustment if the revenue share (the percentage of the CPM kept by Smart AdServer) for deals is different from the revenue share used for open auctions: you can adjust the bid price in case Smart AdServer sends deal information (read about enabling deals here.)

Currencies

With the "currency" bid parameter (optional parameter), you can retrieve bids in a specific currency. Currency codes must follow the ISO 4217 standard.

If left undefined, bids are returned in the default currency "USD".  

The sample below shows an integration of Smart AdServer as a bidder, using DFP as an ad server. You can copy/paste it and then register your own bid parameters (ad units), define your own timout etc.

Sample (click to expand)

In this sample:

  • Prebid Config Section
  • This section is used to set the timeout and to register your ad units on the page. The key code is the identifier of this ad unit. When using Google Publisher Tag, that ad unit’s slot element should be used here.
    The sizes specify the width and height values supported by this ad unit. You can add multiple sizes here (e. g. [[300, 250], [300, 300]]). The bid parameters consist of the bidder, domain, siteId, pageId, formatId. To get these Ids, a setup needs to be done in Smart AdServer's user interface (read part 1 article here).
  • Prebid Boilerplate Section
  • Includes static code - no need to change
  • Google Tag
  • Includes asynchronous loading of gpt.js and GPT configuration (full documentation here)
<html>
<head>
  <!-- Prebid Config Section START -->
  <!-- Make sure this is inserted before your GPT tag -->
  <script> 
    var PREBID_TIMEOUT = 1000;
    var adUnits = [{
        code: 'div-gpt-ad-1484867557615-0',
        sizes: [[300, 250]],
        bids: [{
            bidder: 'smartadserver',
            params: {
               domain: 'http://prg.smartadserver.com',
             
              siteId: '132432',
               pageId: '742455',
               formatId:'24977'
            }
        }]
    
    }];
    
    var pbjs = pbjs || {};
    pbjs.que = pbjs.que || [];
  </script>
  <!-- Prebid Config Section END -->
  
  <!-- Prebid Boilerplate Section START. No Need to Edit. -->
  <script type="text/javascript" src="prebid.js" async></script>
  <script>
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
    googletag.cmd.push(function() {
        googletag.pubads().disableInitialLoad();
    });
    pbjs.que.push(function() {
        pbjs.addAdUnits(adUnits);
        pbjs.requestBids({
            bidsBackHandler: sendAdserverRequest
        });
    });
    function sendAdserverRequest() {
        if (pbjs.adserverRequestSent) return;
        pbjs.adserverRequestSent = true;
        googletag.cmd.push(function() {
            pbjs.que.push(function() {
                pbjs.setTargetingForGPTAsync();
                googletag.pubads().refresh();
            });
        });
    }
    setTimeout(function() {
        sendAdserverRequest();
    }, PREBID_TIMEOUT);
  </script>
  <!-- Prebid Boilerplate Section END -->
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>
<script>
  googletag.cmd.push(function() {
    googletag.defineSlot('/45405203/hb_300x250', [300, 250], 'div-gpt-ad-1484867557615-0').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
  });
</script>
</head>
<body>
<h2>Prebid.js Test</h2>
<h5>Div-1</h5>
<!-- /45405203/hb_300x250 -->
<div id='div-gpt-ad-1484867557615-0' style='height:250px; width:300px;'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1484867557615-0'); });
</script>
</div>
</body>
</html>

Testing the implementation

To test your implementation, you can use the following snippet; it logs responses in the console, such as (adId, bidder, cpm etc.)

var responses = pbjs.getBidResponses();
var output = [];
for (var adunit in responses) {
    if (responses.hasOwnProperty(adunit)) {
        var bids = responses[adunit].bids;
        for (var i = 0; i < bids.length; i++) {
            var b = bids[i];
            output.push({
                'adunit': adunit, 'adId': b.adId, 'bidder': b.bidder,
                'time': b.timeToRespond, 'cpm': b.cpm, 'msg': b.statusMessage
            });
        }
    }
}
if (output.length) {
    if (console.table) {
        console.table(output);
    } else {
        for (var j = 0; j < output.length; j++) {
            console.log(output[j]);
        }
    }
} else {
    console.warn('NO prebid responses');
}

 

This screenshot shows an example output of the snippet:

Setup in publisher ad server

The Ad Operations team should start with the Before you Start page.

A full step-by-step example (with DFP as publisher ad server) is available here.

Note
The Smart AdServer adapter also supports deals. Read here to learn how to enable deals and set up line items (DFP example).

Limitations

Smart AdServer supports Header Bidding with Prebid.js for desktop and mobile web only. Mobile SDKs and Video instream are not supported!

Was this article helpful?
0 out of 0 found this helpful
Powered by Zendesk