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 da 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úncio
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
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, definidos
usando o método defineOutOfPageSlot, em vez do método
defineSlot normal. 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 são qualificados para veiculação. 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
Veja um espaço de anúncio fluido 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 definir 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 o desempenho e é necessária para garantir que as exclusões e os obstáculos competitivos sejam honrados. 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 snippet a seguir 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. Os valores de id do contêiner correspondem àqueles que você forneceu quando definiu os espaços de anúncio anteriormente nesse exemplo.
Depois que todos os espaços de anúncio são definidos, uma chamada para mostrar 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, é possível controlar o carregamento e a atualização de anúncios com mais precisão e o comportamento de lotes com a SRA ativada.
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.