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 no Google Ad Manager.

Use a GPT para criar solicitações de anúncios de maneira dinâmica. A GPT coleta detalhes importantes, como o código do bloco de anúncios, o tamanho do anúncio e a segmentação personalizada, cria a solicitação e exibe 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 que você pode usar para começar a trabalhar com a GPT. Se se precisar de mais ajuda com a GPT, consulte a página de suporte .

Veicular 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 exibir um anúncio de teste na página de amostra.

  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>
  </body>
</html>

  2. Carregar a biblioteca da GPT

    Carregue a biblioteca da GPT adicionando o seguinte ao <head> do documento HTML.

    Esse código carrega a biblioteca de GPT https://securepubads.g.doubleclick.net/tag/js/gpt.js. Depois que a biblioteca totalmente carregado, ele processa todos os comandos enfileirados do 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"
    crossorigin="anonymous"
  ></script>
  <style></style>
</head>

  3. Definir um espaço de anúncio

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

    Primeiro, esse código garante que o objeto googletag esteja disponível e depois coloca um 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 anúncio unidade especificada pelo caminho /6355419/Travel/Europe/France/Paris. O anúncio será exibido em um elemento <div id="banner-ad"> no corpo da página, que serão adicionados 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"
    crossorigin="anonymous"
  ></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 será exibido

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

    O ID dessa <div> corresponde ao ID especificado ao definir o espaço de 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. Uma vez carregado, a página exibirá um anúncio de teste no corpo da página da Web.

Exiba seu próprio anúncio

Para exibir seu próprio anúncio, use o arquivo hello-gpt.html da página Exibir um teste anúncio, substitua o código no cabeçalho pelo código especificando 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 a geração de tags de anúncio 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 tag <head> do seu documento HTML.

    <head>
  <meta charset="utf-8">
  <title>Hello GPT</title>
  <script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></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