O guia a seguir detalha a exibição de um anúncio de teste e apresenta conceitos mais básicos para aproveitar ao máximo a biblioteca da Tag do editor do Google (GPT). Alguns desses conceitos são os seguintes:
- tamanho do anúncio
- Segmentação por chave-valor
- Arquitetura de solicitação única
Carregar a biblioteca GPT
Comece carregando e inicializando a biblioteca GPT. Adicione o
seguinte ao <head> do documento HTML:
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
});
</script>
Isso carrega a biblioteca GPT e inicializa os objetos googletag e CommandArray. A inicialização desses objetos permite que você comece
a usar a matriz de comandos da GPT imediatamente. Adicione o código JavaScript que segue ao corpo da função vazia definida neste snippet.
Definir espaços de anúncio
Depois de carregar a GPT, é possível definir os espaços de anúncio. O exemplo a seguir define três espaços de anúncio com diferentes opções de formato, dimensionamento e segmentação.
Espaço de anúncio de tamanho fixo
Veja um espaço de anúncio simples e de tamanho fixo:
// Define a fixed size ad slot, customized with key-value targeting.
googletag
.defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad")
.addService(googletag.pubads())
.setTargeting("color", "red")
.setTargeting("position", "atf");
Além do caminho do bloco de anúncios, tamanho e ID <div> do contêiner, esse snippet também especifica várias opções de segmentação. Essas opções restringem e diferenciam os anúncios qualificados para veiculação nesse espaço. Saiba mais sobre a segmentação de chave-valor.
Espaço de anúncios âncora
Veja um espaço de anúncio âncora, anexado à parte inferior da janela de visualização:
// Define an anchor ad slot that sticks to the bottom of the viewport.
const anchorSlot = googletag.defineOutOfPageSlot(
"/6355419/Travel",
googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR,
);
// The slot will be null if the page or device does not support anchors.
if (anchorSlot) {
anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads());
document.getElementById("status").textContent =
"Anchor ad is initialized. Scroll page to activate.";
}
Os slots de âncora são um tipo de formato fora da página e são definidos
usando o método defineOutOfPageSlot, em vez do método
defineSlot comum. Saiba mais sobre criativos fora da página.
Os formatos fora da página geralmente têm restrições quanto aos tipos de páginas e dispositivos em que eles estão qualificados para veicular. Devido a essas restrições, é necessário verificar se o slot foi definido antes de interagir com ele. Veja o exemplo Exibir um anúncio âncora para saber mais detalhes.
Espaço de anúncio flexível
Veja um espaço fluido para um anúncio nativo:
// Define a fluid ad slot that adjusts its height to fit the creative
// content being displayed.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
Os espaços de anúncios flexíveis não têm um tamanho fixo. Os espaços de anúncios flexíveis se ajustam ao
conteúdo do criativo do anúncio. Defina espaços de anúncios fluidos com a opção de tamanho fluid. Saiba mais sobre
tamanho de anúncio e opções disponíveis.
Definir configurações no nível da página
Algumas opções de configuração da GPT se aplicam globalmente em vez de espaços de anúncio específicos. Essas são as configurações em nível de página.
Veja um exemplo de como definir configurações no nível da página:
// Configure page-level targeting.
googletag.pubads().setTargeting("interests", "basketball");
// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
Esse snippet faz três coisas:
- Configura opções de segmentação no nível da página, que são aplicadas a cada espaço de anúncio na página.
- Ativa o modo de arquitetura de solicitação única (SRA), que agrupa solicitações de vários espaços de anúncio em uma única solicitação. A SRA melhora o desempenho e é necessária para garantir que exclusões e bloqueios concorrentes sejam respeitados. Por isso, recomendamos que você sempre ative a SRA. Saiba mais sobre como usar a SRA corretamente.
- Ativa os serviços anexados aos nossos espaços de anúncio que permitem a realização de solicitações de anúncios.
Anúncios de display
Por fim, adicione o seguinte snippet ao <body> da página:
<div class="page-content centered">
<div id="banner-ad" style="width: 728px; height: 90px"></div>
<!--
If the following status is displayed when the page is rendered, try
loading the page in a new window or on a different device.
-->
<h1 id="status">Anchor ads are not supported on this page.</h1>
<!--
Spacer used for example purposes only. This positions the native ad
container below the fold to encourage scrolling.
-->
<div class="spacer"></div>
<div id="native-ad" class="native-slot"></div>
</div>
<script>
googletag.cmd.push(() => {
// Request and render all previously defined ad slots.
googletag.display("banner-ad");
});
</script>
Isso define dois contêineres de espaço do anúncio: banner-ad e native-ad. Esses valores de id do contêiner correspondem àqueles fornecidos quando você definiu os espaços de anúncio anteriormente neste exemplo.
Depois que todos os espaços de anúncio forem definidos, será feita uma chamada para exibir o banner-ad. Como a SRA está ativada, essa chamada de exibição única solicita e renderiza todos os espaços de anúncio definidos até este ponto. Se necessário, é possível
controlar o carregamento e a atualização de anúncios e o
comportamento de lote com a SRA ativada.
Exemplo completo
Confira a seguir o código-fonte completo da página de exemplo em que este guia se baseia. Veja também uma demonstração interativa desta página.