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.
Guida all'implementazione
Pre-roll video ads
Annuncio video che parte dentro il player prima del video che la persona ha scelto di guardare.
Capirlo in 1 minuto
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
Esempio implementato
<!-- 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>Cosa indica Google
Consigli
Attenzione
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.
Su smartphone, il contenitore dell'annuncio deve essere attivato da un'azione della persona, come toccare play. Senza questo, l'annuncio potrebbe non partire.
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.
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.
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.
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.
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.
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
Tutto in questa pagina segue la documentazione ufficiale di Google. Leggila direttamente alla fonte:
L'audit legge il sito come un visitatore, senza cliccare su nulla, e mostra cosa correggere.