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.
Nesta página
- Requisitos e recomendações
- Começar a usar a inclusão de tag
- Tráfego
- Série de vídeos sobre programação: intersticiais de jogos H5 | anúncios premiados para jogos H5
- Relatórios
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 a usar a inclusão de tag
- Crie um espaço da GPT usando
googletag.defineOutOfPageSlot()e defina o formato OutOfPage comogoogletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIAL.
Consulte as orientações técnicas da GPT para desenvolvedores sobre intersticiais de jogos H5. - 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.
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>
Eventos da GPT
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 uma lógica personalizada sempre que o anúncio 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>
Observações sobre uso da GPT
- Para garantir uma experiência ideal para o 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 em que você quer 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 30 segundos.
Tráfego
- Crie um bloco de anúncios ou reutilize um existente. 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 |
| 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 que não é de reserva | Display |
|
||
| 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 | |
Série de vídeos sobre programação: comece a usar anúncios intersticiais de jogos H5
Assista aos vídeos desta série em duas partes para aprender a usar os anúncios intersticiais de jogos H5
| Parte 1: anúncios intersticiais de jogos H5 no Ad Manager |
| H5 Gaming Interstitial Ads on Ad Manager |
| Parte 2: anúncios premiados para jogos H5 no Ad Manager |
| Rewarded Ads for H5 Gaming on Ad Manager |