Anuncios complementarios

Te recomendamos que asocies tus espacios publicitarios HTML en la página con espacios publicitarios de video o superposición. Esta relación entre los espacios de anuncios asociados se conoce como la relación principal-complementaria.

Además de solicitar anuncios principales de video y superposición, puedes usar el SDK de IMA para mostrar anuncios HTML complementarios. Estos anuncios se muestran en un entorno HTML.

Usa anuncios complementarios

Para usar anuncios complementarios, sigue estos pasos:

1. Reserva tus anuncios complementarios

Primero, debes reservar los anuncios complementarios que deseas mostrar con tus anuncios principales. Los anuncios complementarios se pueden dirigir en Ad Manager. Puedes publicar hasta seis anuncios complementarios por anuncio principal. Esta técnica, cuando un solo comprador controla todos los anuncios de la página, también se conoce como publicación simultánea.

2. Solicita tus anuncios complementarios

De forma predeterminada, los anuncios complementarios están habilitados para cada solicitud de anuncio.

3. Cómo mostrar anuncios complementarios

Existen dos maneras de renderizar anuncios complementarios:

• Con la etiqueta Google Publisher Tag (GPT)
  Si usas la GPT para implementar tus anuncios complementarios, estos se muestran automáticamente, siempre y cuando haya espacios publicitarios de anuncios complementarios declarados en la página HTML y estos anuncios estén registrados en la API (es decir, el ID de div en JavaScript y HTML debe coincidir). Estos son algunos beneficios de usar GPT:
  • Reconocimiento de espacios publicitarios complementarios
  • Reabastecimiento de anuncios complementarios desde la red del publicador, si la respuesta de VAST contiene menos anuncios complementarios que la cantidad de espacios definidos en la página HTML
  • Autocompletado complementario si falta un anuncio de video
  • Espacios publicitarios complementarios precargados para reproductores de video de reproducción con un clic
  • Renderización complementaria automatizada, incluidos HTMLResource y iFrameResource
• De forma manual con la API de Ad

Cómo usar anuncios complementarios con Google Publisher Tag

La etiqueta Google Publisher Tag (GPT) automatiza la visualización de anuncios complementarios HTML en tu sitio. Recomendamos que la mayoría de los publicadores usen el GPT. El SDK de HTML5 reconoce los espacios publicitarios de GPT si se cargan en la página web principal (no en un IFrame). Puedes encontrar información más detallada sobre el uso de GPT con el SDK de IMA en la documentación de GPT.

Nota: Cuando usas el SDK de anuncios multimedia interactivos de Google para la publicación de anuncios, las métricas que se informan al servidor de anuncios pueden incluir si el visitante interactuó con la página en la que se publicaron los anuncios. Debes divulgar esta información a tus visitantes para cumplir con el requisito de divulgación de la recopilación y el uso de datos de tu contrato con Google.

Si alojas el SDK de HTML5 en un iframe

Si cumples con los dos criterios que se indican a continuación, debes incluir una secuencia de comandos proxy adicional para que tus anuncios complementarios de GPT se muestren correctamente:

1. Carga el SDK de HTML5 en un iframe.
2. Carga la GPT en la página web principal (fuera del iframe).

Para que tus compañeros se muestren en esta situación, debes cargar la secuencia de comandos del proxy de GPT antes de cargar el SDK:

<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>

Puntos importantes que debe tener en mente:

• No debe haber ningún GPT cargado dentro del iframe que carga el SDK.
• El GPT se debe cargar en la página superior, no en otro iframe.
• La secuencia de comandos del proxy se debe cargar en el mismo marco que GPT (es decir, en la página principal).

Declarar posiciones de anuncios complementarios en HTML

En esta sección, se explica cómo declarar anuncios complementarios en HTML con la GPT y se proporciona código de muestra para diferentes situaciones. Para el SDK de HTML5, debes agregar JavaScript a tu página HTML y declarar los espacios de anuncios complementarios.

Nota: En cada uno de los siguientes ejemplos, asegúrate de proporcionar un network y un unit-path válidos en la llamada al método googletag.defineSlot (que se encuentra en la etiqueta <head> o <body>, según el ejemplo que estés usando).

• Ejemplo 1: Implementación básica de la ranura de anuncios
• Ejemplo 2: Implementación de un espacio de anuncios dinámico
• Ejemplo 3: posiciones de anuncios cargadas previamente

Ejemplo 1: Implementación básica de espacios publicitarios

