Optimize the Dailymotion Player for Header Bidding solutions

Introduction

The Dailymotion Player enables you to know when an ad slot is ready to be filled during a video session. In this guide, we’ll show you how to implement the right parameters to optimize for header bidding solutions all ad slots available in the Player.

Implementation steps

1. Allow your player to work with your Prebid solution

The Player setting enable_wait_for_custom_config allows the Player to work more efficiently with advertising solutions such as Prebid.

This setting can be activated via the Platform API by either creating a new Player configuration or updating an existing one (see code sample below). If you’re not confortable using the API, reach out to your Dailymotion Account Manager so we can activate it for you.

Platform API code sample:
With the below example, you can update an existing Player to enable the setting enable_wait_for_custom_config

// Enable the parameter enable_wait_for_custom_config on an existing Player
// Replace <YOUR_PLAYER_ID> with the Player ID you want to modify

curl -X POST -H 'Authorization: Bearer ${ACCESS_TOKEN}' \
       -d 'enable_wait_for_custom_config=true' \
       'https://api.dailymotion.com/player/<YOUR_PLAYER_ID>'

Once the Player setting is enabled:

• The Player ad values can be updated during the current video session
• The new Player event AD_READYTOFETCH becomes accessible via the SDK and signals when an ad is about to play (see step 5)

2. Embed a Player with the associated Player ID

You can now embed on your webpage the Player from step 1 and your video.

// Replace {Player_ID} and {Video_ID} with your own

<script
  src="https://geo.dailymotion.com/player/{Player_ID}.js"
  data-video="{Video_ID}" id="myPlayer"
></script>

3. Get the Player and fetch ad values

Using Promise.all([...]), run both promises in parallel: getPlayer() to retrieve your Player, and your first Prebid request for your Pre-roll.

// Replace myFetchPrebid() with your own Prebid request 

Promise.all([dailymotion.getPlayer('myPlayer'), myFetchPrebid()])
  .then(([player, customConfig]) => {

4. Update the Player with retrieved ad values

Once both promises are successfully resolved – meaning that the Player is retrieved and the ad values are returned – you can update the Player for your first Pre-roll with the ad values from setCustomConfig().

player.setCustomConfig(customConfig)

5. Add an event listener for the next ads

By enabling the Player setting enable_wait_for_custom_config in step 1, you have access to the ad event AD_READYTOFETCH which is sent a few seconds before an ad is supposed to play.

After the event is sent, the Player will wait before sending the ad request. By default, the Player waits 6 seconds before each ad position. You can also set a custom delay (between 1 and 10 seconds) using wait_for_custom_config_delay.

Add AD_READYTOFETCH to your integration to know when a new ad is about to play. Each time it is caught, you can update the advertising values sent to your header bidding solution and pass them to the Player using setCustomConfig().

player.on(dailymotion.events.AD_READYTOFETCH, (state) => {
      myFetchPrebid(state)
        .then((customConfig) => {
          player.setCustomConfig(customConfig)
        })        

Optional: Skip request on specific ad positions

If you don’t want to make header bidding calls for midrolls and/or postrolls, you can set an empty value in setCustomConfig({}) when listening to a specific ad position with AD_READYTOFETCH.

Code sample:
In the following example, if the event AD_READYTOFETCH detects a midroll, no header bidding request is triggered. If it detects any other ad slot (postroll or subsequent preroll), a header bidding request will be made.

player.on(dailymotion.events.AD_READYTOFETCH, state => {
	if (state.adPosition === 'midroll') {
		player.setCustomConfig({}) // skip
	} else {
		myFetchPrebid(state)
			.then(customConfig => {
				player.setCustomConfig(customConfig)
			})
			.catch(err => {
				console.error(err)
			})
	}
})

Code sample

The following code sample implements the steps described above: