Agrega compatibilidad con anuncios complementarios

Selecciona la plataforma: HTML5 Android iOS

Es posible que desees asociar tus espacios publicitarios HTML en la página con espacios publicitarios de video o superpuestos. Esta relación entre los espacios publicitarios asociados se conoce como 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.

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 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

Hay dos formas de renderizar anuncios complementarios:

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

  Si usas GPT para implementar tus anuncios complementarios, estos se mostrarán automáticamente siempre que haya espacios publicitarios 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). Algunos beneficios de usar GPT son los siguientes:

  • Reconocimiento de espacios publicitarios complementarios
  • Reabastecimiento complementario de la red del publicador si la respuesta de VAST contiene menos anuncios complementarios que los 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

• Manualmente con la API de Ad.

Usa anuncios complementarios con Google Publisher Tag

La etiqueta Google Publisher Tag (GPT) automatiza la visualización de anuncios HTML complementarios en tu sitio. Recomendamos que la mayoría de los publicadores usen 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 Google Interactive Media Ads para publicar 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 siguientes criterios, debes incluir una secuencia de comandos proxy adicional para que tus elementos 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 elementos complementarios se muestren en esta situación, debes cargar la secuencia de comandos 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 ninguna GPT cargada dentro del iframe que carga el SDK.
• GPT debe cargarse en la página superior, no en otro iframe.
• La secuencia de comandos proxy debe cargarse en el mismo marco que GPT (es decir, en la página principal).

Declara 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. Para el 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 un network y un unit-path válidos en la llamada al 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 muestra 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 los anuncios complementarios que se muestran en la respuesta de VAST que coinciden con este tamaño. Una vez que se declaran los espacios publicitarios, la función googletag.display() puede renderizarlos donde se llame en la página. Debido a que los espacios son complementarios, los anuncios no se muestran de inmediato. En cambio, aparecen junto con el 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 codepen para una implementación en funcionamiento.

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

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 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 reproducción con un clic. En ese caso, necesitas la capacidad de solicitar un anuncio normal para completar 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 estén segmentados a los espacios complementarios. Puedes segmentar los espacios complementarios de la misma manera que segmentarías los espacios publicitarios web estándares.

Nota: El siguiente código de muestra es exactamente el mismo que el que se proporciona para el Ejemplo 1, con la excepción de la sección que está en negrita. En este caso, proporcionas la red publicitaria y la ruta de la unidad de tu anuncio precargado 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 ver el siguiente codepen para una implementación en funcionamiento.

Usa 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

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. Te recomendamos que uses el evento AdEvent.STARTED, ya que la visualización de 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 CompanionAd objetos. 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 esta configuración, consulta la documentación de la API CompanionAdSelectionSettingsde IMA.

Ahora se pueden usar los objetos CompanionAd que muestra getCompanionAds para mostrar los anuncios complementarios en la página con estas instrucciones:

1. Crea un espacio publicitario complementario <div> del tamaño requerido en la página.
2. En tu controlador de eventos para el STARTED evento, recupera el Ad objeto 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 con un atributo de secuencia faltante se tratan como si tuvieran el número de secuencia 0.
4. Obtén el contenido de una CompanionAd instancia 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

IMA ahora admite anuncios complementarios flexibles. Estos anuncios complementarios pueden cambiar de tamaño para que coincidan con el tamaño del espacio publicitario. Llenan el 100% del ancho del div superior y, luego, cambian su altura para que se ajuste al contenido del elemento 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 flexibles de GPT

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

Elementos complementarios flexibles de la API de Ad

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>