Este artigo fornece notas e exemplos que demonstram como exibir um anúncio intersticial manual de jogo usando a biblioteca da Tag do editor do Google (GPT). Os intersticiais manuais de jogos são anúncios de página inteira gerenciados pela GPT que ficam visíveis para os usuários por meio de um acionador manual.
Os seguintes eventos da GPT são usados para exibir e interagir com anúncios intersticiais:
| Evento | Disparado quando… |
|---|---|
|
|
Um espaço de anúncio intersticial manual de jogo está pronto para ser exibido. Para exibir o intersticial, chame |
O intersticial manual de jogo 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 abaixo presume que o jogo H5 está posicionado diretamente no mesmo frame superior da página (usando a estrutura "Tela cheia"). Se esse for o caso, o anúncio intersticial manual também será renderizado em tela cheia.
Entretanto, o mesmo código também funciona quando colocado dentro de um frame filho (usando a estrutura "iFrame/WebView"). Para restringir o anúncio intersticial manual à 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 manuais de jogos em páginas que são compatíveis com o formato. Por isso,
defineOutOfPageSlot()pode retornar nulo. Verifique esse caso para garantir que você não está fazendo trabalho desnecessário. - Solicite anúncios intersticiais manuais de jogos somente em páginas ou ambientes em que você quer que um intersticial seja exibido. Os anúncios intersticiais manuais de jogos podem ser veiculados em computadores, tablets e dispositivos móveis.
- O intersticial aparece quando você chama
makeGameManualInterstitialVisibleno eventoGameManualInterstitialSlotReady. - Os anúncios intersticiais manuais 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 anúncios intersticiais manuais de jogos geram o próprio espaço do anúncio. Ao contrário de outros tipos, não é necessário definir um
<div>para anúncios intersticiais manuais 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 dos espaços de anúncio estáticos sejam criados. Conforme explicado em Práticas recomendadas de anúncios, a primeira chamada dedisplay()solicita todos os espaços de anúncio definidos antes desse ponto. Embora os espaços intersticiais manuais 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 dos intersticiais da Web padrão.
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>
