Agrega compatibilidad con anuncios complementarios

Selecciona la plataforma: HTML5 Android iOS

Es posible que quieras asociar tus espacios publicitarios HTML in-page con espacios publicitarios de video o superpuestos. Esta relación entre los espacios publicitarios asociados se conoce como la relación principal-complementario.

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

Usa anuncios complementarios

Para usar anuncios complementarios, sigue estos pasos:

1. Coordina tus anuncios complementarios

Primero, debes reservar los anuncios complementarios que quieras mostrar con tus anuncios principales. 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. Muestra anuncios complementarios

Existen dos maneras de renderizar anuncios complementarios:

• Automáticamente, con Google Publisher Tag (GPT).

  Si usas GPT para implementar tus anuncios complementarios, estos se mostrarán automáticamente siempre que 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 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
  • Autocompletar anuncios complementarios si falta un anuncio de video
  • Espacios publicitarios complementarios precargados para reproductores de video de clic para reproducir
  • Renderización de anuncios complementarios automatizada, incluidos HTMLResource y iFrameResource

• Manualmente con la API de Ad.

Cómo usar anuncios complementarios con Google Publisher Tag

La etiqueta Google Publisher Tag (GPT) automatiza la publicación de anuncios complementarios HTML en tu sitio. Recomendamos que la mayoría de los publicadores usen la GPT. El SDK de HTML5 reconoce los espacios de GPT si GPT se carga 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 recopilación y 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 de proxy adicional para que tus anuncios complementarios de GPT se muestren correctamente:

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

Para que tus anuncios complementarios 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 se debe cargar ninguna GPT dentro del iframe que carga el SDK.
• GPT debe cargarse en la página principal, 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 un código de muestra para diferentes situaciones. En el caso del SDK de HTML5, debes agregar un poco de JavaScript a tu página HTML y declarar los espacios publicitarios complementarios.

Nota: En cada uno de los siguientes ejemplos, asegúrate de proporcionar un network y un 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 uses).

• Ejemplo 1: Implementación básica de un espacio publicitario
• Ejemplo 2: Implementación de un espacio publicitario dinámico
• Ejemplo 3: Espacios publicitarios precargados

Ejemplo 1: Implementación básica de un espacio publicitario

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 x 90 px. GPT intenta completar el espacio con cualquier anuncio complementario que se devuelva en la respuesta de VAST y que coincida con este tamaño. Después de que se declaran los espacios publicitarios, la función googletag.display() puede renderizarlos dondequiera que se llame en la página. Como los espacios son complementarios, los anuncios no se muestran de inmediato. En cambio, aparecen junto con el 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 consultar el siguiente codepen para ver una implementación en funcionamiento.

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 renderice el contenido de la página. En el siguiente código de muestra, se indica cómo definir los espacios publicitarios mientras se renderiza la página. Este ejemplo es idéntico al Ejemplo 1, excepto que registra los espacios publicitarios donde realmente se muestran.

Nota: Cuando el reproductor de video está a punto de mostrar los anuncios, solicita los espacios. Asegúrate de que los espacios se definan 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 consultar el siguiente código para ver una implementación en funcionamiento.

Ejemplo 3: Espacios publicitarios precargados

En algunos casos, es posible que debas mostrar algo 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 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 haga clic en un video de clic para reproducir. En ese caso, debes poder solicitar un anuncio normal para rellenar 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 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 se proporciona para el 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 anuncios de tu anuncio de precarga en lugar de tu 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 consultar el siguiente CodePen para ver una implementación en funcionamiento.

Cómo usar anuncios complementarios con la API de Ad

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

Muestra anuncios complementarios gráficos

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 anuncios complementarios debe coincidir con la visualización del anuncio principal.

Luego, 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 IMA para CompanionAdSelectionSettings.

Los objetos CompanionAd que devuelve getCompanionAds ahora se pueden usar para mostrar los anuncios complementarios en la página con 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, 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 con el número de secuencia 0.
4. Obtén el contenido de una instancia de CompanionAd y establécelo como el HTML interno del <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>

Muestra anuncios complementarios flexibles

Ahora el SDK de IMA admite anuncios complementarios flexibles. Estos anuncios complementarios pueden cambiar de tamaño para coincidir con el del espacio publicitario. Ocupan el 100% del ancho del div superior y, luego, cambian su altura para que se ajuste al contenido del anuncio complementario. Se configuran con el tamaño de anuncio complementario Fluid en Ad Manager. Consulta la siguiente imagen para ver dónde establecer este valor.

Elementos complementarios flexibles de GPT

Cuando usas anuncios complementarios de GPT, puedes declarar un espacio complementario flexible 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>

Anuncios complementarios flexibles de la API de anuncios

Cuando usas la API de Ad para anuncios complementarios, puedes declarar un espacio complementario flexible 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>