Anuncios complementarios

Se recomienda asociar tus espacios publicitarios HTML in-page con espacios publicitarios superpuestos o de video. Esta relación entre los espacios publicitarios asociados se conoce como la relación principal-complementaria.

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

Usar anuncios complementarios

Para utilizar anuncios complementarios, sigue estos pasos:

1. Reserva tus anuncios complementarios

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

2. Solicita tus anuncios complementarios

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

3. Mostrar anuncios complementarios

Existen dos maneras de renderizar anuncios complementarios:

• Con Google Publisher Tag (GPT) automáticamente
  Si usas GPT para implementar tus anuncios complementarios, estos se mostrarán automáticamente siempre y cuando haya espacios publicitarios complementarios declarados en la página HTML y estén registrados en la API (es decir, el ID de div en JavaScript y HTML deben coincidir). Estos son algunos de los beneficios de usar GPT:
  • Reconocimiento de ranuras complementarias
  • Reabastecimiento complementario de la red del publicador, si la respuesta de VAST contiene menos anuncios complementarios que la cantidad de espacios definidos en la página HTML
  • Autocompletar complementario si falta un anuncio de video
  • Espacios publicitarios complementarios precargados para reproductores de video de reproducción por clic
  • Renderización complementaria automática, incluidos HTMLResource y iFrameResource
• Con la API de Google Ads, manualmente

Cómo usar anuncios complementarios con Google Publisher Tag

Google Publisher Tag (GPT) automatiza la visualización de anuncios complementarios HTML en tu sitio. Recomendamos que la mayoría de los publicadores usen GPT. El SDK de HTML5 reconoce ranuras de GPT si las etiquetas 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 divulgarlo a tus visitantes para cumplir con el requisito de recopilación de datos y divulgación de uso de tu contrato con Google.

Si alojas el SDK HTML5 en un IFrame,

Si cumples con los dos criterios que se indican a continuación, deberás incluir una secuencia de comandos de proxy adicional para que tus complementarias de GPT se muestren correctamente:

1. Carga el SDK de HTML5 en un IFrame.
2. Cargue las etiquetas GPT en la página web principal (fuera de IFrame).

Para que tus complementos 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 debería haber ninguna etiqueta GPT cargada dentro del IFrame cuando se carga el SDK.
• Las etiquetas GPT se deben cargar en la página superior, no en otro IFrame.
• La secuencia de comandos del proxy debe cargarse en el mismo marco que GPT (es decir, en la página principal).

Cómo declarar espacios publicitarios complementarios en HTML

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

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

• Ejemplo 1: Implementación básica de espacios publicitarios
• Ejemplo 2: Implementación de espacios publicitarios dinámicos
• Ejemplo 3: Espacios publicitarios precargados

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

En el siguiente código de muestra, se indica cómo incluir el archivo gpt.js en tu página HTML y declarar un espacio publicitario. El espacio publicitario declarado es de 728 × 90 px. GPT intenta llenar 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 publicitarios, la función googletag.display() puede renderizarlos en cualquier lugar de la página que los llame. Debido a que los espacios publicitarios son espacios complementarios, los anuncios no se muestran de inmediato. En su lugar, aparecen junto al anuncio de video principal.

Este es 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 código para una implementación funcional.

Ejemplo 2: implementación de espacios publicitarios dinámicos

A veces, es posible que no sepas cuántos espacios publicitarios tienes en una página hasta que se renderice el contenido de la página. En el siguiente código de muestra, se indica cómo definir espacios publicitarios mientras se renderiza la página. Este ejemplo es idéntico al ejemplo 1, con la excepción de que se registran los espacios publicitarios en los que se muestran realmente.

Nota: Cuando el reproductor de video está a punto de mostrar los anuncios, solicita las ranuras. 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 precargados

En algunos casos, es posible que debas mostrar algún elemento en el espacio publicitario antes de que se solicite el anuncio complementario. Por lo general, los anuncios complementarios se solicitan junto con un anuncio de video. Esta solicitud puede ocurrir después de que se carga la página. Por ejemplo, es posible que un anuncio complementario solo se cargue después de que el usuario haga clic en un video de reproducción por clic. En ese caso, necesitas poder solicitar un anuncio normal para llenar el espacio publicitario antes de que se solicite el anuncio complementario. Para admitir este caso de uso, puedes mostrar anuncios web estándar en el espacio complementario. Asegúrate de que los anuncios web estén segmentados para los espacios complementarios. Puedes segmentar los espacios publicitarios complementarios de la misma manera que lo harías con los espacios publicitarios web estándar.

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

Este es 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 lápiz de código para ver una implementación funcional.

Cómo usar anuncios complementarios con la API de anuncios

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

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 mostrar anuncios complementarios debe coincidir con el que se muestra en el anuncio principal.

A continuación, usa este objeto Ad para llamar a getCompanionAds() para obtener un array de objetos CompanionAd. Aquí, tienes la opción de especificar CompanionAdSelectionSettings, lo que te permite configurar 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 esta 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 el controlador de eventos para el evento STARTED, llama a getAd() a fin de recuperar el objeto Ad.
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 sin un atributo de secuencia se tratan como si tuvieran el número de secuencia 0.
4. Obtén el contenido de una instancia de CompanionAd y configúralo como el HTMl interno de <div> de ese espacio publicitario.

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>

Mostrar anuncios complementarios flexibles

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

Complementos fluidos de GPT

Cuando usas complementarias 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>

Complementos fluidos de la API de anuncios

Cuando utilizas la API de Google Ads para 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>