Redacted 05.02.2025 by Erwann Cloarec

🧷 Documentation from Dailymotion

<aside> ℹ️

The documentation and setup from Dailymotion is subject to changes, please refer to their up-to-date documentation.

</aside>

To start a HB auction, just add the call to Pubstack Instream Integration providing the divId (e.g: myPlayer here) configured on your ad unit, and that must be present in the DOM.

To generate distinct adunits (e.g. preroll, midroll, postroll) corresponding div must be created in the DOM and interogated with the corresponding arguments in the monetize() function

The Dailymotion documentation states to create 2 promises, one to setup the player the other to fetch Prebid. That’s where we will configure the monetization call to Pubstack.

From the Dailymotion documentation:

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

You can setup the myFetchPrebid function as the following:

function myFetchPrebid() {
	kleanads = window.kleanads || { cmd: [] }
	window.kleanads = kleanads
	return new Promise((resolve) => {
	
		window.kleanads.cmd.push(() => {
		  // call the monetize function with the div id of the ad unit
			window.kleanads.monetize('myPlayer')
			  .then((targetings) => {
			    const customConfig = {
					  dynamiciu: '/1234/adunitpath', // the adunitpath of the adunit
					  keyvalues: Object.entries(targetings).map(([key, value]) => `${key}=${value}`).join('&'), // joins the targeting key-values into a single "key1=value&key2=...." line
					  keyvalues2: {
	            sz: "640x480",
	            vpos: "preroll",
	            pmnd: 0,
	            pmad: 3,
	            pmxd: 61000
	          }, // these are your vast settings
					};
			    resolve(customConfig);
			  });
		});
	}
}

As a result here is a full overview of the implementation, adapted from Dailymotion documentation:

/**
 * Pubstack monetization call
 *
 * @return {Promise}
 * @resolve {Object} computed customConfig object
 * @reject {String} error
 */
const myFetchPrebid = async () => {
  const kleanads = window.kleanads || { cmd: [] };
	window.kleanads = kleanads;
	const hbPromise = new Promise((resolve, reject) => {
		kleanads.cmd.push(() => {
		  // call the monetize function with the div id of the ad unit
			kleanads.monetize('myPlayer')
			  .then((targetings) => {
			    const customConfig = {
					  dynamiciu: '/1234/adunitpath', // the adunitpath of the adunit
					  keyvalues: Object.entries(targetings).map(([key, value]) => `${key}=${value}`).join('&'), // joins the targeting key-values into a single key1=value&key2=.... line
					  keyvalues2: {
	            sz: "640x480",
	            vpos: "preroll",
	            pmnd: 0,
	            pmad: 3,
	            pmxd: 61000
	          }, // these are your vast settings
					};
			    resolve(customConfig);
			  }).catch((e) => reject(e));
		});
	// a failsafe timeout to send an empty customConfig
  const timeoutPromise = new Promise(resolve => setTimeout(() => {
    const customConfig = {
					  dynamiciu: '/1234/adunitpath', // the adunitpath of the adunit
					  keyvalues: '',
					  keyvalues2: {
	            sz: "640x480",
	            vpos: "preroll",
	            pmnd: 0,
	            pmad: 3,
	            pmxd: 61000
	          }, // these are your vast settings
					};
    resolve(customConfig);
  }, 5000));

  return Promise.race([hbPromise, timeoutPromise]);
}

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