Immagine poster degli annunci audio

Questa guida illustra come utilizzare l'SDK IMA per HTML5 per sovrapporre i tuoi video con un'immagine poster quando vengono riprodotti gli annunci audio. Da utilizzare quando ad_type=audio_video sia impostato nella richiesta di URL VAST. In questo modo puoi Monetizzazione degli annunci migliorata in quanto gli annunci audio e video sono idonei e completi da pubblicare. Consulta la ad_type documentazione e Audio nei video contenuti per ulteriori informazioni.

Puoi seguire questa guida apportando le modifiche a un IMA di base integrazioni o consulta le app di esempio audio in video per un'integrazione completa con questa funzionalità.

Prerequisiti

• Un'app che implementa l'SDK IMA per HTML5 per gli annunci video. Consulta il documento IMA per HTML5 guida introduttiva per ulteriori informazioni.
• Un'immagine poster predefinita che si sovrappone al video player quando viene visualizzato un annuncio audio sono pubblicati senza un'immagine overlay pertinente. Per fare in modo che l'immagine si adatti nel video player, la sua larghezza deve essere inferiore o uguale a quella del video nel player e la sua altezza deve essere di almeno 75 px inferiore a quella del video un player.

Attiva la funzionalità dell'immagine poster

Prima di effettuare la richiesta di annuncio audio e video, imposta il audioPosterImageEnabled il flag delle caratteristiche in true e il flag delle caratteristiche audioPosterImageDefaultUrl a l'URL predefinito dell'immagine poster. Per farlo, utilizza ImaSdkSettings.setFeatureFlags() prima di creare AdDisplayContainer. Quando questa impostazione è attiva e se un annuncio audio è in riproduzione, IMA sovrappone automaticamente un'immagine correlata all'annuncio video player. L'IMA sceglie l'immagine companion più grande disponibile all'interno del video player e sia più corto di almeno 75 px rispetto al video player. Se l'annuncio VAST non include un'immagine che l'IMA può utilizzare come overlay, IMA utilizza l'immagine predefinita specificata come overlay.

function initializeIMA() {
  console.log('initializing IMA');
  adContainer = document.getElementById('ad-container');
  google.ima.settings.setFeatureFlags(
    {
      'audioPosterImageEnabled': true,
      'audioPosterImageDefaultUrl':'http://your-ad-overlay/image.png'
    });
  adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);
  adsLoader = new google.ima.AdsLoader(adDisplayContainer);

  // Let the AdsLoader know when the video has ended
  videoElement.addEventListener('ended', function() {
    adsLoader.contentComplete();
  });

  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = 'http://your-audio-video-ad-tag';
  ...
  // Pass the request to the adsLoader to request ads
  adsLoader.requestAds(adsRequest);
}