Struktur game HTML5 (H5)

Biasanya, sebagian besar distributor game akan menghosting game mereka dalam bentuk yang dapat dengan mudah dimainkan dalam layar penuh, atau ditampilkan dalam iFrame ke halaman web lain atau WebView dalam aplikasi.

Halaman yang menghosting game (yaitu kanvas game yang dapat dimainkan) berisi kode AdSense ('tag'), memuat logika JavaScript untuk game, dan biasanya berisi elemen kanvas tempat game dirender.

Tujuan kami dengan Ad Placement API adalah meminimalkan kode yang harus Anda tambahkan ke game. Jadi, Anda dapat mengontrol iklan tanpa harus terus-menerus mengubah game dan merilis versi barunya.

Tinjau struktur konseptual game HTML5 dalam gambar ini. Kode contoh tersedia di bagian Contoh struktur game H5.

Ada banyak cara untuk membuat game H5, menggunakan javascript secara langsung, atau library pihak ketiga untuk grafik 2D dan 3D yang dirender ke widget kanvas, mesin game, dan dalam beberapa kasus, proses kompilasi silang yang cukup rumit dari bahasa lain.

Ad Placement API dirancang untuk berjalan dalam dokumen yang sama dengan kanvas game dan tag adsbygoogle. Misalnya, jika Anda menambahkan game sebagai iFrame ke halaman yang lebih besar, tag dan semua panggilan ke API harus dilakukan dari dalam iFrame tersebut.

Contoh struktur game H5

Contoh yang lebih mendetail berikut menunjukkan bagian utama halaman game pada umumnya.

Ada banyak cara untuk membuat game H5, menggunakan javascript secara langsung, atau library pihak ketiga untuk grafik 2D dan 3D yang dirender ke widget kanvas, mesin game, dan dalam beberapa kasus, proses kompilasi silang yang cukup rumit dari bahasa lain. Detail persis game Anda mungkin berbeda dari contoh ini.

<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>

Ad Placement API dirancang untuk berjalan dalam dokumen yang sama dengan kanvas game dan tag adsbygoogle. Misalnya, jika Anda menambahkan game sebagai iFrame ke halaman yang lebih besar, tag dan semua panggilan ke API harus dilakukan dari dalam iFrame tersebut.

<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>

Cara game H5 didistribusikan

Game H5 dapat didistribusikan dengan berbagai cara, dan di berbagai platform. Sering kali ada berbagai entitas yang terlibat dalam pembuatan dan distribusi game, termasuk:

  • Developer – orang yang membuat game
  • Mesin – perusahaan yang menyediakan alat untuk membangunnya
  • Penyedia hosting – yang menghosting game
  • Distributor – yang bekerja sama dengan developer untuk membuat katalog lengkap game
  • Penayang – yang memiliki sumber traffic dan ingin menempatkan game di situs atau aplikasi mereka

Dalam banyak kasus, entitas dapat mencakup peran ini—Anda dapat mengembangkan, menghosting, dan memublikasikan game Anda sendiri.

Game dapat dimainkan dengan berbagai cara, yang meliputi:

  • Layar penuh – iklan memenuhi seluruh layar untuk memberikan pengalaman yang imersif
  • iFrame/WebView – tempat dokumen disajikan ke dalam bagian dokumen yang lebih besar
  • Disematkan – ditempatkan langsung di halaman yang memiliki konten lain

Diagram tentang cara iklan benar-benar ditampilkan

Pengalaman layar penuh dan iFrame berlaku untuk web dan aplikasi ("iFrame" dalam kasus ini juga dapat merujuk ke WebView yang disematkan dalam aplikasi)—kami berharap sebagian besar game didistribusikan dengan cara ini. Game tersemat adalah pengalaman khusus web.

Ingat

  1. Iklan ditampilkan di dokumen HTML yang berisi tag.
  2. Iklan harus selalu menutupi sepenuhnya dokumen yang melampirkannya.
  3. Tag dan game harus selalu berada dalam dokumen yang sama.