Header Bidding Implementation Guide
How to use Header bidding
What is header bidder - a programmatic method for maximizing the yield of the publishers enabling them to receive bids for their inventory from multiple ad exchanges or DSP’s simultaneously. SmartyAds system utilizes only strong and reliable marketplaces with:
- Dynamic pricing that prevents CPM-related revenue losses
- Better bidding opportunities due broader buyer demand
- Intelligent decision making that smoothly collaborates with ad server
How it works?
- A user visits the page containing Header Bidder’s code, the script redirects the request to the Ad Exchange.
- RTB platform, gathering a large number of buyers on Ad Exchange platform, enables them to bid on this impression at the same time.
- The ad request along with the highest bid gets transferred to the ad server. Your ad server collects eligible items.
- The ad server selects the highest CPM and transfers it to the Ad Exchange to make sure that price can’t be beaten.
- Impression is served for the buyer who offered the highest bid.
Things to be done
Add prebid code to the page
- Add Prebid to your page so it can be loaded on the next impression. (See example#prebid example below)
- Configure Prebid.js and set up SmartyAds SSP adapter.
Call bidders asynchronously
- As the page loads, Prebid.js asynchronously calls all bidders to request how much they can pay for the impression. The asynchronous call means the content on the page continues to render without interruption.
Set timer on the page
- To prevent bidders from taking too long, Prebid.js enables you to set a timer to control how long the ad server should wait for the bidders response. If the auction exceeds the timeout, it will be skipped and the impression will be sent to the ad server.
Make ad server requests with key-value targeting
-
When bids are received, Prebid.js adds the price and creative ID to your ad server’s call as a set of query string parameters.
Target the line items
-
Within your ad server, line items are set up to target various bid prices, allowing the bidders’ programmatic demand to compete with other line items or integrated exchanges (like Google Ad Exchange) based on price.
Render the creative
- A small snippet of JavaScript is set up as a creative on each Prebid line item. When a programmatic line item is picked by your ad server, the creative JS tells Prebid.js which bidder to serve.
Example of Prebid code
- Paste auction script itself to the header section. Replace 'Placementid' and 'Size' as it is set on the SmartyAds platform):
<script>
var adUnits = [{
code: 'placementid_132',
sizes: [[300, 250]],
bids: [{
bidder: 'smartyads',
params: {
placement_id: 132
}
}]
},
{
code: 'placementid_133',
sizes: [[728, 90]],
bids: [{
bidder: 'smartyads',
params: {
placement_id: 133
}
}]
},
{
code: 'placementid_134',
sizes: [[300, 600]],
bids: [{
bidder: 'smartyads',
params: {
placement_id: 134
}
}]
},
{
code: 'placementid_135',
sizes: [[468, 60]],
bids: [
{
bidder: 'smartyads',
params: {
placement_id: 135
}
}]
}
];
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];
pbjs.que.push(function() {
pbjs.addAdUnits(adUnits);
pbjs.requestBids({
bidsBackHandler: function(bidResponses) {
var ads = pbjs.getHighestCpmBids();
for (var i = 0; i < ads.length; i++) {
var oneDiv = document.getElementById(ads[i]['adUnitCode']);
var iframe = document.createElement("iframe");
oneDiv.appendChild(iframe);
pbjs.renderAd(iframe.contentWindow.document, ads[i]['adId']);
}
}
});
});
</script>
Add tags below to the body section.
Paste div scripts to the ad placements on the website. ‘Div id’ should be equal to "placementid" name. (Example: if code is 'placementid_132', then div id="placementid_132").
<div id="placementid_132"></div>
<div id="placementid_133"></div>
<div id="placementid_134"></div>
<div id="placementid_134"></div>
EXAMPLE: <script src="/path/to/lib/prebid.js"></script>).
See report
icon of the certain placement to open the report for that placement.