En este artículo se proporcionan notas y ejemplos que muestran cómo mostrar anuncios de juegos H5 usando la biblioteca de Google Publisher Tag (GPT). Los intersticiales de juegos son anuncios de página completa gestionados por GPT que se muestran a los usuarios mediante un activador manual en los juegos que se ejecutan en páginas web.
Los siguientes eventos de GPT se utilizan para mostrar anuncios intersticiales de juegos e interactuar con ellos:
| Evento | Se activa cuando... |
|---|---|
|
|
Hay un espacio publicitario intersticial de un juego listo para mostrarse. Para mostrar el intersticial, llama a |
|
|
Se ha cerrado un espacio publicitario intersticial de juego que se estaba mostrando. Se utiliza para ejecutar lógica personalizada cada vez que se cierra el intersticial de juego. |
El intersticial del juego se puede renderizar a pantalla completa o dentro del fotograma del juego, en función de cómo se muestre el juego. Más información sobre las estructuras de los anuncios de Juegos H5
En el código de muestra que aparece a continuación, se presupone que el juego H5 se coloca directamente en el mismo marco superior que la página (con la estructura "Pantalla completa"). En ese caso, el anuncio intersticial del juego también se renderizará a pantalla completa.
Sin embargo, este mismo código también funciona cuando se coloca dentro de un marco secundario (con la estructura "Iframe/WebView"). Para limitar el anuncio intersticial de juego al canvas del juego H5, el juego debe colocarse en un iframe.
Ejemplo
<!doctype html>
<html>
<head>
<!-- La etiqueta Google Publisher Tag, si la hubiera, solo se hará cargo de servir anuncios fuera del juego H5. -->
<title>Página de este ejemplo de juego H5</title>
<!-- Introduzca aquí su contenido de <head>. -->
</head>
<body>
<span id="example-text">Ejemplo de juego H5</span>
<iframe src="https://www.example-game.com" title="Example game" allow="autoplay">
<!-- El código de ejemplo se sirve aquí. La etiqueta Google Publisher Tag cargada en este marco solo se utilizará en el juego H5. -->
</iframe>
</body>
</html>
Notas de uso
- Para ofrecer una experiencia de usuario óptima, las etiquetas GPT solo solicitan anuncios intersticiales de juegos en páginas que admitan el formato. Por este motivo,
defineOutOfPageSlot()puede devolver un valor nulo. Solicite anuncios intersticiales de juegos solo en páginas o entornos en los que quiera que aparezca un intersticial. Los anuncios intersticiales de juegos pueden publicarse en ordenadores, tablets y dispositivos móviles. - El intersticial aparece cuando llama a
makeGameManualInterstitialVisibledesde el eventoGameManualInterstitialSlotReady. - Los anuncios intersticiales de juegos tienen un límite de frecuencia fijo. Esto evita que el evento
gameManualInterstitialSlotReadyse active más de una vez cada 120 segundos.
Requisitos y recomendaciones
- Los editores no pueden usar intersticiales de juegos H5 en inventario que no sea de juegos. Al implementar este formato, los editores aceptan automáticamente esta condición. También se deben cumplir las Políticas para Editores de Google y las directrices para partners de Ad Manager.
- Google se reserva el derecho de aprobar o rechazar editores en cualquier momento. Los editores que infrinjan las políticas se retirarán de la lista de permitidos.
- Los anuncios intersticiales de juegos generan su propio espacio publicitario. A diferencia de otros tipos de anuncios, no es necesario definir un elemento <div> para los anuncios intersticiales de juegos. Estos anuncios crean e insertan automáticamente su propio contenedor en la página cuando se rellena un anuncio.
- Si utiliza una arquitectura de solicitud única (SRA) en una página con varios espacios, no llame a
display()hasta que se hayan creado los divs de los espacios publicitarios estáticos. Tal como se explica en las prácticas recomendadas de Google Ads, la primera llamada adisplay()solicita todos los espacios publicitarios definidos antes de ese momento. Aunque los espacios publicitarios para intersticiales de juegos no requieren un elemento <div> predefinido, los espacios publicitarios estáticos sí lo hacen. Si se llama adisplay()antes de que estos elementos estén presentes en la página, se pueden generar señales de menor calidad, por lo que se recomienda retrasar la llamada inicial hasta que se hayan definido los espacios estáticos. - El traficado de intersticiales manuales requiere la misma configuración de bloques de anuncios y de líneas de pedido que los intersticiales web estándar.
Primeros pasos
- Etiquetado
- Cree un espacio de GPT con
googletag.defineOutOfPageSlot()y asigne el formato OutOfPage agoogletag.defineOutOfPageSlot().
Consulte la guía para desarrolladores técnicos de GPT sobre los intersticiales de juegos H5. - Una vez que se haya definido la ranura, añada un procesador de eventos que detecte el evento
gameManualInterstitialSlotReady. En la retrollamada del procesador de eventos, llame al métodomakeGameManualInterstitialVisible()en el objeto de evento proporcionado para mostrar el anuncio. - Una vez que haya declarado todos los demás espacios publicitarios estáticos, una llamada a
googletag.displayactivará una solicitud para que se ocupe el espacio publicitario intersticial de juegos.
- Cree un espacio de GPT con
Ejemplo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jemplo de anuncio intersticial manual de juego</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 () {
// Defina un espacio publicitario intersticial manual de juego.
defineGameManualInterstitialSlot();
// Defina espacios publicitarios estáticos.
staticSlot = googletag.defineSlot(
'/6355419/Travel/Europe', [100, 100], 'static-ad-1')
.addService(googletag.pubads());
// Habilite la SRA y los servicios.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
function defineGameManualInterstitialSlot() {
gameManualInterstitialSlot = googletag.defineOutOfPageSlot(
'/6355419/Travel/Europe/France/Paris',
googletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIAL);
// El espacio devuelve un valor nulo si la página o el dispositivo no admite intersticiales.
if (gameManualInterstitialSlot) {
gameManualInterstitialSlot.addService(googletag.pubads());
printStatus('Waiting for interstitial to be ready...');
// Se añade un procesador de eventos para registrar el controlador de clics una vez que se haya cargado el intersticial.
// Si este evento no se activa, pruebe a borrar el almacenamiento local y a actualizar
// la página.
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';
// Los espacios publicitarios intersticiales manuales de juegos son de un solo uso, así que destruya el espacio publicitario antiguo y cree otro.
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">El intersticial manual de juegos no se admite en esta página.</span>
<p>
<button id="trigger">ACTIVAR INTERSTICIAL</button>
</p>
</div>
<script>
googletag.cmd.push(function () {
// Asegúrese de que la primera llamada para mostrar un anuncio intersticial se realice después de definir los divs
// del espacio publicitario estático.
googletag.display(staticSlot);
});
</script>
</body>
</html>
Tráfico
- Cree un bloque de anuncios o reutilice uno que ya tenga. Seleccione los tamaños 320x480, 300x250 y 336x280 para el bloque de anuncios.
- Crear líneas de pedido. Seleccione la configuración de línea de pedido adecuada en función de su caso práctico:
| Configuración de líneas de pedido | ||||
|---|---|---|---|---|
| Caso práctico | Tipo de anuncio | Tipo de línea de pedido | Creatividades esperadas | Segmentación > Inventario |
| Para servir un anuncio de display por reserva | Display |
|
320x480, 300x250, o 336x280 |
El bloque de anuncios creado o seleccionado en el paso anterior |
| Para servir un anuncio no reservado | Display |
|
||
| Para servir un anuncio de vídeo de reserva (por ejemplo, una etiqueta VAST o un MP4) | Vídeo o audio |
|
300x250v o 320x480v | |
| Para servir anuncios de backfill o de subasta abierta | Display | Ad Exchange | Todos los tamaños solicitados | |
