La plupart des distributeurs de jeux hébergent leurs jeux sous une forme facilement lisible en plein écran, ou iFrame sur une autre page Web ou dans une WebView au sein d'une application.
La page qui héberge le jeu (c'est-à-dire la toile jouable) contient le code AdSense (&tag de la balise). Elle charge la logique JavaScript du jeu et contient généralement un élément de canevas où le jeu s'affiche.
L'objectif de l'API Ad Placement est de minimiser le code que vous devez ajouter à votre jeu. Vous pouvez ainsi contrôler les annonces sans avoir à modifier votre jeu en permanence ni à en publier de nouvelles versions.
Il existe de nombreuses façons de créer des jeux H5, en utilisant directement JavaScript ou des bibliothèques tierces pour les graphismes en 2D et 3D, qui s'affichent dans un widget de canevas, des moteurs de jeu et, dans certains cas, des processus cross-compilation assez complexes provenant d'autres langages.
L'API Ad Placement est conçue pour s'exécuter dans le même document que la toile de jeu et le tag adsbygoogle. Par exemple, si vous ajoutez un jeu en tant qu'iFrame à une page plus grande, le tag et tous les appels à l'API doivent être effectués à partir de cet iFrame.
Exemple de structure de jeu H5
L'exemple ci-dessous, plus détaillé, illustre les éléments clés d'une page de jeu type.
Il existe de nombreuses façons de créer des jeux H5, en utilisant directement JavaScript ou des bibliothèques tierces pour les graphismes en 2D et 3D, qui s'affichent dans un widget de canevas, des moteurs de jeu et, dans certains cas, des processus cross-compilation assez complexes provenant d'autres langages. Les détails précis de votre jeu peuvent différer de ceux de cet exemple.
<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>
L'API Ad Placement est conçue pour s'exécuter dans le même document que la toile de jeu et le tag adsbygoogle. Par exemple, si vous ajoutez un jeu en tant qu'iFrame à une page plus grande, le tag et tous les appels à l'API doivent être effectués à partir de cet 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>
Répartition des jeux H5
Les jeux H5 peuvent être distribués de nombreuses façons et sur de nombreuses plates-formes. Souvent, la création et la distribution de jeux peuvent comporter différentes entités, dont les suivantes:
- Développeurs : personnes qui créent les jeux
- Moteurs : entreprises qui fournissent les outils pour les créer
- Les fournisseurs d'hébergement, qui hébergent des jeux
- Distributeurs : collaborent avec les développeurs pour créer un catalogue riche de jeux.
- Les éditeurs, qui possèdent la source de trafic et souhaitent placer des jeux sur leurs sites ou dans leurs applications
Dans de nombreux cas, les entités peuvent couvrir ces rôles. Vous pouvez développer, héberger et publier vos propres jeux.
Vous pouvez jouer aux jeux de différentes façons, par exemple:
- Plein écran : ils occupent tout l'écran et offrent une expérience immersive.
- iFrame/WebView : emplacement intégré dans un document plus grand.
- Intégration : emplacement intégré sur des pages proposant d'autres contenus
Les expériences iFrame et plein écran s'appliquent aussi bien au Web qu'à l'application (dans ce cas, elles peuvent également désigner une WebView intégrée à une application). La plupart des jeux sont normalement distribués de cette manière. Les jeux intégrés sont des expériences Web.
À noter
- L'annonce s'affiche dans le document HTML contenant le tag.
- L'annonce doit toujours couvrir entièrement le document englobant.
- La balise et le jeu doivent toujours se trouver dans le même document.