Banner
Header bidding allows you to integrate LoopMe ad spot via Prebid.js technology if you already use it. For more details about Prebid.js please visit http://prebid.org/overview/intro.html (opens in a new tab). This solution allows you to run:
- Out-stream VAST/VPAID video
- MPU banner RichMedia and Static ads
Step 1. Prebid.js file
- Download the prebid.js file from here: https://docs.prebid.org/download.html (opens in a new tab)
- Make sure you've selected LoopMe adaptor to be included
- Download the configured package:
- Store the file on your server/site. You will need this path in the next step.
Step 2. Insert LoopMe tag
Insert LoopMe ad spot tag into your page. The example below uses the MPU size (300x250) ad spot.
...
var adUnits = [{
code: 'div-prebid',
mediaTypes: {
banner: {
sizes: [[300, 250]]
}
},
bids: [{
bidder: 'loopme',
params : {
ak : "3df93a0f34" //test ak, please replace to yours after the test
}
}]
}];
...
For more details on LoopMe adaptor parameters please see: http://prebid.org/dev-docs/bidders.html#loopme (opens in a new tab) If you don't have a test page you can use the code below in http://jsfiddle.net (opens in a new tab) Test page example:
<html>
<head>
<link rel="icon" type="image/png" href="/favicon.png">
<script async src="//www.googletagservices.com/tag/js/gpt.js"></script>
<script async src="REPLACE_WITH_THE_PATH_TO_THE_PREBID_JS_FROM_STEP_1"></script>
<script>
var div_1_sizes = [
[300, 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: 'loopme',
params: {
ak: '3df93a0f34'
}
}]
}
];
// ======== 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();
});
</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>
</body>
</html>
More examples of integration Prebid.js adaptors can be seen here: http://prebid.org/dev-docs/examples/basic-example.html (opens in a new tab)
Step 3. Confirm you see the test ad
If you see the test video:
then you can replace the test value '3df93a0f34' in the LoopMe tag with your real app key received from LoopMe account manager and consider the tech part of the integration complete.