Ejemplos avanzados de etiquetas Google Publisher Tag

En este artículo se proporcionan ejemplos avanzados de las etiquetas Google Publisher Tag para su implementación en dispositivos móviles y computadoras de escritorio.

Obtenga más información acerca de cómo usar la Guía de referencia de la API de Google Publisher Tag. También puede obtener más información acerca de la implementación de GPT en el artículo Etiquetas de Google Publisher Tags de ejemplo.

Tenga en cuenta que los ejemplos que se muestran usan configuraciones de red de prueba, espacio publicitario y orientación. Su implementación necesitará personalizarse para la red y la configuración.

No use ni manipule objetos creados por GPT (incluidos cualquiera de los elementos dibujados) más allá de lo que se estipula en nuestra documentación de la API de GPT.

La estructura interna de GPT cambia con frecuencia y las propiedades sin documentar se pueden quitar sin previo aviso. Si su código se basa en esta estructura interna, es posible que deje de funcionar en cualquier momento.

Cómo etiquetar páginas con contenido infinito

Puede generar nuevo contenido de anuncios dinámicamente mediante GPT.

Las exclusiones de categoría y las publicaciones simultáneas garantizadas solo se respetan para anuncios publicados por la misma solicitud de SRA. Incluir muchas llamadas de SRA en una sola carga de página podría resultar en que se muestren anuncios competitivos en la misma página.

A continuación, podrá ver un ejemplo del código completo que puede usar para implementar etiquetas con contenido de la página infinito. El ejemplo muestra un botón en la parte inferior de la página para generar contenido nuevo de forma dinámica.

Implementación de ejemplo
<html>
<head>
<title>Infinite Scroll Example</title>

<script async src="https://www.googletagservices.com/tag/js/gpt.js"></script>
<script>
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
</script>

<script>

var adslot0;

 googletag.cmd.push(function() {

   // Declare any slots initially present on the page
   adslot0 = googletag.defineSlot('/6355419/Travel', [728, 90], 'leaderboard').
       setTargeting("test","infinitescroll").
       addService(googletag.pubads());

   // Infinite scroll requires SRA
   googletag.pubads().enableSingleRequest();

   // Disable initial load, we will use refresh() to fetch ads.
   // Calling this function means that display() calls just
   // register the slot as ready, but do not fetch ads for it.
   googletag.pubads().disableInitialLoad();

   // Enable services
   googletag.enableServices();
 });

 // Function to generate unique names for slots
 var nextSlotId = 1;
 function generateNextSlotName() {
   var id = nextSlotId++;
   return 'adslot' + id;
 }

 // Function to add content to page, mimics real infinite scroll
 // but keeps it much simpler from a code perspective.
 function moreContent() {

   // Generate next slot name
   var slotName = generateNextSlotName();

   // Create a div for the slot
   var slotDiv = document.createElement('div');
   slotDiv.id = slotName; // Id must be the same as slotName
   document.body.appendChild(slotDiv);

   // Create and add fake content 1
   var h1=document.createElement("H2")
   var text1=document.createTextNode("Dynamic Fake Content 1");
   h1.appendChild(text1);
   document.body.appendChild(h1);

   // Create and add fake content 2
   var h2=document.createElement("H2")
   var text2=document.createTextNode("Dynamic Fake Content 2");
   h2.appendChild(text2);
   document.body.appendChild(h2);

   // Define the slot itself, call display() to 
   // register the div and refresh() to fetch ad.
   googletag.cmd.push(function() {
     var slot = googletag.defineSlot('/6355419/Travel', [728, 90], slotName).
         setTargeting("test","infinitescroll").
         addService(googletag.pubads());

     // Display has to be called before
     // refresh and after the slot div is in the page.
     googletag.display(slotName);
     googletag.pubads().refresh([slot]);
   });
 }
</script>

<style>
 body > div {
	margin-bottom: 1em;
	border: solid 1px black;
	width: 728px
 }
 body > img {
	margin-bottom: 1em;
	display: block
 }
 body > button {
	position: fixed;
	bottom: 10px;
 }
</style>
</head>

