Part 2: Technical Implementation
Edited
Quick Start
The easiest way to get started with Header-Bidding is to use the following example.
<script async src="//www.googletagservices.com/tag/js/gpt.js"></script>
<script src="//connectad.io/stage/adapter/prebid2270.js" async></script>
<script>
var div_1_sizes = [
[300, 250],
[300, 600]
];
var div_2_sizes = [
[728, 90],
[970, 250]
];
var PREBID_TIMEOUT = 1000;
var FAILSAFE_TIMEOUT = 3000;
var adUnits = [
{
code: '/19968336/header-bid-tag-0',
mediaTypes: {
banner: {
sizes: div_1_sizes
}
},
bids: [{
bidder: 'connectad',
params: {
siteId: 123456,
networkId: 123456,
bidfloor: 0.10
}
}]
},
{
code: '/19968336/header-bid-tag-1',
mediaTypes: {
banner: {
sizes: div_2_sizes
}
},
bids: [{
bidder: 'connectad',
params: {
siteId: 123456,
networkId: 123456,
bidfloor: 0.10
}
}]
}
];
// ======== DO NOT EDIT BELOW THIS LINE =========== //
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
googletag.cmd.push(function() {
googletag.pubads().disableInitialLoad();
});
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];
pbjs.que.push(function() {
pbjs.addAdUnits(adUnits);
pbjs.requestBids({
bidsBackHandler: initAdserver,
timeout: PREBID_TIMEOUT
});
});
function initAdserver() {
if (pbjs.initAdserverSet) return;
pbjs.initAdserverSet = true;
googletag.cmd.push(function() {
pbjs.que.push(function() {
pbjs.setTargetingForGPTAsync();
googletag.pubads().refresh();
});
});
}
// in case PBJS doesn't load
setTimeout(function() {
initAdserver();
}, FAILSAFE_TIMEOUT);
googletag.cmd.push(function() {
googletag.defineSlot('/19968336/header-bid-tag-0', div_1_sizes, 'div-1').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
googletag.cmd.push(function() {
googletag.defineSlot('/19968336/header-bid-tag-1', div_2_sizes, 'div-2').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
</head>
<body>
<h2>Basic 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>1. Register bidder tag IDs
In a simple JSON config, define a mapping of the bidders’ tag Ids to your ad units. Load prebid.js library async. Call pbjs.requestBids() to send header bidding requests async to all bidders you’ve specified.
<script src="//connectad.io/stage/adapter/prebid2270.js" async></script>pbjs.que.push(function() {
var adUnits = [{
code: "div-gpt-ad-1438287399331-0",
mediaTypes: {
banner: {
sizes: div_1_sizes
}
},
bids: [{
bidder: "connectad",
params: {
networkId: '10047',
siteId: '123456'
}
}, {
bidder: 'TO ADD',
params: { tagId: 'TO ADD' }
}, {
bidder: "TO ADD",
params: { placementId: "TO ADD" }
}]
}];
pbjs.addAdUnits(adUnits);
pbjs.requestBids({
bidsBackHandler: function() {
// callback when requested bids are all back
}
});
});Good to know
code = Google DFP AdSlot DIV-ID
mediatype.banner.sizes = Requested AdSlot sizes
bids = Header-Bidding Adapter Configuration
siteID = please ask your ConnectAd Accounter Manager for your siteID
2. Set the ad server timeout
Define the timeout to let your ad server wait for a few hundred milliseconds, so the bidders can respond with bids.
PREBID_TIMEOUT = 1000;
function sendAdserverRequest() {
(function() {
// Send ad server ad request here
})();
};
setTimeout(initAdserver, PREBID_TIMEOUT);3. Set bid targeting
Call the helper function setTargetingForGPTAsync() to handle all the targeting for all bidders in your Google DFP Setup.
pbjs.que.push(function() {
pbjs.setTargetingForGPTAsync();
});Working Demo
To get a better understanding how Header-Bidding works, please find below a working ConnectAd/Google DFP integration.
<html>
<head>
<link rel="icon" type="image/png" href="/favicon.png">
<script async src="//www.googletagservices.com/tag/js/gpt.js"></script>
<script src="//connectad.io/stage/adapter/prebid2270.js" async></script>
<script>
var div_1_sizes = [
[300, 250],
[300, 600]
];
var div_2_sizes = [
[728, 90],
[970, 250]
];
var PREBID_TIMEOUT = 1000;
var FAILSAFE_TIMEOUT = 3000;
var adUnits = [
{
code: '/19968336/header-bid-tag-0',
mediaTypes: {
banner: {
sizes: div_1_sizes
}
},
bids: [{
bidder: 'connectad',
params: {
siteId: 123456,
networkId: 123456,
bidfloor: 0.10
}
}]
},
{
code: '/19968336/header-bid-tag-1',
mediaTypes: {
banner: {
sizes: div_2_sizes
}
},
bids: [{
bidder: 'connectad',
params: {
siteId: 123456,
networkId: 123456,
bidfloor: 0.10
}
}]
}
];
// ======== DO NOT EDIT BELOW THIS LINE =========== //
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
googletag.cmd.push(function() {
googletag.pubads().disableInitialLoad();
});
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];
pbjs.que.push(function() {
pbjs.addAdUnits(adUnits);
pbjs.requestBids({
bidsBackHandler: initAdserver,
timeout: PREBID_TIMEOUT
});
});
function initAdserver() {
if (pbjs.initAdserverSet) return;
pbjs.initAdserverSet = true;
googletag.cmd.push(function() {
pbjs.que.push(function() {
pbjs.setTargetingForGPTAsync();
googletag.pubads().refresh();
});
});
}
// in case PBJS doesn't load
setTimeout(function() {
initAdserver();
}, FAILSAFE_TIMEOUT);
googletag.cmd.push(function() {
googletag.defineSlot('/19968336/header-bid-tag-0', div_1_sizes, 'div-1').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
googletag.cmd.push(function() {
googletag.defineSlot('/19968336/header-bid-tag-1', div_2_sizes, 'div-2').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
</head>
<body>
<h2>Basic 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>
</body>
</html>