Większość dystrybutorów gier udostępnia swoje gry w formacie, który można łatwo odtwarzać na pełnym ekranie lub za pomocą komponentu iFrame na innej stronie lub w komponencie WebView w aplikacji.
Strona zawierająca grę (np. obszar roboczy gry) zawiera kod AdSense (tag'); wczytuje logikę JavaScriptu gry i zwykle zawiera element canvas, w którym gra jest renderowana.
Celem interfejsu Ad Placement API jest zminimalizowanie kodu, który trzeba dodać do gry. Dzięki temu masz kontrolę nad reklamami bez konieczności ciągłego zmieniania gry i publikowania jej nowych wersji.
Istnieje wiele sposobów tworzenia gier H5 – bezpośrednio za pomocą JavaScriptu – za pomocą bibliotek innych firm, a także bibliotek 2D i 3D, które renderują się na widżety Canvas, przez wyszukiwarki gier, a w niektórych przypadkach dosyć złożone procesy kompilacji w innych językach.
Interfejs Ad Placement API działa w tym samym dokumencie co obszar roboczy gry i tag adsbygoogle. Jeśli na przykład dodasz grę do większej strony jako element iframe, tag i wszystkie wywołania interfejsu API powinny być wykonywane z tego elementu.
Przykładowa struktura gry H5
Ten bardziej szczegółowy przykład pokazuje najważniejsze elementy typowej strony gry.
Istnieje wiele sposobów tworzenia gier H5 – bezpośrednio za pomocą JavaScriptu – za pomocą bibliotek innych firm, a także bibliotek 2D i 3D, które renderują się na widżety Canvas, przez wyszukiwarki gier, a w niektórych przypadkach dosyć złożone procesy kompilacji w innych językach. W tym przykładzie dokładne informacje o grze mogą się różnić.
<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>
Interfejs Ad Placement API działa w tym samym dokumencie co obszar roboczy gry i tag adsbygoogle. Jeśli na przykład dodasz grę do większej strony jako element iframe, tag i wszystkie wywołania interfejsu API powinny być wykonywane z tego elementu.
<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>
Jak rozpowszechniane są gry H5
Gry H5 można rozpowszechniać na wiele różnych sposobów i na wielu różnych platformach. Tworzenie i dystrybuowanie gier może przebiegać w różnych sytuacjach, np.:
- Deweloperzy – osoby, które tworzą gry.
- Wyszukiwarki – firmy, które oferują narzędzia do ich tworzenia.
- Dostawcy usług hostingowych – gospodarz gier
- dystrybutorzy – którzy współpracują z deweloperami, aby tworzyć rozbudowane katalogi gier;
- Wydawcy – są właścicielami źródeł wizyt i chcą umieścić gry w swoich witrynach lub aplikacjach.
W wielu przypadkach role mogą obejmować te role – możesz tworzyć, hostować i publikować własne gry.
W gry można grać na różne sposoby. Należą do nich:
- Pełny ekran – gdy użytkownik zajmie cały ekran, wyświetli się coś ciekawego.
- iFrame/WebView – w postaci większej części dokumentu,
- Umieszczone – są umieszczane bezpośrednio na stronach z inną treścią.
Funkcje pełnoekranowe i iFrame odnoszą się zarówno do witryny, jak i aplikacji (" iFrame" mogą się też odnosić do komponentu WebView umieszczonego w aplikacji). Można się spodziewać, że większość gier będzie dystrybuowana w ten sposób. Osadzone gry są dostępne tylko na stronach internetowych.
Pamiętaj
- Dokument HTML zawierający tag znajduje się w miejscu wyświetlania reklamy.
- Reklama musi zawsze zasłaniać dokument.
- Tag i gra powinny znajdować się zawsze w tym samym dokumencie.