<body>
 <h1>GPT Test Page - Infinite Scroll</h1>

 <!-- First fake content -->
 <text>
 <h2> Initial Fake Content </h2>
 </text>

 <!-- First ad -->
 <div id="leaderboard"> 
     <script>
        // Call display() to register the slot as ready
        // and refresh() to fetch an ad.
        googletag.cmd.push(function() {
          googletag.display('leaderboard');
          googletag.pubads().refresh([adslot0]);
        });
     </script> 
 </div>

 <!-- More initial fake content -->
 <text>
  <h2> Initial Fake Content 1 </h2>
  <h2> Initial Fake Content 2 </h2>
 </text>

 <!-- Button to load more content dynamically. -->
 <button onclick="moreContent()">More Content</button>

</body>
</html>

Actualización de espacios publicitarios específicos

Puede usar la función de actualización de etiquetas Google Publisher Tag asíncronas para volver a cargar anuncios dinámicamente sin tener que actualizar todo el contenido de su página.

Para cumplir con la política de Google y permitir que el inventario compita en Ad Exchange, debe declarar qué partes del inventario se actualizan.

Para implementar esta función, deberá generar una etiqueta GPT asíncrona y aplicar ciertas modificaciones. Esta implementación de ejemplo muestra dos espacios publicitarios y los botones correspondientes para actualizar los espacios con anuncios nuevos.

Implementación de ejemplo
<html>
<head>
<title>GPT Training - Slot Refresh</title>

<script> 

 // Load GPT asynchronously
 var googletag = googletag || {};
 googletag.cmd = googletag.cmd || [];
 (function() {
   var gads = document.createElement('script');
   gads.async = true;
   gads.type = 'text/javascript';
   var useSSL = 'https:' == document.location.protocol;
   gads.src = (useSSL ? 'https:' : 'http:') +
       '//www.googletagservices.com/tag/js/gpt.js';
   var node = document.getElementsByTagName('script')[0];
   node.parentNode.insertBefore(gads, node);
 })();
</script>

<script>

 // GPT slots
 var gptAdSlots = [];

 googletag.cmd.push(function() {

  // Define the first slot
  gptAdSlots[0] = googletag.defineSlot('/6355419/Travel',[728, 90],'leaderboard0').
      setTargeting('test', 'refresh').
      addService(googletag.pubads());

  // Define the second slot
  gptAdSlots[1] = googletag.defineSlot('/6355419/Travel',[728, 90],'leaderboard1').
      setTargeting('test', 'refresh').
      addService(googletag.pubads());

  // Configure SRA
  googletag.pubads().enableSingleRequest();

  // Start ad fetching
  googletag.enableServices();
 });

 // Button action which refreshes the first slot
 var refreshFirstSlot = function() {
   googletag.cmd.push(function() {
     googletag.pubads().refresh([gptAdSlots[0]]);
   });
 };

 // Button action which refreshes the second slot
 var refreshSecondSlot = function() {
   googletag.cmd.push(function() {
     googletag.pubads().refresh([gptAdSlots[1]]);
   });
 };

 // Button action which refreshes both slots
 var refreshBothSlots = function() {
   googletag.cmd.push(function() {
     googletag.pubads().refresh([gptAdSlots[0], gptAdSlots[1]]);
   });
 };

 // Button action which clears all slots
 var clearAllSlots = function() {
   googletag.cmd.push(function() {
     googletag.pubads().clear();
   });
 };
</script>
</head>

<body>
 <div>
  <h1>GPT Training - Slot Refresh</h1>
  <div id='leaderboard0' style="width:728px;height:90px;"> 
     <script>
          googletag.cmd.push(function() {
            googletag.display('leaderboard0');
          });
     </script> 
  </div>

  <div id='leaderboard1' style="width:728px;height:90px;"> 
     <script>
          googletag.cmd.push(function() {
            googletag.display('leaderboard1');
          });
     </script> 
  </div>
 </div>

 <div> 
  <!-- Refresh the first slot -->
  <button onclick="refreshFirstSlot();">Refresh Top Ad</button>

  <!-- Refresh the second slot -->
  <button onclick="refreshSecondSlot();">Refresh Bottom Ad</button>

  <!-- Refresh both slots -->
  <button onclick="refreshBothSlots();">Refresh Both Ads</button>

  <!-- Clear slots -->
  <button onclick="clearAllSlots();">Clear Ads</button>
 </div>

