En este artículo, se proporcionan notas y ejemplos que demuestran cómo mostrar un anuncio intersticial de videojuegos H5 con la biblioteca de Google Publisher Tag (GPT). Los anuncios intersticiales de videojuegos son anuncios de página completa administrados por GPT que se muestran a los usuarios a través de un activador manual en los juegos que se ejecutan en páginas web.
Los siguientes eventos de GPT se usan para mostrar anuncios intersticiales de videojuegos y también para interactuar con ellos:
| Evento | Se activa cuando… |
|---|---|
|
|
Ya se puede mostrar un espacio publicitario de anuncios intersticiales de videojuegos. Para mostrar el anuncio intersticial, llama a |
|
|
Se cerró un espacio publicitario de anuncios intersticiales de videojuegos que se estaba mostrando. Se usa para ejecutar lógica personalizada cada vez que se cierra el anuncio intersticial de videojuegos. |
El anuncio intersticial de videojuegos puede renderizarse en pantalla completa o dentro del marco del juego, según cómo se muestre el juego. Obtén más información sobre las estructuras de Anuncios en juegos H5.
En el siguiente código de muestra, se asume que el juego H5 está ubicado directamente en el mismo marco superior que la página (con la estructura "Pantalla completa"). En ese caso, el anuncio intersticial de videojuegos también se renderizará en pantalla completa.
Sin embargo, este mismo código también funciona cuando se coloca el anuncio dentro de un marco secundario (con la estructura "iFrame/WebView"). Para restringir el anuncio intersticial de videojuegos al lienzo del juego H5, el juego deberá colocarse en un iframe.
Ejemplo
<!doctype html>
<html>
<head>
<!-- Las etiquetas Google Publisher Tag de aquí, si las hubiera, solo serán responsables de publicar anuncios fuera del juego H5. -->
<title>Página para este juego H5 de ejemplo</title>
<!-- Aquí va el contenido de <head>. -->
</head>
<body>
<span id="example-text">Ejemplo de juego H5</span>
<iframe src="https://www.juego-de-ejemplo.com" title="Ejemplo de juego" allow="autoplay">
<!-- Aquí se publica el código de muestra. Las etiquetas Google Publisher Tag cargadas en este marco solo se usarán dentro del juego H5. -->
</iframe>
</body>
</html>
Notas de uso
- Para garantizar una experiencia del usuario óptima, GPT solo solicita anuncios intersticiales de videojuegos en páginas que admiten el formato sin problemas. Debido a esto,
defineOutOfPageSlot()podría devolver un valor nulo. Solicita anuncios intersticiales de videojuegos solo en las páginas o los entornos en los que quieras que aparezcan. Los anuncios intersticiales de videojuegos son aptos para publicarse en computadoras, tablets y dispositivos móviles. - El anuncio intersticial aparece cuando llamas a
makeGameManualInterstitialVisibledesde el eventoGameManualInterstitialSlotReady. - Los anuncios intersticiales de videojuegos tienen una limitación de frecuencia fija. Esto evita que el evento
gameManualInterstitialSlotReadyse active más de una vez cada 120 segundos.
Requisitos y recomendaciones
- Los publicadores no pueden usar anuncios intersticiales de videojuegos H5 en inventarios que no sean de videojuegos. Cuando implementan este formato, los publicadores aceptan automáticamente esta condición. También se deben cumplir las Políticas para Publicadores de Google y los Lineamientos para Socios de Google Ad Manager.
- Google se reserva el derecho de aprobar o rechazar a los publicadores en cualquier momento, y se quitará de la lista de entidades permitidas a los publicadores que infrinjan las políticas.
- Los anuncios intersticiales de videojuegos generan su propio espacio publicitario. A diferencia de otros tipos de anuncios, no es necesario definir un elemento <div> para los anuncios intersticiales de videojuegos. Estos anuncios crean y, luego, insertan automáticamente su propio contenedor cuando se publican en la página.
- Si usas la arquitectura de solicitud única (SRA) en una página con varios espacios publicitarios, no llames a
display()hasta que se creen los elementos div de los espacios publicitarios estáticos. Como se explica en las Prácticas recomendadas para los anuncios, la primera llamada adisplay()solicita cada espacio publicitario definido antes de ese momento. Aunque los espacios de anuncios intersticiales de videojuegos no requieren un elemento <div> predefinido, los estáticos sí lo hacen. Si se llama adisplay()antes de que estos elementos estén presentes en la página, se podrían generar indicadores de menor calidad, por lo que te recomendamos que retrases la llamada inicial hasta después de que se definan los espacios estáticos. - La coordinación de anuncios intersticiales manuales requiere la misma configuración de unidades de anuncios y líneas de pedido que con los anuncios intersticiales para la Web estándar.
Cómo comenzar
- Etiquetado
- Crea un espacio publicitario de GPT con
googletag.defineOutOfPageSlot()y establece el formato OutOfPage engoogletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIAL.
Consulta la guía técnica para desarrolladores de GPT sobre anuncios intersticiales de videojuegos H5. - Una vez que se defina el espacio, agrega un objeto de escucha de eventos que escuche el evento
gameManualInterstitialSlotReady. En la devolución de llamada del objeto de escucha de eventos, llama al métodomakeGameManualInterstitialVisible()en el objeto de evento proporcionado para mostrar el anuncio. - Una vez que hayas declarado todos los demás espacios publicitarios estáticos, una llamada a
googletag.displayactivará una solicitud para que se rellene el espacio de anuncios intersticiales de videojuegos.
- Crea un espacio publicitario de GPT con
Ejemplo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ejemplo de anuncio intersticial manual en juegos</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 un espacio publicitario intersticial manual en juegos.
defineGameManualInterstitialSlot();
// Define espacios publicitarios estáticos.
staticSlot = googletag.defineSlot(
'/6355419/Travel/Europe', [100, 100], 'static-ad-1')
.addService(googletag.pubads());
// Habilita 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 muestra un valor nulo si la página o el dispositivo no admiten anuncios intersticiales.
if (gameManualInterstitialSlot) {
gameManualInterstitialSlot.addService(googletag.pubads());
printStatus('Waiting for interstitial to be ready...');
// Agrega un objeto de escucha de eventos para registrar el controlador de clics una vez que se carga el anuncio intersticial.
// Si este evento no se activa, intenta liberar el almacenamiento local y 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 de anuncios intersticiales manuales en juegos son de uso único, así que destruye el espacio anterior y crea uno nuevo.
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 anuncio intersticial manual en juegos no se admite en esta página.</span>
<p>
<button id="trigger">ACTIVAR ANUNCIO INTERSTICIAL</button>
</p>
</div>
<script>
googletag.cmd.push(function () {
// Asegúrate de que la primera llamada a display sea después de que se definan los elementos divs
// de los espacios publicitarios estáticos.
googletag.display(staticSlot);
});
</script>
</body>
</html>
Coordinación de anuncios
- Crea una unidad de anuncios nueva o vuelve a usar una existente. Selecciona 320 x 480, 300 x 250 y 336 x 280 como el tamaño de la unidad de anuncios.
- Cree líneas de pedido. Selecciona la configuración de líneas de pedido adecuada según tu caso de uso:
| Configuración de líneas de pedido | ||||
|---|---|---|---|---|
| Caso de uso | Tipo de anuncio | Tipo de línea de pedido | Creatividades esperadas | Segmentación > Inventario |
| Para publicar un anuncio gráfico de reservación, sigue estos pasos: | Anuncio gráfico |
|
320 x 480, 300 x 250 o 336 x 280 |
La unidad de anuncios creada o seleccionada en el paso anterior |
| Para publicar un anuncio que no sea de reservación, sigue estos pasos: | Anuncio gráfico |
|
||
| Para publicar un anuncio de video de reservación (p. ej., una etiqueta de VAST o un archivo MP4), sigue estos pasos: | Audio o video |
|
300 x 250v o 320 x 480v | |
| Para publicar anuncios de reabastecimiento o subasta abierta, sigue estos pasos: | Anuncio gráfico | Ad Exchange | Todos los tamaños solicitados | |