Header bidding ad demo
Sample implementation
#player {
max-width: 40em;
width: 100%;
float: left;
}
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];
const BIDDER1_PROVIDER = "appnexus";
const BIDDER1_PLACEMENT_ID = "13232361";
var adtag = null
var timeout = 2000
window.prebid_fetcher = function() {
if (adtag) return Promise.resolve(adtag)
return new Promise(function (resolve) {
setTimeout(function() {
resolve(adtag)
}, timeout)
})
}
var videoAdUnit = {
code: "video1",
sizes: [640,480],
mediaTypes: {
video: {
context: "instream",
playerSize: [640, 480],
mimes: ["video/mp4"],
protocols: [1, 2, 3, 4, 5, 6, 7, 8],
playbackmethod: [2],
skip: 1
}
},
bids: [
{
bidder: BIDDER1_PROVIDER,
params: {
placementId: BIDDER1_PLACEMENT_ID
}
}
]
};
pbjs.que.push(function(){
pbjs.addAdUnits(videoAdUnit); // add your ad units to the bid request
pbjs.setConfig({
debug: true,
cache: {
url: "https://prebid.adnxs.com/pbc/v1/cache"
}
});
pbjs.requestBids({
bidsBackHandler: function(bids) {
var videoUrl = pbjs.adServers.dfp.buildVideoUrl({
adUnit: videoAdUnit,
params: {
iu: "/19968336/prebid_cache_video_adunit",
cust_params: {
section: "blog",
anotherKey: "anotherValue"
},
output: "vast"
}
});
adtag = videoUrl;
}
});
});
var player = flowplayer('#player', {
src: "//edge.flowplayer.org/drive.mp4",
title: "Flowplayer demo",
description: "Demo showing ads",
ima: {
ads: [{
time: 0,
adTag: "flowplayer://prebid_fetcher"
}]
}
});
Requirements
You need a valid prebid provider and bidder id.
Libraries
<script async src="//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"></script>
<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css">
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/ads.min.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>HTML code
<div id="player"></div>Javascript
Prebid init
The prebid intitialization, put this in the page header.
<script>
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];
const BIDDER1_PROVIDER = 'appnexus';
const BIDDER1_PLACEMENT_ID = '13232361';
// The ad tag in Flowplayer can be actual ad tag or promise to an ad tag.
// We return the ad tag if it is available before the player is ready to play
// Otherwise the player waits for 2 secs for tag to be available.
var adtag = null
var timeout = 2000
window.prebid_fetcher = function() {
if (adtag) return Promise.resolve(adtag)
return new Promise(function (resolve) {
setTimeout(function() {
resolve(adtag)
}, timeout)
})
}
/*
Prebid Video adUnit
*/
var videoAdUnit = {
code: 'video1',
sizes: [640,480],
mediaTypes: {
video: {
context: 'instream',
playerSize: [640, 480],
mimes: ['video/mp4'],
protocols: [1, 2, 3, 4, 5, 6, 7, 8],
playbackmethod: [2],
skip: 1
}
},
bids: [
{
bidder: BIDDER1_PROVIDER,
params: {
placementId: BIDDER1_PLACEMENT_ID
}
}
]
};
pbjs.que.push(function(){
pbjs.addAdUnits(videoAdUnit); // add your ad units to the bid request
pbjs.setConfig({
debug: true,
cache: {
url: 'https://prebid.adnxs.com/pbc/v1/cache'
}
});
pbjs.requestBids({
bidsBackHandler: function(bids) {
var videoUrl = pbjs.adServers.dfp.buildVideoUrl({
adUnit: videoAdUnit,
params: {
iu: '/19968336/prebid_cache_video_adunit',
cust_params: {
section: "blog",
anotherKey: "anotherValue"
},
output: "vast"
}
});
adtag = videoUrl;
}
});
});
</script>Flowplayer configuration
<script type="text/javascript">
var player = flowplayer('#player', {
src: "//edge.flowplayer.org/drive.mp4",
title: "Flowplayer demo",
description: "Demo showing ads",
ima: {
ads: [{
time: 0, // preroll
adTag: 'flowplayer://prebid_fetcher' // this will try to call window.prebid_fetcher
]
},
token:"eyJraWQiOiJZSVI0VVJZODA2TGoiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJZSVI0VVJZODA2TGpcIn0iLCJpc3MiOiJGbG93cGxheWVyIn0.YUoY8b2vl1Z15PikwgYeWQ8Cp85C-TvtmwIJ_UFxpfAYYH8yiiUrhmd3SaY_qb3AvVDz45xVV6R9wizYl-NRGQ"
});
</script>Replace the Flowplayer token with your own, and the prebid parameters with the ones you received from your ad partner.