Attivare gli annunci display lineari

L'SDK IMA per HTML5 supporta gli annunci display lineari oltre agli annunci video lineari. Per maggiori dettagli sugli annunci video lineari, consulta la panoramica della pubblicità Video Solutions.

L'attivazione degli annunci display lineari può creare una domanda aggiuntiva per il tuo spazio pubblicitario, perché gli annunci display lineari competono con gli annunci video lineari per il tuo spazio pubblicitario. IMA gestisce il rendering degli annunci display lineari, ma richiede la configurazione del rilevamento contenuti video. L'implementazione del rilevamento contenuti IMA varia a seconda che tu crei il player di contenuti nello stesso frame di origine del player di annunci o che tu crei il player di annunci in un frame multiorigine.

Questa guida illustra come configurare il Rilevamento contenuti per attivare gli annunci display lineari, modificare il video player dei contenuti e interrompere la raccolta degli indicatori dei contenuti.

Configura il rilevamento contenuti

Per attivare gli annunci display lineari per le richieste di annunci, segui questi passaggi:

Stessa origine

Se l'SDK IMA condivide la stessa origine del player di contenuti, esegui una delle seguenti operazioni:

  • (Preferito) Passa il video player alla chiamata AdsManagerLoadedEvent.getAdsManager(). Anche se getAdsManager() ti consente di passare un oggetto contenente una proprietà currentTime, devi passare un'istanza HTMLVideoElement in getAdsManager() per supportare il rilevamento contenuti.

    function onAdsManagerLoaded(adsManagerLoadedEvent) {
  // Set any AdsRenderingSettings here.
  const adsRenderingSettings = new google.ima.AdsRenderingSettings();

  // Get the ads manager.
  adsManager =
    adsManagerLoadedEvent.getAdsManager(videoElement, adsRenderingSettings);
}

  • Se non riesci a fornire il player di contenuti durante la chiamata AdsManagerLoadedEvent.getAdsManager(), chiama il metodo AdsManager.configureAdsManager() con il video player. Affinché il rilevamento dei contenuti funzioni, deve essere un HTMLVideoElement.

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager =
    adsManagerLoadedEvent.getAdsManager(null);
  adsManager.configureAdsManager(videoElement);
}

Se non configuri il rilevamento dei contenuti, gli ad server di Google potrebbero interrompere la pubblicazione di annunci display lineari.

Se il player di contenuti si trova nella stessa origine in cui carichi l'SDK IMA, non devi apportare modifiche all'implementazione dell'SDK IMA per gestire la modifica del player di contenuti o l'interruzione della raccolta di indicatori dei contenuti.

Multiorigine

Se l'SDK IMA è cross-origin rispetto al player di contenuti, IMA può raccogliere indicatori di rilevamento dei contenuti tramite la classe CrossOriginProxy. Questa classe consente all'SDK IMA di verificare il corretto posizionamento degli annunci display lineari e di raccogliere indicatori relativi all'argomento dei contenuti video. Se inserisci l'SDK IMA in un iframe cross-domain, devi implementare la classe CrossOriginProxy.

Se continui a posizionare il player di contenuti in modalità cross-origin rispetto all'SDK IMA senza implementare la classe CrossOriginProxy, gli ad server di Google potrebbero interrompere la pubblicazione di annunci display lineari.

Per caricare la classe CrossOriginProxy nella tua app, segui questi passaggi:

  1. Nel file HTML, importa il file ima_proxy.js:

    <html>
  <head>
    <title>IMA HTML5 cross-origin iframe sample</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="mainContainer">
      <div id="content">
        <video id="contentElement">
          <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
        </video>
      </div>

      <!-- The cross-origin iframe where you load IMA SDK and play ads. -->
      <iframe id="adContainerIframe"
              src="https://cross-origin-domain.com/ads-sandbox.html" >
      </iframe>

    </div>
    <button id="playButton">Play</button>

    <script src="//imasdk.googleapis.com/js/sdkloader/ima_proxy.js"></script>
    <script src="main.js"></script>
  </body>
</html>

  2. Nel file main.js, recupera l'istanza CrossOriginProxy.

  3. Chiama il metodo setVideoElements() con un array di tutti i video player che mostrano annunci sulla tua pagina o app.

Prima di effettuare una richiesta di annuncio, devi passare gli elementi video all'istanza CrossOriginProxy con la chiamata setVideoElements(). L'esempio seguente passa un array contenente un singolo video player di contenuti:

// On window load attach an event to the play button click
// that triggers playback of the content video element.
window.addEventListener('load', function(event) {
videoContent = document.getElementById('contentElement');
ima.crossOriginProxy.getInstance().setVideoElements([videoContent]);
playButton = document.getElementById('playButton');
playButton.addEventListener('click', playAds);
});

Modifica il video player dei contenuti

Se passi a un altro video player di contenuti o ne aggiungi un altro, devi passare un nuovo array al metodo setVideoElements(). Quando effettui la nuova chiamata setVideoElements(), IMA inizia a raccogliere indicatori per il nuovo player di contenuti e interrompe la raccolta di indicatori per i player di contenuti passati nelle chiamate precedenti.

L'esempio seguente passa il nuovo elemento video alla classe CrossOriginProxy:

function createNewContentPlayer(newPlayerId) {
newVideoContent = document.getElementById(newPlayerId);
ima.crossOriginProxy.getInstance().setVideoElements([newVideoContent]);

// Continue with any other steps needed to initiate the content player
}

Interrompi la raccolta di indicatori al termine degli annunci

Quando hai finito di riprodurre gli annunci e chiami il metodo AdsLoader.destroy(), devi anche chiamare il metodo setVideoElements() con un array vuoto. La chiamata setVideoElements() con un array vuoto elimina il riferimento ai player di contenuti che IMA conserva e previene i problemi di perdita di memoria.