Por lo general, la mayoría de los distribuidores de juegos los alojan de forma que se puedan jugar fácilmente en pantalla completa o con iframe en otra página web o en una WebView dentro de una app.
La página que aloja el juego (es decir, el lienzo del juego jugable) contiene el código de AdSense (la "etiqueta"), carga la lógica de JavaScript para el juego y, por lo general, contiene un elemento de lienzo en el que se renderiza el juego.
Nuestro objetivo con la API de Ad Placement es minimizar el código que debes agregar a tu juego. De esta manera, puedes controlar los anuncios sin tener que cambiar constantemente tu juego ni lanzar nuevas versiones.
Existen muchas formas de crear juegos H5, ya sea con JavaScript directamente o con bibliotecas de terceros para gráficos 2D y 3D que se renderizan en un widget de Canvas, motores de juegos y, en algunos casos, procesos de compilación cruzada bastante complejos desde otros lenguajes.
La API de Ad Placement está diseñada para ejecutarse en el mismo documento que el lienzo del juego y la etiqueta adsbygoogle. Por ejemplo, si agregas un juego como un iframe en una página más grande, la etiqueta y todas las llamadas a la API se deben realizar desde ese iframe.
Ejemplo de estructura de juego H5
En el siguiente ejemplo más detallado, se muestran las partes clave de una página de juego típica.
Existen muchas formas de crear juegos H5, ya sea con JavaScript directamente o con bibliotecas de terceros para gráficos 2D y 3D que se renderizan en un widget de Canvas, motores de juegos y, en algunos casos, procesos de compilación cruzada bastante complejos desde otros lenguajes. Los detalles precisos de tu juego pueden diferir de este ejemplo.
<head>
## The Ad Placement tag ##
# Configure your monetisation settings here and place the standard
# boilerplate code for initialising the API functions. This code may change
# depending on where the game is being distributed (eg. a website, a super
# app, different publishers).
<script async
data-ad-frequency-hint="30s"
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456789" # your publisher ID
crossorigin="anonymous">
</script>
<script>
window.adsbygoogle = window.adsbygoogle || [];
var adBreak = adConfig = function(o) {adsbygoogle.push(o);}
</script>
[...]
</head>
<body>
[...]
## Your game code ##
# This is your game logic that renders the playable canvas. Once you've
# integrated your game with the Ad Placement API, this code won't change due
# to ad configuration updates.
<canvas id="game_canvas" width="100%" height="100%"></canvas>
<script src="game.js"></script>
[...]
</body>
La API de Ad Placement está diseñada para ejecutarse en el mismo documento que el lienzo del juego y la etiqueta adsbygoogle. Por ejemplo, si agregas un juego como un iframe en una página más grande, la etiqueta y todas las llamadas a la API se deben realizar desde ese iframe.
<head>
<!-- The adsbygoogle tag is not here -->
</head>
<body>
<iframe src="https://www.my-game.com" title="My game" allow="autoplay">
<!-- The game is loaded here and contains the adsbygoogle tag -->
</iframe>
</body>
Cómo se distribuyen los juegos en H5
Los juegos en H5 se pueden distribuir de muchas maneras diferentes y en muchas plataformas distintas. A menudo, puede haber diferentes entidades involucradas en la creación y distribución de juegos, incluidas las siguientes:
- Desarrolladores: Son las personas que crean los juegos.
- Motores: Empresas que proporcionan las herramientas para crearlos
- Proveedores de hosting: Son quienes alojan los juegos.
- Distribuidores: Trabajan con los desarrolladores para crear catálogos enriquecidos de juegos.
- Publicadores: Son los propietarios de la fuente de tráfico y desean incluir juegos en sus sitios o aplicaciones.
En muchos casos, las entidades pueden abarcar estos roles: es posible que desarrolles, alojes y publiques tus propios juegos.
Los juegos se pueden jugar de diferentes maneras, como las siguientes:
- Pantalla completa: Ocupan toda la pantalla para ofrecer una experiencia envolvente.
- iFrame/WebView: Se publican en una parte de un documento más grande.
- Incorporados: Se colocan directamente en páginas que tienen otro contenido.
Las experiencias de pantalla completa y de iframe se aplican tanto a la Web como a las aplicaciones (en este caso, "iframe" también puede hacer referencia a una WebView incorporada en una aplicación). Esperamos que la mayoría de los juegos se distribuyan de estas maneras. Los juegos integrados son experiencias solo para la Web.
Recuerda
- El anuncio se muestra en el documento HTML que contiene la etiqueta.
- El anuncio siempre debe cubrir por completo el documento adjunto.
- La etiqueta y el juego siempre deben estar ubicados dentro del mismo documento.