Immagine poster degli annunci audio

Questa guida illustra come utilizzare l'SDK IMA per HTML5 per sovrapporre al tuo video player un'immagine poster quando vengono riprodotti annunci audio. Deve essere usato quando ad_type=audio_video è impostato nella richiesta dell'URL VAST. In questo modo è possibile migliorare la monetizzazione degli annunci, in quanto sia gli annunci audio che video sono idonei e completi per la pubblicazione. Per ulteriori dettagli, consulta la documentazione di ad_type e i contenuti audio nei video.

Puoi seguire questa guida, apportare le modifiche a un'integrazione IMA di base oppure consultare l'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 la Guida introduttiva all'IMA HTML5 per ulteriori informazioni.
• Un'immagine poster predefinita che si sovrappone al video player quando un annuncio audio viene pubblicato senza un'immagine overlay pertinente. Affinché l'immagine rientri nel video player, la larghezza deve essere inferiore o uguale a quella del video player e l'altezza deve essere almeno 75 px inferiore rispetto a quella del video player.

Attiva la funzionalità dell'immagine poster

Prima di effettuare la richiesta di annuncio audio e video, imposta il flag funzionalità audioPosterImageEnabled su true e il flag funzionalità audioPosterImageDefaultUrl sull'URL dell'immagine poster predefinito. Esegui questa operazione con l'API ImaSdkSettings.setFeatureFlags() prima di creare AdDisplayContainer. Se questa impostazione è impostata e un annuncio audio è in riproduzione, IMA sovrappone automaticamente un'immagine correlata all'annuncio nella parte superiore del video player. IMA sceglie l'immagine dell'annuncio companion più grande disponibile che si adatta al video player e che è di almeno 75 px più corta rispetto al video player. Se il tag VAST dell'annuncio non include un'immagine che può essere utilizzata da IMA 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);
}