Nos exemplos de conceitos básicos e de início, o método display()
da biblioteca de Tag do editor do Google (GPT) é usado para registrar e mostrar um slot de anúncio. No entanto, há momentos em que pode ser
preferíveis ou mesmo necessárias para separar essas ações, com o objetivo de
controlar precisamente quando o conteúdo do anúncio é carregado. Por exemplo, ao trabalhar com um
plataforma de gestão de consentimento ou solicitação de conteúdo do anúncio como resultado de um usuário
à ação.
Neste guia, exploraremos os mecanismos fornecidos pela GPT para controlar o carregamento de conteúdo de anúncios e buscar novos conteúdos de anúncios sob demanda. Código completo para este exemplo pode ser encontrada nas solicitações com base em eventos página de amostra.
Controlar o carregamento de anúncios
Por padrão, o comportamento do método display()
é:
registrar, solicitar e renderizar conteúdo do anúncio em um espaço de anúncio. A otimização automática
a solicitação e a renderização de conteúdo do anúncio podem ser desativadas usando o
método PubAdsService.disableInitialLoad()
.
Com o carregamento inicial desativado, as chamadas para display()
só vão registrar o espaço do anúncio.
Nenhum conteúdo de anúncio será carregado até que uma segunda ação seja realizada. Isso permite que você
controlar com precisão quando as solicitações
de anúncios são feitas.
Para evitar solicitações de anúncios não intencionais, disableInitialLoad()
precisa ser chamado
antes de ativar o serviço e chamar display()
.
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Request GPT ads based on events." /> <title>Event-based ad requests</title> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" ></script> <script> window.googletag = window.googletag || { cmd: [] }; googletag.cmd.push(() => { // Define the ad slot. googletag .defineSlot("/6355419/Travel", [728, 90], "div-for-slot") .setTargeting("test", "event") .addService(googletag.pubads()); // Disable initial load. // This prevents GPT from automatically fetching ads when display is called. googletag.pubads().disableInitialLoad(); googletag.enableServices(); }); </script> <style></style> </head> <body> <div id="div-for-slot" style="width: 300px; height: 250px"></div> <script> googletag.cmd.push(() => { // Register the ad slot. // An ad will not be fetched until refresh is called. googletag.display("div-for-slot"); }); </script> </body> </html>
Neste exemplo, o carregamento inicial é desativado, garantindo que nenhuma solicitação de anúncio seja feita.
e nenhum conteúdo de anúncio é renderizado quando display()
é chamado. O espaço está pronto para
aceitar e mostrar um anúncio, mas uma solicitação de anúncio não será feita até que o espaço seja
atualizado.
Atualizar
O método PubAdsService.refresh()
é usado para preencher um
espaço com novo conteúdo de anúncio. Esse método pode ser usado em espaços com
ainda não carregando conteúdo (devido a disableInitialLoad()
) ou para substituir o
conteúdo de um espaço já preenchido. No entanto, apenas os slots que foram
registrados ao chamar display()
estão qualificados para atualização.
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Request GPT ads based on events." /> <title>Event-based ad requests</title> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" ></script> <script> window.googletag = window.googletag || { cmd: [] }; googletag.cmd.push(() => { // Define the ad slot. googletag .defineSlot("/6355419/Travel", [728, 90], "div-for-slot") .setTargeting("test", "event") .addService(googletag.pubads()); // Disable initial load. // This prevents GPT from automatically fetching ads when display is called. googletag.pubads().disableInitialLoad(); googletag.enableServices(); }); </script> <style></style> </head> <body> <div id="div-for-slot" style="width: 300px; height: 250px"></div> <button id="showAdButton">Show/Refresh Ad</button> <script> googletag.cmd.push(() => { // Register the ad slot. // An ad will not be fetched until refresh is called. googletag.display("div-for-slot"); // Register click event handler. document.getElementById("showAdButton").addEventListener("click", () => { googletag.cmd.push(() => { googletag.pubads().refresh(); }); }); }); </script> </body> </html>
Neste exemplo modificado, quando um usuário clica no botão "Mostrar/atualizar anúncio" , o
o método refresh()
seja chamado. Isso aciona uma solicitação para buscar um novo conteúdo do anúncio
e carregue-o no espaço registrado, substituindo qualquer conteúdo pré-existente.
No exemplo anterior, o método refresh()
é chamado sem
que atualizam todos os espaços de anúncio registrados.
No entanto, também é possível atualizar locais de anúncio específicos transmitindo uma matriz de
locais para o método refresh()
. Confira o exemplo de atualização de slots de anúncios
para conferir um exemplo.
Práticas recomendadas
Ao trabalhar com refresh()
, é preciso seguir algumas práticas recomendadas.
Não atualize rápido demais.
Atualizar os espaços de anúncio muito rapidamente pode causar a limitação das suas solicitações de anúncio. Para evitar isso, evite atualizar os slots com mais frequência do que uma vez a cada 30 segundos.
Não chame
clear()
desnecessariamenteAo atualizar um espaço do anúncio, não chame
PubAdsService.clear()
primeiro. Isso não é necessário, porquerefresh()
substitui o conteúdo do slot especificado, independentemente do se algum conteúdo de anúncio foi carregado anteriormente. Chamarclear()
imediatamente antes de chamarrefresh()
só vai aumentar o tempo que um slot em branco fica visível para o usuário.Atualizar apenas espaços de anúncio visíveis
O uso de
refresh()
para substituir o conteúdo de slots de anúncios que nunca são visualizados pode reduzir significativamente a taxa de ActiveView. O O ImpressionViewableEvent pode ser usado para determinar quando um espaço de anúncio ficou visível, como mostrado exemplo:googletag.cmd.push(function() { var REFRESH_KEY = 'refresh'; var REFRESH_VALUE = 'true'; googletag.defineSlot('/6355419/Travel',[728, 90], 'div-for-slot') .setTargeting(REFRESH_KEY, REFRESH_VALUE) .setTargeting('test', 'event') .addService(googletag.pubads()); // Number of seconds to wait after the slot becomes viewable. var SECONDS_TO_WAIT_AFTER_VIEWABILITY = 60; googletag.pubads().addEventListener('impressionViewable', function(event) { var slot = event.slot; if (slot.getTargeting(REFRESH_KEY).indexOf(REFRESH_VALUE) > -1) { setTimeout(function() { googletag.pubads().refresh([slot]); }, SECONDS_TO_WAIT_AFTER_VIEWABILITY * 1000); } }); googletag.enableServices(); });