HTML5 (H5) 遊戲結構

一般而言，大多數遊戲發行商都會以容易參與全螢幕模式或

代管遊戲的頁面 (即可玩遊戲面板) 包含 AdSense 程式碼 (' 標記')、載入遊戲的 JavaScript 邏輯，通常包含轉譯遊戲的畫布元素。

Ad Placement API 的目標是減少您新增至遊戲的程式碼。因此，你不必變更遊戲並發布新版本，就能控制廣告。

請參閱下圖中的 HTML5 遊戲概念結構。您可以在範例 H5 遊戲結構一節中找到程式碼範例。

有許多方式可以建立 H5 遊戲，可直接使用 JavaScript，或以 2D 和 3D 圖像的第三方程式庫轉譯、畫布小工具、遊戲引擎，在特定情況下甚至還能支援其他語言的複雜編譯程序。

Ad Placement API 設計為在遊戲畫布和 adsbygoogle 標記所在的文件中執行。舉例來說，假設您將某個遊戲新增為 iframe 中的大型網頁，則該廣告代碼和所有 API 呼叫都必須從該 iframe 中進行。

H5 遊戲結構範例

以下提供更詳細的示例，說明一般遊戲頁面的主要部分。

有許多方式可以建立 H5 遊戲，可直接使用 JavaScript，或以 2D 和 3D 圖像的第三方程式庫轉譯、畫布小工具、遊戲引擎，在特定情況下甚至還能支援其他語言的複雜編譯程序。遊戲的實際詳細資料可能與本範例不同。

<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 設計為在遊戲畫布和 adsbygoogle 標記所在的文件中執行。舉例來說，假設您將某個遊戲新增為 iframe 中的大型網頁，則該廣告代碼和所有 API 呼叫都必須從該 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>

H5 遊戲的發行方式

H5 遊戲可透過多種不同方式，在許多平台上發布。建立和發行遊戲時，可能有多個實體，包括：

  • 遊戲 - 建立遊戲的使用者
  • 引擎 – 提供這些工具的製作工具
  • 代管服務供應商：代管遊戲的服務供應商
  • 發布者：與開發人員合作，建構豐富的遊戲目錄
  • 「發布商」：擁有流量來源，且想要在自家網站或應用程式中加入遊戲

在許多情況下，實體都可以涵蓋這些角色，而您可以開發、託管並發布自己的遊戲。

玩遊戲的方式有很多種，包括：

  • 全螢幕：這類裝置會佔滿整個畫面，提供身歷其境的體驗
  • iFrame/WebView：顯示在大型文件的一部分
  • 嵌入：直接放在含有其他內容的網頁上

廣告實際顯示情況的圖表

全螢幕和 iframe 體驗適用於網站和應用程式 (在本範例中，「iFrame」是指應用程式內嵌的 WebView)，我們預計以大部分方式發布遊戲。嵌入式遊戲僅是網站體驗。

注意事項

  1. 內含代碼的 HTML 文件會顯示在廣告顯示的位置，
  2. 廣告必須完全覆蓋住文件。
  3. 代碼和遊戲應一律位於同一份文件中。