</body>
</html>

Cómo probar manualmente la función refresh()

Para probar la función refresh() de forma manual, puede agregar temporalmente un botón de actualización a su página web pegando el siguiente fragmento de código justo antes de la etiqueta </body>. Cuando haga clic en el botón, se actualizarán todos los espacios publicitarios de la página, pero no la página en sí.

<form onsubmit="googletag.pubads().refresh();return false;">
  <input type="submit" value="refresh" />
</form>
 

Obtenga más información acerca del funcionamiento de la función de actualización en GPT en la Guía de referencia de la API de Google Publisher Tag.

Cómo etiquetar para el diseño responsivo

Puede etiquetar su página para el diseño responsivo con GPT. A continuación, se muestra un ejemplo del código completo que puede usar para implementarlo. Para probar la funcionalidad responsiva en el ejemplo, cambie el tamaño de su ventana y actualice la página.

Los anuncios responsivos de GPT de este ejemplo no cambian de tamaño dinámicamente cuando se cambia el tamaño del navegador. Puede agregar su propio código personalizado para actualizar los espacios publicitarios al cambiar el tamaño.

Implementación de ejemplo
<html>
<head>
<title>GPT Training - Responsive Test Page</title>
<script async src="https://www.googletagservices.com/tag/js/gpt.js"></script>
<script>
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
</script>
<script>

 // GPT slots
 var gptAdSlots = [];
 googletag.cmd.push(function() {

   // Define a size mapping object. The first parameter to addSize is
   // a viewport size, while the second is a list of allowed ad sizes.
   var mapping = googletag.sizeMapping().

   // Small ad
   addSize([100, 100], [88, 31]). 

   // Accepts both common mobile banner formats
   addSize([320, 400], [[320, 50], [300, 50]]). 
		
   // Same width as mapping above, more available height
   addSize([320, 700], [300, 250]).

   // Landscape tablet 
   addSize([750, 200], [728, 90]). 

   // Desktop
   addSize([1050, 200], [1024, 120]).build();

   // Define the GPT slot
   gptAdSlots[0] = googletag.defineSlot('/6355419/travel', [320, 50], 'ad-slot').
       defineSizeMapping(mapping).
       addService(googletag.pubads());
   googletag.pubads().setTargeting("test","responsive");

   // Start ad fetching
   googletag.enableServices();
 });
</script>
</head>

<body>
<h1>GPT Training - Responsive Test Page</h1>

<div id="ad-slot"> 
   <script>
     googletag.cmd.push(function() {
       googletag.display('ad-slot');
     });
   </script> 
</div>

<p><span>GPT responsive ads do not resize on change in the size of the browser.
  You can add your own custom code to refresh the ad slots on resize.
  To demonstrate responsive capabilities, re-size your window and refresh the page.</span></p>

</body>
</html>

Obtenga más información sobre la creación de anuncios responsivos.

Cómo etiquetar para anuncios nativos con tamaño flexible

GPT se puede configurar para mostrar un anuncio nativo con el tamaño "flexible" personalizado. En este caso, el espacio publicitario tendrá el ancho de su contenedor principal y se modificará el tamaño de la altura para ajustarse al contenido de la creatividad. A continuación, se muestra un ejemplo del código completo que puede usar para implementar esta funcionalidad.

Implementación de ejemplo

Si va a agregar el tamaño "flexible" a una etiqueta Google Publisher Tag existente, asegúrese de que se agregue "fluid" como tamaño requerido. Por ejemplo:

.addSize([640, 480], 'fluid')

<html>
<head>
<title>GPT Training - Native ads and fluid size</title>
<script>
 // Load GPT asynchronously
 var googletag = googletag || {};
 googletag.cmd = googletag.cmd || [];
 (function() {
   var gads = document.createElement('script');
   gads.async = true;
   var useSSL = 'https:' == document.location.protocol;
   gads.src = (useSSL ? 'https:' : 'http:') +
       '//www.googletagservices.com/tag/js/gpt.js';
   var node = document.getElementsByTagName('script')[0];
   node.parentNode.insertBefore(gads, node);
 })();
