Apri lo spazio

Guida all'implementazione

Video pre-roll

Pre-roll video ads

Annuncio video che parte dentro il player prima del video che la persona ha scelto di guardare.

  • Ad Manager
  • Ad Exchange
  • AdSense (tramite Ad Manager)
  • dentro il player video (mobile e desktop)
Desktop
Cellulare

Capirlo in 1 minuto

Cos'è il video pre-roll

Sai quando vai al cinema e, prima che inizi il film, passano dei trailer e delle pubblicità? Il video pre-roll è esattamente questo, solo che sul tuo sito. La persona preme play per vedere un video e, prima che compaia il contenuto, parte un annuncio dentro lo stesso player. Il player è il riquadro dove scorre il video, con i pulsanti di play, pausa e volume. Quando l'annuncio finisce, inizia il video scelto.

Perché funzioni, il player deve saper richiedere l'annuncio. Google offre un pacchetto di codice chiamato IMA SDK, che metti insieme al player. Fa una richiesta ad Ad Manager usando un tag annuncio, che è un indirizzo internet con le informazioni dello spazio, come il blocco di annunci e le dimensioni del player. La risposta arriva in VAST, un formato standard, come una ricetta che dice quale video riprodurre e come contare le visualizzazioni. Quando il sito usa regole per gli annunci video, la risposta può arrivare in VMAP, che è come la griglia degli orari della TV e dice quando entra ogni pausa.

Google spiega anche una cosa importante sull'avvio automatico del video, il cosiddetto autoplay. I browser, come Chrome e Safari, hanno regole proprie, e spesso il video può partire da solo solo se è senza audio. Non esiste una domanda semplice per sapere se il browser lo permette: l'unico modo è provare a riprodurlo. Per questo la guida di IMA dice che, su smartphone, il contenitore dell'annuncio deve essere attivato da un'azione della persona, come toccare il pulsante di play. E, se il player sta per partire da solo o senza audio, deve segnalarlo nella richiesta, così arrivano solo annunci che possono essere riprodotti in quel modo.

Il pre-roll conviene quando il video è il motivo della visita, come una lezione, una ricetta o una notizia in video. Nella policy video di Google, questo spazio si chiama In-stream, che vuol dire dentro il contenuto che la persona ha scelto di guardare, e deve essere dichiarato nel modo giusto. Ricorda sempre: la persona è venuta per il video, quindi l'annuncio non deve intralciare i controlli né bloccare il contenuto.

Passo passo

Come implementare

  1. Crea un blocco di annunci videoIn Ad Manager, il pre-roll usa un'unità pubblicitaria video e audio. Da quell'unità esce il tag che il player userà.
  2. Genera il tag dell'annuncioVai in Inventario, Unità pubblicitarie, apri l'unità e clicca su Tag. Scegli Google Publisher Tag per video e audio, vai avanti nei passaggi e copia il tag. I valori tra parentesi quadre devono essere compilati dal player al momento della richiesta.
  3. Metti l'IMA SDK nella paginaCarica lo script dell'IMA SDK prima del tuo codice. Crea un contenitore sopra il video per l'annuncio e collega il contenitore al video con AdDisplayContainer, il componente di IMA che mostra l'annuncio.
  4. Richiedi l'annuncioCrea un AdsLoader e un AdsRequest con il tuo tag. Indica la larghezza e l'altezza dello spazio dell'annuncio lineare. Questo aiuta l'IMA a scegliere l'annuncio giusto quando ne arrivano più di uno.
  5. Metti in pausa e riprendi il contenutoQuando IMA chiede la pausa (evento CONTENT_PAUSE_REQUESTED), metti in pausa il video. Quando chiede di continuare (CONTENT_RESUME_REQUESTED), riprendi la riproduzione. Se c'è un errore, distruggi il gestore degli annunci e lascia riprodurre il video senza annuncio.
  6. Parti dal clic della personaSul pulsante di play, attiva il contenitore dell'annuncio e poi inizializza e avvia l'AdsManager. La guida di IMA dice che, su smartphone, il contenitore dell'annuncio deve essere attivato da un'azione della persona.

Esempio implementato

Il codice e come appare sullo schermo

Va nella pagina del video: lo script di IMA in alto, il player con il contenitore dell'annuncio sopra e il codice che richiede il pre-roll quando la persona fa clic su Guarda.
<!-- 1. Carrega o IMA SDK (antes do seu código) -->
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

<!-- 2. O vídeo e, por cima dele, a caixa do anúncio -->
<div style="position:relative;width:640px;height:360px">
  <video id="conteudo" width="640" height="360" playsinline controls>
    <source src="meu-video.mp4" type="video/mp4">
  </video>
  <div id="adContainer" style="position:absolute;top:0;left:0"></div>
</div>
<button id="playButton">Assistir</button>

