<h1>PES advanced custom Header Bidding implementation</h1>
<!-- <script src="prebid.js"></script> -->
<!-- Step 1: Enable the Player config to use 'enable_wait_for_custom_config' via REST API -->
<!-- Step 2: Embed a Player with the associated Player ID. (you can alternatively use the dailymotion.createPlayer() to create the player dynamically) -->
<script
src="https://geo.dailymotion.com/player/xd2vp.js"
data-video="x8jdywp" id="myPlayer"
></script>
<i>
to check if the custom config has been set:<br /><br />
> inspect Network tab > filter vmap, click Play button & check Response tab of the call https://adtester.dailymotion.com/vmap/x6feo7b<br />
>>> ccHb* should be in the payload<br />
</i>
<br /><br />
/**
* fake asynchronous bid request function
* to be implemented by partners
*
* @param {Object} state - the player state (retrieved by AD_READYTOFETCH)
* @return {Promise}
* @resolve {Object} computed customConfig object
* @reject {String} error
*/
const myFetchPrebid = async ({ videoId, adPosition } = {}) => {
const timeout = (ms) => new Promise(resolve => setTimeout(resolve, ms))
await timeout(2000)
return {
hbTest: 'customHBwithPES',
hbVideoId: videoId || 'tooEarly',
hbAdPosition: adPosition || 'preroll',
}
}
// Step 3: get the player and fetch advertising values from the header bidding solution in parallel
// When used with a first preroll, myFetchPrebid function shouldn't trigger a prebid auction since it is already ongoing. It should however trigger the auction for any other ad break than first preroll
Promise.all([dailymotion.getPlayer('myPlayer'), myFetchPrebid()])
.then(([player, customConfig]) => {
// Step 4: When ad values returned and the player is retrieved, update the player with setCustomConfig()
player.setCustomConfig(customConfig)
// Step 5: Add an event listener AD_READYTOFETCH for the next ads
// each time the event is caught, fetch new advertising values and pass it via setCustomConfig()
player.on(dailymotion.events.AD_READYTOFETCH, (state) => {
myFetchPrebid(state)
.then((customConfig) => {
player.setCustomConfig(customConfig)
})
.catch((err) => {
console.error(err)
})
})
})
.catch(() => {
console.error("fail to get the player")
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.