<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")
  })

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.