</script>
<script>

 // GPT slots
 var gptAdSlots = [];
 googletag.cmd.push(function() {


   // Define the GPT slot
   gptAdSlots[0] = googletag.defineSlot('/6355419/travel', 'fluid', 'ad-slot').
       addService(googletag.pubads());

   // Start ad fetching
   googletag.enableServices();
 });
</script>
</head>

<body>
<h1>GPT Training - Native Test Page</h1>

<div id="ad-slot" style=”width:600px;”> 
   <script>
     googletag.cmd.push(function() {
       googletag.display('ad-slot');
     });
   </script> 
</div>

</body>
</html>

Obtenga más información sobre los anuncios nativos.

Cómo solicitar o dibujar anuncios basados en eventos

Puede solicitar anuncios basados en eventos con etiquetas Google Publisher Tags. Por ejemplo, es posible que quiera publicar un anuncio cuando un usuario hace clic en un botón.

Implementación de ejemplo
<html>
  <head>
    <meta charset="utf-8">
    <title>Event-based ad requesting/rendering</title>
    <script async src="https://www.googletagservices.com/tag/js/gpt.js"></script>
    <script>
      (window.googletag || (googletag = {cmd: []})).cmd.push(function() {
        googletag
            .defineSlot('/6075/gpttraining', [300, 250], 'div-for-slot')
            .addService(googletag.pubads());
        googletag.pubads().disableInitialLoad();
        googletag.enableServices();
      });
    </script>
  </head>
  <body>
    <div id="div-for-slot" style="width: 300px; height: 250px;">
      <script>
        googletag.cmd.push(function() {
          // This will only register the slot.
          // Ad will be fetched only when refresh is called.
          googletag.display('div-for-slot');
        });
      </script>
    </div>
    <button
        onclick="
          googletag.cmd.push(function() {
            googletag.pubads().refresh();
          });
          this.parentNode.removeChild(this);
        ">
      Show Ad
    </button>
  </body>
</html>

Carga diferida

La carga diferida permite que las páginas se carguen con mayor rapidez al detener las solicitudes y el dibujo de los anuncios hasta que se acercan a la vista del puerto del usuario, lo que reduce la competencia y el consumo de los recursos, además de mejorar el porcentaje de visibilidad.

Mediante la carga diferida en SRA, cuando el primer espacio publicitario aparece en la vista del puerto que especifica el parámetro fetchMarginPercent, se realiza la llamada para ese anuncio y el resto de los espacios publicitarios. Esta acción ocasionará una discrepancia entre la cantidad de impresiones descargadas y las impresiones de Vista activa.

La carga diferida no es totalmente compatible con el método collapseEmptyDivs().

Implementación de ejemplo
<html>
<head>
<script>var googletag = window.googletag || {cmd: []};</script>
<script async src="//www.googletagservices.com/tag/js/gpt.js"></script>
<script>
googletag.cmd.push(function() {
  googletag.defineSlot('/1234567/sports', [728,90], 'div-1').
    addService(googletag.pubads());
  googletag.defineSlot('/1234567/news', 'fluid', 'div-2').
    addService(googletag.pubads());
  googletag.defineSlot('/1234567/weather', [160, 600], 'div-3').
    addService(googletag.pubads());

  // Some examples of ways to enable below. Normally, only one of these
  // methods should be used.

  // A) Enable with defaults.
  googletag.pubads().enableLazyLoad();

  // B) Enable without lazy fetching. Additional calls override previous
  // ones.
  googletag.pubads().enableLazyLoad({fetchMarginPercent: -1});

  // C) Enable lazy loading with...
  googletag.pubads().enableLazyLoad({
    fetchMarginPercent: 500,  // Fetch slots within 5 viewports.
    renderMarginPercent: 200,  // Render slots within 2 viewports.
    mobileScaling: 2.0  // Double the above values on mobile.
  });

  googletag.enableServices();
});
</script>
</head>
<body>

<!-- 
     As defined by lazy load settings, initially Slot 1 will be fetched and
     rendered on mobile and desktop. Slot 2 will be fetched, on mobile and
     desktop, but will not be rendered on desktop. Slot 3 will not be fetched
     or rendered on mobile and desktop.
