Header Bidding/Prebid.js Implementation
Header Bidding
Introduction:
Header Bidding also known as pre-bidding is a process which exposes each and every ad slot to programmatic demand before calling the Ad Server. Header bidding allow publishers to earn more revenue from the ad space which they sell using the auction-based programmatic ad systems. This will make you aware of the real value of your direct and indirect inventories in real time.
IncrementX Ad Exchange allows you to maximize demand competition for your publisher inventories by giving a way for demand partners to bid on the impression at the same time. Following displays the header bidding example:
Image Courtesy: clearcode.com
Advantages for Publishers:
Following are the advantages of header bidding for publishers:
« Higher CPM or Revenue: Header bidding has reported magnificent increase in the publisher CPMs and revenue. In many cases the publishers announce that the header bidding has double their revenues they had generated earlier through SSPs by using traditional methods.
« Advertiser Competition: Open competition might help publishers get a clear idea of the variations in demand for their inventory and discloses the higher value in inventory that was underrated earlier.
« Transparency: One of header bidding’s key value for publishers is the assurance to eliminate middlemen and ease close relationships with demand sources. It also provides the increased transparency about the demand which publishers are getting from each of their partners and also facilitates clear head-to-head comparisons between vendors.
« Quick Load Time: Header bidding promise a better user experience and a faster load time for the ads themselves on the page. In the waterfall approach, the passbacks between demand partners and the ad server could be time-consuming, if the primary or even secondary demand source was not able to fill the ad slot.
In header bidding, the header tag secures the impression and retrieves the ad content as the page loads, so that it is prepared to load the ad into the slot as the user scrolls and the ad slot comes in the view.
Following figure describes the step-by-step working of header bidding:
Working of Header Bidding
Image Courtesy: monetizemore.com
Prebid.js Implementation
Following are the steps to build and deploy the project requirements:
- Following tools are used to build and deploy the project:
-
gulp
-
npm
-
nodejs
Note: To check nodejs version use the command node -v
-
- You can clone the repository or download zip prebid application from the following link:
https://github.com/prebid/Prebid.js
-
Click Clone or Download.
- Refer the steps given in the README.md file for building the application.
-
Note, in gulp it is necessary to have nodejs -v greater than 4.x.
-
To build use the following command:
gulp build –adapters list-of-adapters.json
Note: The adapters.json file is configurable. The configuration of partners can be added or removed depending on the publisher need. -
To ensure the incrementx adapter is plugged in with the build project. We need to check the following path:
Prebid.js folder src/adapters:incrementx.js
-
The build prebid.js file is to be hosted in the publisher domain.
-
Following is the sample prebid configuration code:
var pbjs = pbjs || {}; //Initialization
pbjs.que = pbjs.que || [];
pbjs.que.push(function() {
var adUnits = [{
code: ‘test_prebid’, //inventory id
sizes: [[300, 250]], //sizes accepted for that inventory
bids: [{
bidder: ‘Other Bidders’,
//bidder
params: { placementId: ‘XXXXX’ }
},
{ bidder: ‘incrementx’,
params: { placementId: ‘VZ123’ }
}]
}];
pbjs.addAdUnits(adUnits);
pbjs.requestBids({
bidsBackHandler: function(bidResponses) { //win response
var targetingParams = pbjs.getAdserverTargeting();
var container = document.getElementById(‘test_prebid’);
container.innerHTML = JSON.stringify(targetingParams);
}
});
});
-
Header Bidding Integration with DFP
- Prebid has internal configuration for handling DFP request, but configuration and changes in DFP are necessary. For sample DFP configuration, please visit: http://prebid.github.io/adops/step-by-step.html
Note:
|
DFP Integration Code:
function sendAdserverRequest() { if (pbjs.adserverRequestSent) return; pbjs.adserverRequestSent = true; googletag.cmd.push(function() { pbjs.que.push(function() { pbjs.setTargetingForGPTAsync(); googletag.pubads().refresh(); }); }); } |
Enable AdSense and AdExchange to participate in Prebid:
For Adx or AdSense to participate in Prebid auction we require the following setting in DFP:
- Enable the third party services.
- Enter the credentials of Adx or AdSense.
- Select Dynamic allocation when adding Line Items.