O guia a seguir explica como exibir 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:
- Dimensionamento 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"
crossorigin="anonymous"
></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 comando GPT imediatamente. Adicione o
código JavaScript a seguir ao corpo da função vazia definida neste
fragmento.
Definir espaços de anúncios
Depois de carregar a GPT, você pode definir os espaços do anúncio. O exemplo a seguir define três espaços de anúncio com diferentes formatos de anúncio, tamanhos e opções de segmentação.
Espaço de anúncio de tamanho fixo
Confira 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 tamanho e do ID <div> do contêiner do bloco de anúncios, 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 slot. Saiba mais sobre a segmentação por chave-valor.
Espaço de anúncio âncora
Confira um slot de anúncio âncora, anexado à parte de baixo 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, que são definidos
usando o método defineOutOfPageSlot, em vez do método
defineSlot. Saiba mais sobre criativos fora da página.
Os formatos fora da página geralmente têm restrições sobre os tipos de páginas e dispositivos em que podem ser veiculados. Devido a essas restrições, é necessário verificar se o slot foi definido antes de interagir com ele. Consulte o exemplo Exibir um anúncio âncora para mais detalhes.
Espaço de anúncio flexível
Confira um espaço flexível para um anúncio nativo:
// Define a fluid ad slot that fills the width of the enclosing column and
// adjusts the height as defined by the native creative delivered.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
Os espaços de anúncio flexíveis não têm um tamanho fixo. Os espaços de anúncio fluidos se ajustam ao
conteúdo do criativo do anúncio. Você define espaços de anúncio flexíveis com a opção de tamanho
fluid. Saiba mais sobre
o dimensionamento de anúncios e as opções disponíveis.
Definir configurações no nível da página
Algumas opções de configuração da GPT são aplicadas globalmente, em vez de a locais de anúncios específicos. Elas são chamadas de configurações no nível da página.
Confira um exemplo de como configurar as 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 as opções de segmentação no nível da página, que são aplicadas a todos os espaços 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 de anúncio. A SRA melhora a performance e é necessária para garantir que as exclusões competitivas e os roadblocks sejam cumpridos. 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 que as solicitações de anúncios sejam feitas.
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 de anúncio: banner-ad e native-ad. Esses
valores id do contêiner correspondem aos valores fornecidos ao definir os
slots de anúncios anteriormente neste exemplo.
Depois que todos os espaços de anúncio são definidos, uma chamada para exibir o banner-ad é feita. Como
a SRA está ativada, essa única chamada de exibição solicita e renderiza todos os espaços de anúncio
definidos até esse ponto. Se necessário, você pode
controlar com mais precisão o carregamento e a atualização de anúncios e o
comportamento de lote com o SRA ativado.
Exemplo completo
Confira abaixo o código-fonte completo da página de exemplo em que este guia se baseia. Você também pode conferir uma demonstração interativa desta página.