<script>
  var video = document.getElementById('conteudo');
  var adDisplayContainer = new google.ima.AdDisplayContainer(
      document.getElementById('adContainer'), video);
  var adsLoader = new google.ima.AdsLoader(adDisplayContainer);
  var adsManager;

  adsLoader.addEventListener(
      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
      function (e) {
        adsManager = e.getAdsManager(video);
        adsManager.addEventListener(
            google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
            function () { video.pause(); });
        adsManager.addEventListener(
            google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
            function () { video.play(); });
        adsManager.addEventListener(
            google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
      });
  adsLoader.addEventListener(
      google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);

  function onAdError(e) {
    console.log(e.getError());
    if (adsManager) { adsManager.destroy(); }
    video.play(); // sem anúncio, o vídeo continua
  }

  // 3. Pedido do anúncio (IDs de exemplo)
  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +
      'iu=/1234567/exemplo&sz=640x480&env=vp&gdfp_req=1&output=vast' +
      '&unviewed_position_start=1&vpa=click&vpmute=0&plcmt=1' +
      '&description_url=https%3A%2F%2Fwww.exemplo.com%2Fvideo&correlator=';
  adsRequest.linearAdSlotWidth = 640;
  adsRequest.linearAdSlotHeight = 400;
  adsLoader.requestAds(adsRequest);

  // 4. Só começa quando a pessoa clica em Assistir
  document.getElementById('playButton').addEventListener('click', function () {
    adDisplayContainer.initialize();
    try {
      adsManager.init(640, 360, google.ima.ViewMode.NORMAL);
      adsManager.start();
    } catch (err) {
      video.play();
    }
  });
</script>
Su desktopL'annuncio parte dentro il player, nello stesso punto dove passerà il video, prima che inizi il contenuto. Quando finisce, comincia il video scelto.
Su smartphoneCompare anche dentro il player, di solito dopo che la persona tocca play. Su iPhone, il video ha bisogno dell'attributo playsinline per partire dentro la pagina e non nel player a schermo intero.

Cosa indica Google

Cosa si può e non si può fare

Consentito

  • Riprodurre l'annuncio prima del video scelto dalla persona, dentro il player, usando l'IMA SDK, uno degli strumenti che Google richiede per gli spazi In-stream.
  • Far partire l'annuncio dal clic della persona sul pulsante di play, come raccomanda la guida di IMA per lo smartphone.
  • Usare l'autoplay, anche senza audio, purché il player segnali nella richiesta che partirà da solo e se partirà muto.
  • Lasciare che il video si riproduca normalmente quando l'annuncio dà errore, come fa l'esempio di Google.

Non consentito

  • Non puoi dichiarare lo spazio sbagliato: un annuncio in un player con video deve essere dichiarato come In-stream o Contenuto complementare (video che accompagna il contenuto principale).
  • Non si possono lasciare i controlli dell'annuncio e del video coperti, nascosti o non funzionanti.
  • Non si può avere più di un video che parte da solo con audio nello stesso momento, né più di un player che parte da solo visibile sullo schermo.
  • L'annuncio non può partire da solo prima che almeno il 50% dello spazio sia visibile.
  • Non usare i prodotti IMA per guadagnare con i video di YouTube.

Consigli

Per farlo nel modo giusto

Attenzione

Errori comuni

Aprire il file direttamente sul computer

La guida di IMA chiede di servire la pagina tramite un server web, anche se locale. Aprire direttamente il file HTML può far fallire il test.

Partire senza l'azione della persona su smartphone

Su smartphone, il contenitore dell'annuncio deve essere attivato da un'azione della persona, come toccare play. Senza questo, l'annuncio potrebbe non partire.

Non gestire l'errore dell'annuncio

Una risposta VAST con problemi può generare un errore. L'esempio di Google distrugge il gestore degli annunci e riproduce il video, così la persona non resta bloccata su una schermata ferma.

Dimenticare di regolare le dimensioni

Quando la finestra cambia dimensione, l'esempio di Google chiama il ridimensionamento di AdsManager con le dimensioni del video. Senza questo, l'annuncio può avere la dimensione sbagliata.

Domande frequenti

Mi servono le regole degli annunci per avere il pre-roll?

No. Il player può richiedere un tag VAST tramite l'IMA. Google dice che il parametro delle regole degli annunci (ad_rule) non è obbligatorio per pubblicare annunci, solo per usare le regole degli annunci video.

Qual è la differenza tra VAST e VMAP?

VAST è la risposta che dice quale annuncio riprodurre. VMAP è la risposta usata con le regole degli annunci, che dice quando entrano le pause. Il tag sceglie il formato con il parametro output, con valori come vast e vmap.

Il pre-roll può partire da solo?

Può, quando il browser lo permette. Chrome e Safari limitano l'autoplay, soprattutto con l'audio. Il player deve provare, segnalare nella richiesta se partirà da solo e senza audio e, su smartphone, far partire l'annuncio con l'azione della persona.

Cosa succede se l'annuncio non si carica?

La guida di Google chiede che il video continui a girare quando gli annunci non si caricano. Nell'esempio, il gestore degli annunci viene distrutto e il video parte senza annuncio.

Biblioteca

Fonte ufficiale di Google

Tutto in questa pagina segue la documentazione ufficiale di Google. Leggila direttamente alla fonte:

Il tuo sito usa questo formato nel modo giusto?

L'audit legge il sito come un visitatore, senza cliccare su nulla, e mostra cosa correggere.

Avvia un audit