Publishers love Header Bidding. Content-Driven Advertising displays ads relevant to published content. Content-Driven Header Bidding combines both to display header bidding ads relevant to page content. Here, we describe how to do Content-Driven Header Bidding using Prebid.js.
Publisher
Here is a publisher page that uses Content-Driven Header Bidding.
<html>
<head>
<meta name="description" content="Big Ten reporters pick Michigan to win league title in 2019. Big Ten reporters pick Michigan to win league title in 2019. The annual preseason poll was conducted by Cleveland.com and includes the results from 34 respondents">
<link rel="icon" type="image/png" href="/favicon.png">
<script async src="//www.adrelevantis.com/js/dev/prebid.js"></script>
<script async src="//www.googletagservices.com/tag/js/gpt.js"></script>
<script src="//www.adrelevantis.com/js/contentdriventag.js"></script>
<script>
var div_1_sizes = [
[300, 250],
[300, 600]
];
var div_2_sizes = [
[970, 250]
];
var div_3_sizes = [
[300, 600],
[728, 90],
[970, 250]
];
var PREBID_TIMEOUT = 1000;
var FAILSAFE_TIMEOUT = 3000;
var adUnits = [
{
code: '/21901351985/header-bid-tag-0',
mediaTypes: {
banner: {
sizes: div_1_sizes
}
},
bids: [{
bidder: 'adrelevantis',
params: {
placementId: 13144370,
cpm: 0.50
}
}]
},
{
code: '/21901351985/header-bid-tag-1',
mediaTypes: {
banner: {
sizes: div_2_sizes
}
},
bids: [{
bidder: 'adrelevantis',
params: {
placementId: 13144370,
cpm: 0.50
}
}]
},
{
code: '/21901351985/header-bid-tag-2',
mediaTypes: {
banner: {
sizes: div_3_sizes
}
},
bids: [{
bidder: 'adrelevantis',
params: {
placementId: 13144370,
cpm: 0.50
}
},
{
bidder: 'appnexus',
params: {
placementId: 13144370
}
}]
}
];
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
googletag.cmd.push(function() {
googletag.pubads().disableInitialLoad();
});
</script>
<script>
var adDivIds = ['div-1','div-2','div-3'];
document.addEventListener("DOMContentLoaded", function(event){ adrtags("D435C107A8844E15BAA5D4A9B7D94FC5", adUnits, adDivIds); });
</script>
</head>
<body>
<h2>Content-Driven Prebid.js Example</h2>
<h5>Div-1</h5>
<div id='div-1'>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.display('div-1');
});
</script>
</div>
<br>
<h5>Div-2</h5>
<div id='div-2'>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.display('div-2');
});
</script>
</div>
<h5>Div-3</h5>
<div id='div-3'>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.display('div-3');
});
</script>
</div>
</body>
</html>The code basically is the same as the example http://prebid.org/dev-docs/examples/basic-example.html with the following difference.
The code in //www.adrelevantis.com/js/dev/prebid.js is built with adrelevantisBidAdapter.
The adrgoogletags from contentidentifierwithgoogletag.js is called when DOMContentLoaded occurs. This code extracts meta description or body content and returns IAB Categories and ranked keywords of the content. The IAB Categories and ranked keywords are configured as First Party Data of the bidder and are sent in bid request.
More examples can be found at https://github.com/ghguo/adrhb-examples.
Supply-Side Platform (SSP)
The bid request is sent to SSPs. The SSPs relay the IAB Categories and keywords along with other request data to DSP Adservers. The DSPs can bid based on the IAB Categories and keywords. The SSPs receive the bids and send them back to the page.
Here is a Content-Driven Supply-Side Platform: https://github.com/ghguo/adrssp.
Demand-Side Platform (DSP)
A DSP adserver needs to enable advertisers to target ads to IAB Categories and keywords. When bid request with IAB Categories and keywords of the published content comes, it matches ads based on the IAB Categories and keywords.
Here is an adserver that provides content target capability: https://github.com/ghguo/revive411.
Improve Ad Relevancy 