En el siguiente código de muestra, se muestra cómo incluir el archivo gpt.js en tu página HTML y declarar un espacio de anuncios. El espacio publicitario declarado es de 728 x 90 px. GPT intenta completar el espacio con cualquier anuncio complementario que se muestre en la respuesta de VAST que coincida con este tamaño. Después de declarar los espacios de anuncios, la función googletag.display() puede renderizarlos en cualquier lugar de la página donde se llame a la función. Debido a que los espacios son complementarios, los anuncios no se muestran de inmediato. En su lugar, aparecen junto al anuncio de video principal.

A continuación, se muestra un ejemplo de la implementación:

 <html>
   <head>
     <!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
     <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>-->
     <!-- HEAD part -->
     <!-- Initialize the tagging library -->
     <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>

     <!-- Register your companion slots -->
     <script>
       window.googletag = window.googletag || { cmd: [] };

       googletag.cmd.push(function() {
         // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
         googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
             .addService(googletag.companionAds())
             .addService(googletag.pubads());
         googletag.companionAds().setRefreshUnfilledSlots(true);
         googletag.pubads().enableVideoAds();
         googletag.enableServices();
       });
     </script>
   </head>

   <body>
     <!-- BODY part -->
     <!-- Declare a div where you want the companion to appear. Use
          googletag.display() to make sure the ad is displayed. -->
     <div id="companionDiv" style="width:728px; height:90px;">
       <script>
         // Using the command queue to enable asynchronous loading.
         // The unit does not actually display now - it displays when
         // the video player is displaying the ads.
         googletag.cmd.push(function() { googletag.display('companionDiv'); });
       </script>
     </div>
   <body>
 </html>
 

Probar

Puedes ver el siguiente codepen para ver una implementación que funciona.

Ejemplo 2: Implementación de un espacio publicitario dinámico

A veces, es posible que no sepas cuántos espacios publicitarios tienes en una página hasta que se renderiza el contenido de la página. En la siguiente muestra de código, se muestra cómo definir las posiciones de anuncios mientras se renderiza la página. Este ejemplo es idéntico al ejemplo 1, excepto que registra las posiciones de anuncios donde se muestran.

Nota: Cuando el reproductor de video está a punto de mostrar los anuncios, solicita los espacios. Asegúrate de que los espacios estén definidos antes de que el reproductor muestre los anuncios.

 <html>
   <head>
     <!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
     <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script> -->
     <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
     <!-- HEAD part -->
     <!-- Initialize the tagging library -->
     <script>
       window.googletag = window.googletag || { cmd: [] };

       googletag.cmd.push(function() {
         googletag.companionAds().setRefreshUnfilledSlots(true);
         googletag.pubads().enableVideoAds();
         googletag.enableServices();
       });
     </script>
   </head>

   <body>
     <!-- BODY part -->
     <!-- Declare a div where you want the companion to appear. Use
          googletag.display() to make sure the ad is displayed. -->
     <div id="companionDiv" style="width:728px; height:90px;">
       <script>
         // Using the command queue to enable asynchronous loading.
         // The unit does not actually display now - it displays when
         // the video player is displaying the ads.
         googletag.cmd.push(function() {
           // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
           googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
               .addService(googletag.companionAds())
               .addService(googletag.pubads());
           googletag.display('companionDiv');
         });
       </script>
     </div>
   <body>
 </html>
 

Probar

Puedes ver el siguiente código para ver una implementación que funciona.

Ejemplo 3: Espacios publicitarios cargados previamente

En algunos casos, es posible que debas mostrar algo en el espacio de anuncios antes de que se solicite el anuncio complementario. Por lo general, los anuncios complementarios se solicitan junto con un anuncio de video. Esta solicitud podría ocurrir después de que se cargue la página. Por ejemplo, un anuncio complementario puede cargarse solo después de que el usuario hace clic en un video con clic para reproducir. En ese caso, debes poder solicitar un anuncio normal para que ocupe el espacio publicitario antes de que se solicite el anuncio complementario. Para admitir este caso de uso, puedes mostrar anuncios web estándares en el espacio complementario. Asegúrate de que los anuncios web se segmenten para los espacios complementarios. Puedes segmentar los espacios complementarios de la misma manera que segmentarías los espacios publicitarios web estándar.

Nota: El siguiente código de muestra es exactamente el mismo que el proporcionado en el ejemplo 1, a excepción de la sección que está en negrita. En este caso, proporcionas la red de publicidad y la ruta de acceso de la unidad de tu anuncio de carga previa en lugar de tu unidad de anuncios de video.

A continuación, se muestra un ejemplo de la implementación que se acaba de describir:

