Abrir espacio

Guía de implementación

Video pre-roll

Pre-roll video ads

Anuncio en video que se reproduce dentro del reproductor antes del video que la persona eligió ver.

  • Ad Manager
  • Ad Exchange
  • AdSense (mediante Ad Manager)
  • dentro del reproductor de video (celular y escritorio)
Escritorio
Celular

Entiéndelo en 1 minuto

Qué es el video pre-roll

¿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

Cómo implementarlo

  1. Crea un bloque de anuncios de videoEn Ad Manager, el pre-roll usa un bloque de anuncios de video y audio. De ese bloque sale la etiqueta que el reproductor va a usar.
  2. Genera la etiqueta del anuncioVe a Inventario, Bloques de anuncios, abre el bloque y haz clic en Etiquetas. Elige Etiqueta de editor de Google para video y audio, avanza por los pasos y copia la etiqueta. Los valores entre corchetes deben ser completados por el reproductor al momento de la solicitud.
  3. Coloca el IMA SDK en la páginaCarga el script del IMA SDK antes de tu código. Crea un recuadro sobre el video para el anuncio y conecta el recuadro al video con el AdDisplayContainer, que es la pieza de IMA que muestra el anuncio.
  4. Pide el anuncioCrea un AdsLoader y un AdsRequest con tu etiqueta. Indica el ancho y el alto del espacio del anuncio lineal. Esto ayuda a IMA a elegir el anuncio correcto cuando llegan varios.
  5. Pausa y reanuda el contenidoCuando IMA pida una pausa (evento CONTENT_PAUSE_REQUESTED), pausa el video. Cuando pida continuar (CONTENT_RESUME_REQUESTED), vuelve a reproducirlo. Si hay un error, destruye el administrador de anuncios y deja que el video se reproduzca sin anuncio.
  6. Empieza con el clic de la personaEn el botón de play, activa el recuadro del anuncio y luego inicializa y arranca el AdsManager. La guía de IMA dice que, en el celular, el recuadro del anuncio debe activarse con una acción de la persona.

Ejemplo implementado

El código y cómo se ve en pantalla

Va en la página del video: el script de IMA arriba, el reproductor con el recuadro del anuncio encima y el código que pide el pre-roll cuando la persona hace clic en Ver.
<!-- 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>
En el escritorioEl anuncio se reproduce dentro del reproductor, en el mismo lugar donde pasará el video, antes de que empiece el contenido. Cuando termina, empieza el video elegido.
En el celularTambién aparece dentro del reproductor, normalmente después de que la persona toca play. En iPhone, el video necesita el atributo playsinline para reproducirse dentro de la página y no en el reproductor de pantalla completa.

Lo que recomienda Google

Qué se puede y qué no

Sí se puede

  • Reproducir el anuncio antes del video que la persona eligió, dentro del reproductor, usando el IMA SDK, una de las herramientas que Google exige para espacios In-stream.
  • Iniciar el anuncio a partir del clic de la persona en el botón de play, como recomienda la guía de IMA para el celular.
  • Usar autoplay, incluso sin sonido, siempre que el reproductor indique en la solicitud que se reproducirá solo y si lo hará en silencio.
  • Dejar que el video se reproduzca normalmente cuando el anuncio da error, como hace el ejemplo de Google.

No se puede

  • No puedes declarar el espacio equivocado: un anuncio en un reproductor con video debe declararse como In-stream o Contenido complementario (video que acompaña al contenido principal).
  • No se pueden dejar los controles del anuncio y del video tapados, ocultos o sin funcionar.
  • No se puede tener más de un video reproduciéndose solo con sonido al mismo tiempo, ni más de un reproductor que se reproduzca solo visible en la pantalla.
  • El anuncio no puede empezar solo antes de que al menos el 50% del espacio sea visible.
  • No se pueden usar los productos IMA para ganar dinero con videos de YouTube.

Consejos

Para hacerlo bien

Cuidado

Errores comunes

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.

Empezar sin una acción de la persona en el celular

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.

No manejar el error del anuncio

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.

Olvidar ajustar el tamaño

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.

Preguntas frecuentes

¿Necesito reglas de anuncios para tener pre-roll?

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.

¿Cuál es la diferencia entre VAST y VMAP?

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.

¿El pre-roll puede reproducirse solo?

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.

¿Qué pasa si el anuncio no carga?

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

Fuente oficial de Google

Todo en esta página sigue la documentación oficial de Google. Léela directo en la fuente:

¿Tu sitio usa este formato de la manera correcta?

La auditoría lee el sitio como un visitante, sin hacer clic en nada, y muestra qué corregir.

Hacer una auditoría