Apresentamos a seguir um exemplo do código completo para criar uma Etiqueta do Publicador Google (GPT) para implementações da versão para computador e para dispositivos móveis. Use o Gerador de etiquetas Google para gerar etiquetas automaticamente.
Os programadores e aqueles que necessitam de implementações avançadas da GPT devem consultar a referência da API e as implementações de exemplo (como o carregamento em diferido).
Código de exemplo da Etiqueta do Publicador Google
Existem duas secções de código implementadas para a GPT:
- A configuração da GPT é introduzida no
<head>da página Web. - As chamadas para cada espaço de anúncio específico são apresentadas na secção relevante de
<body>.
Este exemplo destina-se a fins informativos. Recomendamos que um programador implemente o código no seu Website.
Configuração da GPT
O exemplo de código seguinte inclui chamar a biblioteca JavaScript da GPT, definir os espaços de anúncios, a segmentação de chaves-valores 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 forma assíncrona a biblioteca da GPT usada pelo Ad Manager através de SSL/HTTPS. É aqui que é criada a fila de comandos que processa a lista de funções (geralmente, chamadas de funções) que devem ser tratadas de forma assíncrona. Não é necessário editar esta secçã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 da chave-valor ao nível do espaço com Saiba como definir a segmentação e os tamanhos com a GPT. |
|
| 16 | googletag.pubads().setTargeting("topic","basketball"); |
|
Linha 16: Ao configurar a segmentação através de chaves-valores ao nível da página, todos os espaços de anúncio herdam esta segmentação. Tal como as chaves-valores ao nível do espaço, pode 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 utilizar etiquetas de vários tamanhos, recomendamos que omita isto (nesse caso, o tamanho do elemento assume o tamanho do criativo selecionado quando convertido) ou defina as duas dimensões para um valor suficientemente grande para conter o maior criativo elegível. Para etiquetas de anúncios de tamanho único, utilize este parâmetro para expandir o elemento contentor até que o criativo seja carregado de forma a que outros elementos da página não sejam alterados quando o criativo for convertido. |
|
| 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: são adicionadas chamadas de funções a uma fila de comandos para serem processadas de forma assíncrona quando a página é carregada. |
|
33 |
googletag.display("div-gpt-ad-123456789-1"); |
|
Linhas 9, 12, 23, 26, 30 e 33: Embora aqui sejam usados números aleatórios, não é assim que a GPT identifica de forma exclusiva um pedido de anúncio. Isso é feito em segundo plano com a biblioteca da GPT. Além disso, estes nomes podem ser iguais de página para página, desde que não existam várias ocorrências do mesmo nome div na mesma página. Saiba mais acerca da estrutura de inventário do Ad Manager, da hierarquia dos blocos e da forma como os blocos de anúncios herdam a segmentação na vista geral do inventário. |
|
| 34 | }); |
| 35 | </script> |
| 36 | </div> |
| 37 | </body> |
| 38 | </html> |
Se não for possível editar o cabeçalho das páginas Web
Pode usar a GPT sem modificar o <header> do seu Website.
Opção 1: GPT inline
Use uma etiqueta inline para definir onde o bloco de anúncios aparece na página, em vez de usar o cabeçalho da página. Com uma etiqueta inline, a definição e o pedido de todo o espaço de anúncio da GPT, incluindo o carregamento da biblioteca da GPT, são contidos numa única etiqueta <script>.
Uma vez que a etiqueta do anúncio usa a biblioteca JavaScript da GPT, tem de incluir o código que carrega a biblioteca antes de incluir o código da etiqueta do anúncio.
Estes exemplos de GPT inline não suportam a SRA.
Chame 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 etiqueta do 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 Web
Use a implementação da GPT convencional, mas coloque as definições de espaços de anúncio no corpo do HTML em vez de as colocar no cabeçalho.
O código que carrega a biblioteca e define os espaços de anúncio tem de ser chamado antes de pedir anúncios para esses espaços. Uma vez que o código não é segmentado no cabeçalho e no corpo da página, e que necessita de gerir a sequência do código, esta abordagem é mais complexa, mas proporciona a flexibilidade da SRA.
Crie um Pedido sem etiqueta sem JavaScript
É possível usar um Pedido sem etiqueta em vez de uma etiqueta do anúncio para pedir o código de criativo não processado cujo tráfego é gerido no Ad Manager. Geralmente, os Pedidos sem etiqueta são utilizados quando são necessárias uma análise e uma apresentação personalizadas, como em caixas descodificadoras ou outros ambientes sem a etiquetagem da Google ou a compatibilidade com o SDK.