<html>
  <head>
    ...
    <!-- Register your companion slots -->
    <script>
      window.googletag = window.googletag || { cmd: [] };

      googletag.cmd.push(function() {
        // Supply YOUR_PRELOAD_NETWORK and YOUR_PRELOAD_UNIT_PATH.
        googletag.defineSlot('/YOUR_PRELOAD_NETWORK/YOUR_PRELOAD_UNIT_PATH', [728, 90], 'companionDiv')
            .addService(googletag.companionAds())
            .addService(googletag.pubads());
        googletag.companionAds().setRefreshUnfilledSlots(true);
        googletag.pubads().enableVideoAds();
        googletag.enableServices();
      });
    </script>
  </head>
  ...
</html>

Probar

Puedes ver el siguiente código para ver una implementación que funciona.

Cómo utilizar anuncios complementarios con la API de Ad

En esta sección, se describe cómo mostrar anuncios complementarios con la API de Ad.

Cómo mostrar anuncios complementarios

Para mostrar anuncios complementarios, primero obtén una referencia a un objeto Ad a través de cualquiera de los eventos AdEvent enviados desde AdsManager. Recomendamos usar el evento AdEvent.STARTED, ya que la visualización de los anuncios complementarios debe coincidir con la visualización del anuncio principal.

A continuación, usa este objeto Ad para llamar a getCompanionAds() y obtener un array de objetos CompanionAd. Aquí tienes la opción de especificar CompanionAdSelectionSettings, que te permite establecer filtros en los anuncios complementarios para el tipo de creatividad, el porcentaje de ajuste cercano, el tipo de recurso y los criterios de tamaño. Para obtener más información sobre estos parámetros de configuración, consulta la documentación de la API de HTML5.

Los objetos CompanionAd que muestra getCompanionAds ahora se pueden usar para mostrar los anuncios complementarios en la página según estos lineamientos:

1. Crea un espacio publicitario complementario <div> del tamaño requerido en la página.
2. En tu controlador de eventos para el evento STARTED, recupera el objeto Ad llamando a getAd().
3. Usa getCompanionAds() para obtener una lista de anuncios complementarios que coincidan con el tamaño del espacio publicitario complementario y CompanionAdSelectionSettings, y que tengan el mismo número de secuencia que la creatividad principal. Las creatividades que no tienen un atributo de secuencia se consideran que tienen el número de secuencia 0.
4. Obtén el contenido de una instancia de CompanionAd y configúralo como el HTML interno del <div> de ese espacio de anuncios.

Código de muestra

<!--Set a companion ad div in html page. -->
<div id="companion-ad-300-250" width="300" height="250"></div>

<script>

  // Listen to the STARTED event.
  adsManager.addEventListener(
    google.ima.AdEvent.Type.STARTED,
    onAdEvent);

  function onAdEvent(adEvent) {
    switch (adEvent.type) {
      case google.ima.AdEvent.Type.STARTED:
        // Get the ad from the event.
        var ad = adEvent.getAd();
        var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
        selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
        selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
        selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.IGNORE;
        // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
        var companionAds = ad.getCompanionAds(300, 250, selectionCriteria);
        var companionAd = companionAds[0];
        // Get HTML content from the companion ad.
        var content = companionAd.getContent();
        // Write the content to the companion ad slot.
        var div = document.getElementById('companion-ad-300-250');
        div.innerHTML = content;
        break;
    }
  }
</script>

Cómo mostrar anuncios complementarios fluidos

IMA ahora admite anuncios complementarios flexibles. El tamaño de estos anuncios complementarios se puede cambiar para que coincida con el tamaño del espacio publicitario. Cubren el 100% del ancho del div superior y, luego, cambian el tamaño de su altura para que se ajuste al contenido complementario. Se configuran con el tamaño complementario Fluid en Ad Manager. Consulta la siguiente imagen para saber dónde establecer este valor.

Elementos complementarios fluidos de GPT

Cuando usas complementos de GPT, puedes declarar un espacio complementario fluido actualizando el segundo parámetro del método defineSlot().

 <!-- Register your companion slots -->
 <script>
   googletag.cmd.push(function() {
     // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
     googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', ['fluid'], 'companionDiv')
         .addService(googletag.companionAds())
         .addService(googletag.pubads());
     googletag.companionAds().setRefreshUnfilledSlots(true);
     googletag.pubads().enableVideoAds();
     googletag.enableServices();
   });
 </script>

Socios fluidos de la API de anuncios

Cuando usas la API de Ad para los anuncios complementarios, puedes declarar un espacio complementario fluido actualizando google.ima.CompanionAdSelectionSettings.SizeCriteria al valor SELECT_FLUID.

<script>

  ...
    // Get the ad from the event.
    var ad = adEvent.getAd();
    var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
    selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
    selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
    selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_FLUID;
    // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
    // Note: Companion width and height are irrelevant when fluid size is used.
    var companionAds = ad.getCompanionAds(0, 0, selectionCriteria);
    var companionAd = companionAds[0];
  ...
    }
  }
</script>