-->

<div id="div-1">
  <script>
    googletag.cmd.push(function() {googletag.display('div-1');});
  </script>
</div>

<!-- 3 viewport tall div to place next slot 3 viewports away. -->
<div style="height:300vh"></div>
<div id="div-2">
  <script>
    googletag.cmd.push(function() {googletag.display('div-2');});
  </script>
</div>

<!-- 9 viewport tall div to place next slot 12 viewports away. -->
<div style="height:900vh"></div>
<div id="div-3">
  <script>
    googletag.cmd.push(function() {googletag.display('div-3');});
  </script>
</div>
</body>
</html>
Obtenga más información sobre la carga diferida.

Cómo controlar el comportamiento del contenedor de SafeFrame con GPT

GPT proporciona control detallado del contenedor de SafeFrame mediante el método setSafeFrameConfig. Este método toma un objeto JSON como entrada y le permite configurar determinado comportamiento de los contenedores de SafeFrame creados por GPT.

Este método solo impacta en el comportamiento de los anuncios dibujados en un SafeFrame. Sin embargo, no controla si un anuncio se dibuja en un SafeFrame, ya que se determina en función del tipo de creatividad y de la configuración de SafeFrame.

Para minimizar las posibilidades de que se publiquen creatividades maliciosas, recomendamos habilitar SafeFrame siempre que sea posible, además del atributo sandbox de HTML5 a fin de evitar la navegación en el nivel superior. También puede usar el parámetro setForceSafeFrame en la API de GPT para forzar que los anuncios en espacios publicitarios específicos se dibujen siempre en SafeFrame.

El método setSafeFrameConfig devuelve un valor booleano que indica que la configuración se analizó correctamente.

Detalles del objeto de configuración

El objeto de configuración toma como entrada un objeto JSON simple que es un mapa de claves y valores (los valores válidos se describen a continuación).

Cualquier otra clave se ignora. Si se encuentran otros valores, además de true/false, la configuración se rechaza y da como resultado un error.

Nombre de clave Descripción Valores válidos
allowOverlayExpansion Las creatividades pueden expandirse con el modo de superposición en la API de SafeFrame. La creatividad expandida abarca contenido en el resto de la página. true
false
allowPushExpansion Las creatividades pueden expandirse con el modo de despliegue en la API de SafeFrame. La creatividad expandida despliega el contenido en el resto de la página. true
false
sandbox Instancias de contenedores de SafeFrame en los que se haya definido el atributo sandbox para evitar la navegación en el nivel superior. Si usa este atributo, asegúrese de que los clics en el anuncio abran la página de destino en una pestaña nueva, en lugar de navegar desde la página actual. De este modo, se reducen los problemas de compatibilidad de sus anuncios en navegadores que admiten en mayor o menor medida este atributo.
 
Solo funciona en navegadores que admiten el nuevo atributo sandbox de HTML5 en iframes.

Al definir esta clave, se bloquean los anuncios con complementos como Flash. Es posible que, al hacerlo, los anuncios o las páginas de destino no funcionen correctamente en algunos navegadores, sobre todo en los de computadoras de escritorio.
true
Implementación de ejemplo
Ejemplo Descripción
googletag.pubads().setSafeFrameConfig({sandbox: true}); Todos los anuncios de la página que se dibujan dentro de SafeFrames usan el atributo sandbox.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({sandbox:true});
Solo se dibuja el espacio publicitario 1 dentro del SafeFrame de la zona de prueba. No afecta otros espacios publicitarios.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({allowOverlayExpansion: false});
Los anuncios dibujados en SafeFrames en el espacio publicitario 1 no pueden realizar la expansión de superposición.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({allowOverlayExpansion: false, sandbox:true});
Los anuncios dibujados en SafeFrames en el espacio publicitario 1 no pueden realizar la expansión de superposición. También define el atributo sandbox.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({allowPushExpansion: false, sandbox:true});
Los anuncios dibujados en SafeFrames en el espacio publicitario 1 no pueden realizar la expansión de despliegue.

Obtenga más información acerca de cómo dibujar creatividades para usar SafeFrame.

¿Te resultó útil esto?
¿Cómo podemos mejorarla?