Este artigo apresenta notas e exemplos que demonstram como exibir um anúncio intersticial de jogos H5 usando a biblioteca de Tag de publisher do Google (GPT, na sigla em inglês). Os intersticiais de jogos são anúncios de página inteira gerenciados pela GPT, mostrados aos usuários por meio de um acionador manual em jogos executados em páginas da Web.
Os seguintes eventos da GPT são usados para mostrar e interagir com anúncios intersticiais de jogos:
| Evento | Disparado quando… |
|---|---|
|
|
Um espaço do anúncio intersticial de jogos está pronto para ser exibido. Para exibir o intersticial, chame |
|
|
Um espaço do anúncio intersticial de jogos que estava sendo exibido foi fechado. Usado para executar a lógica personalizada sempre que o intersticial de jogos é fechado. |
O intersticial de jogos pode ser renderizado em tela cheia ou dentro do frame do jogo, dependendo de como o jogo é exibido. Saiba mais sobre as estruturas dos anúncios de jogos H5.
O exemplo de código a seguir pressupõe que o jogo H5 seja colocado diretamente no mesmo frame superior da página (usando a estrutura "tela cheia"). Nesse caso, o anúncio intersticial de jogos também será renderizado em tela cheia.
No entanto, esse mesmo código também funciona quando colocado dentro de um frame filho (usando a estrutura "iFrame/WebView"). Para restringir o anúncio intersticial de jogos à tela do jogo H5, o jogo precisa ser colocado em um iFrame.
Exemplo
<!doctype html>
<html>
<head>
<!-- The Google Publisher Tag here, if any, will only be responsible for serving ads outside of the H5 game. -->
<title>Page for this example H5 game</title>
<!-- Your <head> content here. -->
</head>
<body>
<span id="example-text">Example H5 game</span>
<iframe src="https://www.example-game.com" title="Example game" allow="autoplay">
<!-- Sample code is served here. The Google Publisher Tag loaded in this frame will only be used within the H5 game. -->
</iframe>
</body>
</html>
Notas de uso
- Para garantir uma experiência ideal ao usuário, a GPT só solicita anúncios intersticiais de jogos em páginas que oferecem suporte adequado ao formato. Por isso,
defineOutOfPageSlot()pode retornar nulo. Solicite anúncios intersticiais de jogos somente em páginas ou ambientes onde você precisa que um intersticial apareça. Esse tipo de anúncio pode ser veiculado em computadores, tablets e dispositivos móveis. - O intersticial aparece quando você chama
makeGameManualInterstitialVisibleno eventoGameManualInterstitialSlotReady. - Os anúncios intersticiais de jogos têm um limite de frequência fixo. Isso impede que o evento
gameManualInterstitialSlotReadyseja disparado mais de uma vez a cada 120 segundos.
Requisitos e recomendações
- Os publishers não podem usar anúncios intersticiais de jogos H5 em inventários que não sejam de jogos. Ao implementar esse formato, os publishers concordam automaticamente com essa condição. Também é preciso obedecer às Políticas do Google para publishers e às Diretrizes para parceiros do Ad Manager.
- O Google se reserva o direito de aprovar ou reprovar publishers a qualquer momento. Os publishers que violarem as políticas serão removidos da lista de permissões.
- Os anúncios intersticiais de jogos geram o próprio espaço. Ao contrário de outros tipos de anúncios, não é necessário definir um elemento <div> para anúncios intersticiais de jogos. Esses anúncios criam e inserem automaticamente o próprio contêiner na página quando um anúncio é preenchido.
- Se você usar a arquitetura de solicitação única (SRA, na sigla em inglês) em uma página com vários espaços, não chame
display()até que os divs de espaços do anúncio estático sejam criados. Conforme explicado em Práticas recomendadas de anúncios, a primeira chamada dedisplay()solicita todos os espaços do anúncio definidos antes desse ponto. Embora os espaços intersticiais de jogos não exijam um <div> predefinido, os espaços de anúncios estáticos exigem um. Chamardisplay()antes desses elementos estarem presentes na página pode resultar em indicadores de qualidade inferior. Por isso, recomendamos que você atrase a chamada inicial até que os espaços estáticos sejam definidos. - A programação manual de intersticiais exige a mesma configuração de bloco de anúncios e item de linha que os intersticiais da Web padrão.
Começar
- Inclua as tags
- Crie um espaço da GPT usando
googletag.defineOutOfPageSlot()e defina o formato OutOfPage comogoogletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIAL.
Consulte a Referência da GPT para conferir um exemplo de como fazer isso com um intersticial da Web. - Depois que o espaço for definido, adicione um listener de eventos que detecte o evento
gameManualInterstitialSlotReady. No callback do listener de eventos, chame o métodomakeGameManualInterstitialVisible()no objeto de evento informado para mostrar o anúncio. - Depois de declarar todos os outros espaços de anúncios estáticos, uma chamada para
googletag.displayvai acionar uma solicitação para preencher o espaço de anúncio intersticial de jogos.
- Crie um espaço da GPT usando
Exemplo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Game Manual Interstitial Ad Example</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
let gameManualInterstitialSlot;
googletag.cmd.push(function () {
// Define a game manual interstitial ad slot.
defineGameManualInterstitialSlot();
// Define static ad slots.
staticSlot = googletag.defineSlot(
'/6355419/Travel/Europe', [100, 100], 'static-ad-1')
.addService(googletag.pubads());
// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
function defineGameManualInterstitialSlot() {
gameManualInterstitialSlot = googletag.defineOutOfPageSlot(
'/6355419/Travel/Europe/France/Paris',
googletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIAL);
// Slot returns null if the page or device does not support interstitials.
if (gameManualInterstitialSlot) {
gameManualInterstitialSlot.addService(googletag.pubads());
printStatus('Waiting for interstitial to be ready...');
// Add event listener to register click handler once interstitial loads.
// If this event doesn't fire, try clearing local storage and refreshing
// the page.
googletag.pubads().addEventListener('gameManualInterstitialSlotReady',
(slotReadyEvent) => {
if (gameManualInterstitialSlot === slotReadyEvent.slot) {
printStatus('Interstitial is ready.');
const button = document.getElementById('trigger');
button.style.display = 'block';
button.addEventListener('click', () => {
slotReadyEvent.makeGameManualInterstitialVisible();
printStatus('Interstitial is active.');
}, { once: true });
}
});
googletag.pubads().addEventListener('gameManualInterstitialSlotClosed',
resumeGame);
}
}
function resumeGame() {
document.getElementById('trigger').style.display = 'none';
// Game manual interstitial ad slots are one-time use, so destroy the old slot and create a new one.
googletag.destroySlots([gameManualInterstitialSlot]);
defineGameManualInterstitialSlot();
googletag.display(gameManualInterstitialSlot);
}
function printStatus(status) {
document.getElementById('status').innerText = status;
}
</script>
<style>
button {
display: none;
}
div.content {
position: fixed;
top: 50%;
}
</style>
</head>
<body>
<div id="static-ad-1" style="width: 100px; height: 100px;"></div>
<div class="content">
<span id="status">Game manual interstitial is not supported on this page.</span>
<p>
<button id="trigger">TRIGGER INTERSTITIAL</button>
</p>
</div>
<script>
googletag.cmd.push(function () {
// Ensure the first call to display comes after static ad slot
// divs are defined.
googletag.display(staticSlot);
});
</script>
</body>
</html>
Tráfego
- Crie um novo bloco de anúncios ou reutilize um atual. Selecione 320 x 480, 300 x 250 e 336 x 280 como o tamanho do bloco de anúncios.
- Crie itens de linha. Selecione as configurações adequadas de item de linha com base no seu caso de uso:
| Configurações do item de linha | ||||
|---|---|---|---|---|
| Caso de uso | Tipo de anúncio | Tipo de item de linha | Criativos esperados | Segmentação > Inventário |
| Para veicular um anúncio de display de reserva | Display |
|
320 x 480, 300 x 250 ou 336 x 280 |
O bloco de anúncios criado ou selecionado na etapa anterior |
| Para veicular um anúncio não reservado | Display |
|
||
| Para veicular um anúncio em vídeo de reserva (por exemplo, uma tag VAST ou um MP4) | Vídeo ou áudio |
|
300 x 250v ou 320 x 480v | |
| Para veicular anúncios de preenchimento/leilão aberto | Display | Ad Exchange | Todos os tamanhos solicitados | |