Começar a usar a Tag do editor do Google

A Tag do editor do Google (GPT) é uma biblioteca de tags de anúncio para o Google Ad Manager.

É possível usar a GPT para criar solicitações de anúncios dinamicamente. A GPT coleta detalhes importantes, como código do bloco de anúncios, tamanho do anúncio e segmentação personalizada, além de criar a solicitação e exibir o anúncio nas páginas da Web.

Para mais detalhes sobre a GPT, consulte a Central de Ajuda do Ad Manager.

Veja alguns exemplos para começar a usar a GPT. Se você precisar de mais ajuda com a GPT, consulte as opções de suporte.

Exibir um anúncio de teste

O exemplo a seguir mostra como criar uma página de teste que usa a GPT para carregar um anúncio genérico da rede de testes do Google.

O código completo deste exemplo pode ser encontrado na página de amostra Exibir um anúncio de teste.

  1. Criar um documento HTML básico

    Em um editor de texto, crie um documento HTML básico chamado hello-gpt.html.

    <!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Display a fixed-sized test ad." />
    <title>Display a test ad</title>
    <style></style>
  </head>
  <body>
    <script>
      googletag.cmd.push(() => {
        // Request and render an ad for the "banner-ad" slot.
        googletag.display("banner-ad");
      });
    </script>
  </body>
</html>

  2. Carregar a biblioteca GPT

    Carregue a biblioteca da GPT adicionando o código abaixo ao <head> do documento HTML.

    Esse código carrega a biblioteca da GPT de https://securepubads.g.doubleclick.net/tag/js/gpt.js. Depois que a biblioteca é totalmente carregada, ela processa todos os comandos na fila no objeto googletag.

    <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Display a fixed-sized test ad." />
  <title>Display a test ad</title>
  <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
  <style></style>
</head>

  3. Definir um espaço de anúncio

    Defina um espaço do anúncio e inicialize a GPT usando o método googletag.enableServices().

    Esse código primeiro garante que o objeto googletag esteja disponível e, em seguida, enfileira um comando que cria um espaço de anúncio e ativa a GPT.

    O espaço de anúncio neste exemplo carregará um anúncio de tamanho 300x250 do bloco de anúncios especificado pelo caminho /6355419/Travel/Europe/France/Paris. O anúncio é exibido em um elemento <div id="banner-ad"> no corpo da página, que será adicionado em seguida.

    <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Display a fixed-sized test ad." />
  <title>Display a test ad</title>
  <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
  <script>
    window.googletag = window.googletag || { cmd: [] };

    googletag.cmd.push(() => {
      // Define an ad slot for div with id "banner-ad".
      googletag
        .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "banner-ad")
        .addService(googletag.pubads());

      // Enable the PubAdsService.
      googletag.enableServices();
    });
  </script>
  <style></style>
</head>

  4. Especifique onde o anúncio vai aparecer

    Especifique onde o anúncio será exibido na página adicionando o seguinte código ao <body> do documento HTML.

    O ID desse <div> corresponde ao ID especificado ao definir o slot do anúncio.

    <body>
  <div id="banner-ad" style="width: 300px; height: 250px"></div>
  <script>
    googletag.cmd.push(() => {
      // Request and render an ad for the "banner-ad" slot.
      googletag.display("banner-ad");
    });
  </script>
</body>

  5. Visualizar a página de teste

    Salve o arquivo hello-gpt.html e abra-o em um navegador da Web. Depois de carregada, a página exibe um anúncio de teste no corpo da página da Web.

Exiba seu próprio anúncio

Para mostrar seu próprio anúncio, use o arquivo hello-gpt.html de Exibir um anúncio de teste e substitua o código no cabeçalho pelo código que especifica o inventário da sua própria rede do Ad Manager.

  1. Gere uma tag de anúncio para o bloco de anúncios que você quer exibir. Saiba mais sobre como gerar tags de anúncio na Central de Ajuda do Ad Manager.

  2. Copie o código da tag de anúncio fornecido na seção Cabeçalho do documento e use-o para substituir o código correspondente na <head> do documento HTML.

    <head>
 <meta charset="utf-8">
 <title>Hello GPT</title>
 <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
 <script>
   window.googletag = window.googletag || {cmd: []};
   googletag.cmd.push(function() {
     googletag
         .defineSlot(
             'ad-unit-path', [width, height], 'div-id')
         .addService(googletag.pubads());
     googletag.enableServices();
   });
 </script>
</head>

  3. Salve o arquivo hello-gpt.html atualizado e abra-o em um navegador da Web.

Próxima
Noções básicas