Veja a seguir uma amostra do código completo para a criação de uma Tag do editor do Google (GPT, na sigla em inglês) para implementações em computadores e dispositivos móveis. Use o Gerador de tags do Google para gerar tags automaticamente.
Os desenvolvedores e aqueles que precisam de implementações avançadas da GPT devem consultar a Referência da API e as implementações de exemplo, como o carregamento lento.
Exemplo de código da Tag do editor do Google
Existem duas seções de código implementadas para GPT:
- A configuração da GPT é inserida no
<head>da página da Web. - As chamadas para cada espaço de anúncio específico são incluídas na seção relevante do
<body>.
Esse exemplo é apenas informativo. Recomendamos que um desenvolvedor implemente o código no seu site.
Configuração da GPT
O exemplo de código a seguir inclui chamar a biblioteca JavaScript da GPT, definir os espaços de anúncio, segmentar por chave-valor e muito mais.
1 |
<html> |
2 |
<head> |
3 |
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> |
4 |
<script> |
5 |
window.googletag = window.googletag || {cmd: []}; |
6 |
</script> |
|
Linhas 3 a 6: carrega de maneira assíncrona a biblioteca da GPT usada pelo Ad Manager por meio de SSL/HTTPS. A fila de comando é criada aqui. Ela gerencia a lista de funções (em geral, chamadas de anúncio) que serão manipuladas de maneira assíncrona. Não é necessário editar esta seção de código. |
|
| 7 | <script> |
| 8 | googletag.cmd.push(function() { |
| 9 | googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0") |
|
Linha 9:
|
|
10 |
.addService(googletag.pubads()) |
11 |
.setTargeting("interests", ["sports", "music", "movies"]); |
12 |
googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1") |
13 |
.addService(googletag.pubads()) |
14 |
.setTargeting("gender", "male") |
| 15 | .setTargeting("age", "20-30"); |
|
Linhas 11, 14 e 15: defina a segmentação de chave-valor no nível do espaço com Saiba mais sobre como definir a segmentação e os tamanhos com a GPT. |
|
| 16 | googletag.pubads().setTargeting("topic","basketball"); |
|
Linha 16: Ao configurar a segmentação com chaves-valor no nível da página, todos os locais do anúncio herdam essa segmentação. Assim como nas chaves-valor no nível do local, é possível associar vários valores a uma chave: ( |
|
| 17 | googletag.pubads().enableSingleRequest(); |
|
Linha 17: |
|
| 18 | googletag.enableServices(); |
| 19 | }); |
20 |
</script> |
21 |
</head> |
22 |
<body> |
23 |
<div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px"> |
|
Linha 23 (opcional): Se você usar tags de vários tamanhos, recomendamos a omissão disso. Nesse caso, o tamanho do elemento assume o tamanho do criativo selecionado após a renderização. Ou, então, deixe ambas as dimensões suficientemente grandes para conter o maior criativo qualificado. Para tags de anúncio de tamanho único, use esse parâmetro para expandir o elemento de contêiner até que o criativo seja carregado. Dessa forma, os outros elementos da página não mudam quando o criativo é renderizado. |
|
| 24 | <script> |
| 25 | googletag.cmd.push(function() { |
| 26 | googletag.display("div-gpt-ad-123456789-0"); |
| 27 | }); |
| 28 | </script> |
29 |
</div> |
30 |
<div id="div-gpt-ad-123456789-1"> |
31 |
<script> |
32 |
googletag.cmd.push(function() { |
|
Linhas 8, 25 e 32: as chamadas de função são adicionadas a uma fila de comando para ser processada de maneira assíncrona quando a página for carregada. |
|
33 |
googletag.display("div-gpt-ad-123456789-1"); |
|
Linhas 9, 12, 23, 26, 30 e 33: Embora números aleatórios sejam usados aqui, não é assim que a GPT identifica uma solicitação de anúncio de maneira exclusiva. Isso é feito em segundo plano com a biblioteca GPT. Além disso, esses nomes podem ser os mesmos de página para página, desde que não existam várias instâncias do mesmo nome div na mesma página. Saiba mais sobre a estrutura do inventário do Ad Manager e a hierarquia e a herança da segmentação dos blocos de anúncios na visão geral do inventário. |
|
| 34 | }); |
| 35 | </script> |
| 36 | </div> |
| 37 | </body> |
| 38 | </html> |
Se não for possível editar o cabeçalho das suas páginas da Web
É possível usar a GPT sem modificar o <header> do seu site.
Opção 1: GPT inline
Use uma tag in-line para definir onde o bloco de anúncios aparece na página, em vez de usar o cabeçalho. Com uma tag in-line, toda a definição de local do anúncio da GPT e a solicitação, incluindo o carregamento da biblioteca da GPT, estão contidas em uma única tag <script>.
Como a tag de anúncio usa a biblioteca JavaScript da GPT, é preciso incluir o código que carrega a biblioteca antes de incluir o código da tag de anúncio.
Estes exemplos de GPT in-line não são compatíveis com a SRA.
Chamar a biblioteca de JavaScript da GPT
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
</script>
Exemplo de tag de anúncio inline
<div id="div-gpt-ad-1234567891234-0">
<script>
googletag.cmd.push(function() {
googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
.addService(googletag.pubads())
.setTargeting("Gender", "Male");
googletag.enableServices();
googletag.display('div-gpt-ad-1234567891234-0');
});
</script>
</div>
Opção 2: colocar todo o código no corpo da página da Web
Use a implementação convencional da GPT, mas coloque as definições de local do anúncio no corpo do HTML, em vez de no cabeçalho.
O código que carrega a biblioteca e define os locais do anúncio precisa ser chamado antes da solicitação de anúncios para esses locais. Como o código não é segmentado no cabeçalho e corpo da sua página, e é necessário gerenciar a sequência dele, essa abordagem é mais complexa, porém oferece a flexibilidade da SRA.
Criar uma Solicitação sem tag sem JavaScript
É possível usar uma Solicitação sem tag no lugar de uma tag de anúncio para solicitar o código do criativo bruto processado no Ad Manager. Em geral, esse recurso é usado quando há necessidade de análise e exibição personalizadas, como conversores ou outros ambientes que não têm compatibilidade com as tags do Google ou com o SDK.