Controle la carga y la actualización de anuncios

En los ejemplos de los conceptos básicos y de introducción, el método display() de la biblioteca de Google Publisher Tag (GPT) se usa para registrar y mostrar un espacio publicitario. Sin embargo, existen ocasiones en las que puede ser preferible o incluso necesario separar estas acciones para controlar con mayor precisión cuándo se carga el contenido del anuncio. Por ejemplo, cuando trabajas con una plataforma de administración de consentimiento o solicitas contenido del anuncio como resultado de una acción del usuario.

En esta guía, exploraremos los mecanismos que proporciona GPT para controlar la carga del contenido del anuncio y recuperar contenido nuevo a pedido. El código completo para este ejemplo se puede encontrar en la página de muestra de solicitudes basadas en eventos.

Controle la carga de anuncios

De forma predeterminada, el comportamiento del método display() es registrar, solicitar y renderizar contenido de anuncios en un espacio publicitario. La solicitud y el procesamiento automáticos del contenido del anuncio se pueden inhabilitar mediante el método PubAdsService.disableInitialLoad().

Con la carga inicial inhabilitada, las llamadas a display() solo registrarán el espacio publicitario. No se cargará ningún contenido del anuncio hasta que se realice una segunda acción. Esto te permite controlar con precisión cuándo se realizan las solicitudes de anuncios.

Para evitar realizar solicitudes de anuncios no intencionales, debes llamar a disableInitialLoad() antes de habilitar el servicio y antes de llamar a display().

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Request GPT ads based on events." />
    <title>Event-based ad requests</title>
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    <script>
      window.googletag = window.googletag || { cmd: [] };

      googletag.cmd.push(() => {
        // Define the ad slot.
        googletag
          .defineSlot("/6355419/Travel", [728, 90], "div-for-slot")
          .setTargeting("test", "event")
          .addService(googletag.pubads());

        // Disable initial load.
        // This prevents GPT from automatically fetching ads when display is called.
        googletag.pubads().disableInitialLoad();
        googletag.enableServices();
      });
    </script>
    <style></style>
  </head>
  <body>
    <div id="div-for-slot" style="width: 300px; height: 250px"></div>
    <script>
      googletag.cmd.push(() => {
        // Register the ad slot.
        // An ad will not be fetched until refresh is called.
        googletag.display("div-for-slot");

        // Register click event handler.
        document.getElementById("showAdButton").addEventListener("click", () => {
          googletag.cmd.push(() => {
            googletag.pubads().refresh();
          });
        });
      });
    </script>
  </body>
</html>

En este ejemplo, la carga inicial está inhabilitada y se garantiza que no se realicen solicitudes de anuncios y que no se dibuje contenido de anuncios cuando se llame a display(). El espacio está listo para aceptar y mostrar un anuncio, pero no se realizará una solicitud de anuncio hasta que se actualice el espacio.

Actualizar

El método PubAdsService.refresh() se usa para propagar una o más ranuras con contenido del anuncio nuevo. Este método se puede usar en ranuras que aún no hayan cargado el contenido (debido a disableInitialLoad()) o para reemplazar el contenido de un espacio ya propagado. Sin embargo, solo las ranuras que se registraron mediante una llamada a display() son aptas para actualizarse.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Request GPT ads based on events." />
    <title>Event-based ad requests</title>
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    <script>
      window.googletag = window.googletag || { cmd: [] };

      googletag.cmd.push(() => {
        // Define the ad slot.
        googletag
          .defineSlot("/6355419/Travel", [728, 90], "div-for-slot")
          .setTargeting("test", "event")
          .addService(googletag.pubads());

        // Disable initial load.
        // This prevents GPT from automatically fetching ads when display is called.
        googletag.pubads().disableInitialLoad();
        googletag.enableServices();
      });
    </script>
    <style></style>
  </head>
  <body>
    <div id="div-for-slot" style="width: 300px; height: 250px"></div>
    <button id="showAdButton">Show/Refresh Ad</button>
    <script>
      googletag.cmd.push(() => {
        // Register the ad slot.
        // An ad will not be fetched until refresh is called.
        googletag.display("div-for-slot");

        // Register click event handler.
        document.getElementById("showAdButton").addEventListener("click", () => {
          googletag.cmd.push(() => {
            googletag.pubads().refresh();
          });
        });
      });
    </script>
  </body>
</html>

En este ejemplo modificado, cuando un usuario hace clic en el botón "Mostrar/Actualizar anuncio", se llama al método refresh(). Esto activa una solicitud para recuperar contenido de anuncios nuevo y cargarlo en el espacio registrado, lo que reemplaza cualquier contenido preexistente.

Ten en cuenta que, en el ejemplo anterior, se llama al método refresh() sin parámetros, lo que tiene el efecto de actualizar todos los espacios publicitarios registrados. Sin embargo, también es posible actualizar espacios publicitarios específicos pasando un array de espacios publicitarios al método refresh(). Consulta la muestra Actualiza los espacios publicitarios para ver un ejemplo de esto.

Prácticas recomendadas

Cuando trabajas con refresh(), debes seguir algunas prácticas recomendadas.

  1. No se actualice demasiado rápido.

    Si actualiza los espacios publicitarios con demasiada rapidez, es posible que se limiten sus solicitudes de anuncios. Para evitar esto, evita actualizar las ranuras con más de una vez cada 30 segundos.

  2. No llames a clear() innecesariamente

    Cuando actualices un espacio publicitario, no llames a PubAdsService.clear() primero. Esto no es necesario, ya que refresh() reemplaza el contenido del espacio publicitario especificado, independientemente de si se cargó antes algún contenido de anuncio. Si llamas a clear() de inmediato antes de llamar a refresh(), solo aumentará la cantidad de tiempo que un usuario verá un espacio en blanco.

  3. Solo actualizar los espacios publicitarios visibles

    El uso de refresh() para reemplazar el contenido de los espacios publicitarios que nunca son visibles puede reducir significativamente su tasa de Vista activa. ImpressionViewableEvent se puede usar para determinar cuándo un espacio publicitario se hizo visible, como en el siguiente ejemplo.

    googletag.cmd.push(function() {
      var REFRESH_KEY = 'refresh';
      var REFRESH_VALUE = 'true';
    
      googletag.defineSlot('/6355419/Travel',[728, 90], 'div-for-slot')
          .setTargeting(REFRESH_KEY, REFRESH_VALUE)
          .setTargeting('test', 'event')
          .addService(googletag.pubads());
    
      // Number of seconds to wait after the slot becomes viewable.
      var SECONDS_TO_WAIT_AFTER_VIEWABILITY = 60;
    
      googletag.pubads().addEventListener('impressionViewable', function(event) {
        var slot = event.slot;
        if (slot.getTargeting(REFRESH_KEY).indexOf(REFRESH_VALUE) > -1) {
          setTimeout(function() {
            googletag.pubads().refresh([slot]);
          }, SECONDS_TO_WAIT_AFTER_VIEWABILITY * 1000);
        }
      });
    
      googletag.enableServices();
    });