Exemplos avançados de Tags do editor do Google

Este artigo fornece exemplos avançados de Tags do editor do Google para implementações em computadores desktop e dispositivos móveis.

Saiba mais no Guia de Referência da Google Publisher Tag API. Também é possível consultar informações sobre a implementação da GPT no artigo Exemplos de Tag do editor do Google.

Os exemplos apresentados usam uma rede de testes, um local do anúncio e configurações de segmentação. A implementação precisará ser personalizada para sua rede e configuração.

Não acesse nem manipule objetos criados pela GPT (inclusive aqueles renderizados por ela) além do que está descrito na documentação da API da GPT.

Os componentes internos da GPT são alterados com frequência, e as propriedades não documentadas podem ser removidas sem aviso. Se o código depender desses componentes, ele poderá ser corrompido a qualquer momento.

Inclusão de tags em páginas com conteúdo infinito

É possível gerar dinamicamente novo conteúdo do anúncio usando a GPT.

As exclusões de categoria e os roadblocks só são válidos para anúncios veiculados pela mesma solicitação de SRA. A inclusão de várias chamadas de SRA em um único carregamento de página pode resultar na exibição de anúncios concorrentes na mesma página.

Veja abaixo um exemplo do código completo que seria usado na implementação de tags com conteúdo infinito de página. O exemplo apresenta um botão na parte inferior da página para gerar o novo conteúdo dinamicamente.

Implementação de exemplo
<html>
<head>
<title>Infinite Scroll Example</title>

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
    window.googletag = window.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>

Atualização de locais de anúncio específicos

Use o recurso de atualização de uma Tag do editor do Google assíncrona para atualizar anúncios de maneira dinâmica, sem a necessidade de recarregar todo o conteúdo da página.

Para obedecer à política do Google e permitir que seu inventário concorra no Ad Exchange, é preciso declarar quais partes do inventário são atualizadas.

Para implementar esse recurso, é preciso gerar uma tag da GPT assíncrona e aplicar algumas modificações. O exemplo apresenta dois locais de anúncio e os botões correspondentes que os atualizam com novos anúncios.

Implementação de exemplo
<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:') +
       '//securepubads.g.doubleclick.net/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>

Testar manualmente a função refresh()

Para testar manualmente a função refresh(), adicione temporariamente um botão Atualizar à sua página da Web. Para isso, cole snippet de código a seguir imediatamente antes da tag </body>. Quando você clicar no botão, todos os espaços de anúncios na página serão atualizados, mas a página em si não se atualizada.

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

Saiba mais sobre o uso da função de atualização com a GPT no Guia de Referência de API da Tag do editor do Google.

Inclusão de tags para design responsivo

É possível agilizar o design de sua página usando a GPT. Veja abaixo um exemplo do código completo que seria usado para implementar o design responsivo. Para testar o recurso de agilidade no exemplo, redimensione a janela e atualize a página.

Os anúncios responsivos da GPT no exemplo não são redimensionados quando o tamanho do navegador é alterado. É possível adicionar seu código personalizado para atualizar os espaços de anúncio ao redimensiona.

Implementação de exemplo
<html>
<head>
<title>GPT Training - Responsive Test Page</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
    window.googletag = window.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>

Saiba mais sobre Como criar anúncios responsivos.

Tagging de anúncios nativos com tamanho flexível

A GPT pode ser configurada para exibir um anúncio nativo com o tamanho "flexível" personalizado. Nesse caso, o local do anúncio terá a largura do contêiner pai e precisará redimensionar a altura para se ajustar ao conteúdo do criativo nativo. Veja abaixo uma amostra do código completo que você usaria para implementar essa funcionalidade.

Implementação de exemplo

Se você adicionar o tamanho "flexível" a uma Tag do editor do Google existente, esse tamanho deve ser adicionado como um tamanho solicitado. Por exemplo:

.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:') +
       '//securepubads.g.doubleclick.net/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>

Saiba mais sobre os anúncios nativos.

Solicitação/renderização de anúncios com base em eventos

É possível solicitar anúncios com base em eventos usando as Tags do editor do Google. Por exemplo, se você quiser veicular um anúncio quando um usuário clicar em um botão.

