Abrir el archivo directamente en la computadora
La guía de IMA pide servir la página desde un servidor web, aunque sea local. Abrir el archivo HTML directamente puede hacer que la prueba falle.
Guía de implementación
Pre-roll video ads
Anuncio en video que se reproduce dentro del reproductor antes del video que la persona eligió ver.
Entiéndelo en 1 minuto
¿Sabes cuando vas al cine y, antes de que empiece la película, pasan algunos tráilers y publicidades? El video pre-roll es exactamente eso, pero en tu sitio. La persona pulsa play para ver un video y, antes de que aparezca el contenido, se reproduce un anuncio dentro del mismo reproductor. El reproductor es el recuadro donde pasa el video, con los botones de play, pausa y volumen. Cuando el anuncio termina, empieza el video elegido.
Para que funcione, el reproductor debe saber pedir el anuncio. Google ofrece un paquete de código llamado IMA SDK, que colocas junto al reproductor. Hace una solicitud a Ad Manager usando una etiqueta de anuncio, que es una dirección de internet con la información del espacio, como el bloque de anuncios y el tamaño del reproductor. La respuesta llega en VAST, que es un formato estándar, como una receta que dice qué video reproducir y cómo contar las visualizaciones. Cuando el sitio usa reglas de anuncios de video, la respuesta puede llegar en VMAP, que es como la programación de horarios de la TV, que indica cuándo entra cada pausa.
Google también explica algo importante sobre el inicio automático del video, llamado autoplay. Los navegadores, como Chrome y Safari, tienen reglas propias, y muchas veces el video solo puede empezar solo si está sin sonido. No hay una pregunta simple para saber si el navegador lo permite: la única forma es intentar reproducirlo. Por eso la guía de IMA dice que, en el celular, el recuadro del anuncio debe activarse con una acción de la persona, como tocar el botón de play. Y, si el reproductor va a empezar solo o sin sonido, debe indicarlo en la solicitud, para que lleguen solo anuncios que puedan reproducirse así.
El pre-roll vale la pena cuando el video es el motivo de la visita, como una clase, una receta o una noticia en video. En la política de video de Google, este espacio se llama In-stream, que quiere decir dentro del contenido que la persona eligió ver, y debe declararse de la forma correcta. Recuerda siempre: la persona vino por el video, así que el anuncio no puede estorbar los controles ni trabar el contenido.
Paso a paso
Ejemplo implementado
<!-- 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>Lo que recomienda Google
Consejos
Cuidado
La guía de IMA pide servir la página desde un servidor web, aunque sea local. Abrir el archivo HTML directamente puede hacer que la prueba falle.
En el celular, el recuadro del anuncio debe activarse con una acción de la persona, como tocar play. Sin eso, el anuncio puede no reproducirse.
Una respuesta VAST con problemas puede generar un error. El ejemplo de Google destruye el administrador de anuncios y reproduce el video, para que la persona no se quede atascada en una pantalla detenida.
Cuando la ventana cambia de tamaño, el ejemplo de Google llama al cambio de tamaño del AdsManager con el tamaño del video. Sin eso, el anuncio puede quedar con un tamaño incorrecto.
No. El reproductor puede pedir una etiqueta VAST por IMA. Google dice que el parámetro de reglas de anuncio (ad_rule) no es obligatorio para servir anuncios, solo para usar las reglas de anuncios de video.
VAST es la respuesta que indica qué anuncio reproducir. VMAP es la respuesta que se usa con reglas de anuncios y que indica cuándo entran las pausas. La etiqueta elige el formato con el parámetro output, con valores como vast y vmap.
Sí, cuando el navegador lo permite. Chrome y Safari limitan el autoplay, sobre todo con sonido. El reproductor debe probar, indicar en la solicitud si se reproducirá solo y sin sonido, y en el celular iniciar el anuncio con una acción de la persona.
La guía de Google pide que el video siga reproduciéndose cuando los anuncios no cargan. En el ejemplo, el administrador de anuncios se destruye y el video se reproduce sin anuncios.
Biblioteca
Todo en esta página sigue la documentación oficial de Google. Léela directo en la fuente:
La auditoría lee el sitio como un visitante, sin hacer clic en nada, y muestra qué corregir.