Implementação de exemplo
<html>
  <head>
    <meta charset="utf-8">
    <title>Event-based ad requesting/rendering</title>
    <script async src="https://securepubads.g.doubleclick.net/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>

Carregamento lento

O carregamento lento faz com que as páginas sejam carregadas mais rapidamente, reduz o consumo e a contenção de recursos e melhora a taxa de visibilidade, pausando a solicitação e a renderização de anúncios até que a janela de visualização do usuário esteja próxima.

Com esse recurso na SRA, quando o primeiro espaço do anúncio chega à janela de visualização especificada pelo parâmetro fetchMarginPercent, a chamada para esse anúncio e para todos os outros espaços é feita. Isso resultará em uma discrepância entre o número de impressões obtidas por download e do Active View.

O carregamento lento não é totalmente compatível com o método collapseEmptyDivs().

Implementação de exemplo
<html>
<head>
<script>var googletag = window.googletag || {cmd: []};</script>
<script async src="//securepubads.g.doubleclick.net/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>
Saiba mais sobre o carregamento lento.

Controlar o comportamento do contêiner do SafeFrame com a GPT

A GPT fornece um controle refinado do contêiner do SafeFrame por meio do método setSafeFrameConfig. Esse método usa um objeto JSON como entrada e permite que você configure certos comportamentos de contêineres do SafeFrame criados pela GPT.

Esse método afeta somente o comportamento dos anúncios renderizados em um SafeFrame. Ele não controla se um anúncio é renderizado em um SafeFrame. Isso é determinado pelo tipo de criativo e pelas configurações do SafeFrame.

Para minimizar o risco de veiculação de criativos maliciosos, ative o SafeFrame sempre que possível e use o atributo HTML5 sandbox para impedir a navegação de nível superior. É possível usar o parâmetro setForceSafeFrame na API da GPT para forçar a renderização dos anúncios de um local específico em um SafeFrame.

O método setSafeFrameConfig retorna um valor booleano que indica se as definições de configuração foram analisadas.

Detalhes do objeto de configuração

O objeto de configuração recebe como entrada um objeto JSON simples que é um mapa de chaves e valores (valores válidos descritos abaixo).

Todas as outras chaves são ignoradas. Se qualquer valor além de true/false (verdadeiro/falso) for encontrado, a configuração será rejeitada e ocorrerá um erro.

Nome da chave Descrição Valores válidos
allowOverlayExpansion Os criativos podem se expandir usando o modo "Sobreposição" na SafeFrame API. O criativo expandido cobre o conteúdo do resto da página. true
false
allowPushExpansion Os criativos podem se expandir usando o modo "Pressionar" na SafeFrame API. O criativo expandido empurra para baixo o conteúdo do resto da página. true
false
sandbox Cria uma instância do contêiner do SafeFrame com o atributo sandbox definido para impedir a navegação de nível superior. Se você usar esse atributo, verifique se os cliques em anúncios abrem a página de destino em uma nova guia, em vez de navegar a partir da página atual. Isso permite usar o anúncio no maior número possível de navegadores com níveis diferentes de compatibilidade com sandbox.
 
Funciona somente em navegadores compatíveis com o novo atributo HTML5 sandbox em iframes.

Definir esta chave bloqueia os anúncios que usam plug-ins, como o Flash, e pode causar problemas em anúncios ou páginas de destino em determinados navegadores, especialmente em computadores.
true
Implementação de exemplo
Exemplo Descrição
googletag.pubads().setSafeFrameConfig({sandbox: true}); Todos os anúncios na página renderizados em SafeFrames usam o atributo sandbox.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({sandbox:true});
Somente o slot1 é renderizado no SafeFrame com sandbox. Não afeta outros locais do anúncio.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({allowOverlayExpansion: false});
Os anúncios renderizados em SafeFrames no slot1 não estão autorizados a realizar a expansão de sobreposição.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({allowOverlayExpansion: false, sandbox:true});
Os anúncios renderizados em SafeFrames no slot1 não estão autorizados a realizar a expansão de sobreposição. Também define o atributo sandbox.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({allowPushExpansion: false, sandbox:true});
Os anúncios renderizados em SafeFrames no slot1 não podem empurrar conteúdo ao se expandirem.

Saiba mais sobre a renderização de criativos usando SafeFrame.

Isso foi útil?
Como podemos melhorá-lo?