建立 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 內發出。
[null,null,["上次更新時間：2025-07-26 (世界標準時間)。"],[[["\u003cp\u003eThe Ad Placement API minimizes code changes for ad integration in HTML5 games, allowing for easier ad management.\u003c/p\u003e\n"],["\u003cp\u003eGames should include the AdSense code, game logic, and a canvas element within the same document, ideally within an iFrame for distribution.\u003c/p\u003e\n"],["\u003cp\u003eHTML5 games are often distributed via fullscreen, iFrame/WebView, or embedded methods, with the Ad Placement API designed to work seamlessly across these.\u003c/p\u003e\n"],["\u003cp\u003eAd Placement API requires the AdSense tag and API calls within the same iFrame as the game, along with \u003ccode\u003eallow='autoplay'\u003c/code\u003e for the iFrame element.\u003c/p\u003e\n"],["\u003cp\u003eVarious entities like developers, engines, hosting providers, distributors, and publishers play roles in the creation and distribution of H5 games.\u003c/p\u003e\n"]]],["Game distributors often host games for fullscreen play or embedding via iFrames or WebViews. The Ad Placement API is designed to minimize code changes in the game itself. The API runs within the same document as the game canvas and the `adsbygoogle` tag. The game's HTML page contains the tag, JavaScript logic, and a canvas for rendering. The ad tag must be in the same HTML document where the game is. If the game is embedded via an iFrame make sure the iFrame contains the tag and allow attribute for \"autoplay\".\n"],null,["# Structure of an HTML5 (H5) game\n\nTypically most games distributors will host their games in a form that can be\neasily played fullscreen, or iFrame'd into another web page or a WebView within\nan app.\n\nThe page that hosts the game (i.e. the playable game canvas) contains\n[the AdSense code](https://support.google.com/adsense/answer/9955214) ('the\ntag'), loads the JavaScript logic for the game, and typically contains a canvas\nelement where the game is rendered.\n\nOur goal with the Ad Placement API is to minimize the code you must add to your\ngame. So you can control the ads, without constantly having to change your game\nand release new versions of it.\nReview the conceptual structure of an HTML5 game in this figure. Sample code is available in the section [Example H5\ngame structure](#example_h5_game_structure).\n\nThere are many ways that H5 games can be created, using javascript directly, or\nthird party libraries for 2D and 3D graphics that render to a canvas widget,\ngame engines, and in some cases quite complex cross-compilation processes from\nother languages.\n\nThe Ad Placement API is designed to run within the same document as the game\ncanvas and the `adsbygoogle` tag. For example, if you add a game as an iFrame\ninto a larger page, the tag and all of the calls to the API should be made from\nwithin that iFrame.\n\nExample H5 game structure\n-------------------------\n\nThe following more detailed example shows the key parts of a typical game page.\n\nThere are many ways that H5 games can be created, using javascript directly, or\nthird party libraries for 2D and 3D graphics that render to a canvas widget,\ngame engines, and in some cases quite complex cross-compilation processes from\nother languages. The precise details of your game may differ from this example. \n\n \u003chead\u003e\n ## The Ad Placement tag ##\n # Configure your monetisation settings here and place the standard\n # boilerplate code for initialising the API functions. This code may change\n # depending on where the game is being distributed (eg. a website, a super\n # app, different publishers).\n \u003cscript async\n data-ad-frequency-hint=\"30s\"\n src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=\u003cvar translate=\"no\"\u003eca-pub-123456789\u003c/var\u003e\" # your publisher ID\n crossorigin=\"anonymous\"\u003e\n \u003c/script\u003e\n \u003cscript\u003e\n window.adsbygoogle = window.adsbygoogle || [];\n var adBreak = adConfig = function(o) {adsbygoogle.push(o);}\n \u003c/script\u003e\n [...]\n \u003c/head\u003e\n \u003cbody\u003e\n [...]\n\n ## Your game code ##\n # This is your game logic that renders the playable canvas. Once you've\n # integrated your game with the Ad Placement API, this code won't change due\n # to ad configuration updates.\n \u003ccanvas id=\"game_canvas\" width=\"100%\" height=\"100%\"\u003e\u003c/canvas\u003e\n \u003cscript src=\"game.js\"\u003e\u003c/script\u003e\n [...]\n \u003c/body\u003e\n\nThe Ad Placement API is designed to run within the same document as the game\ncanvas and the `adsbygoogle` tag. For example, if you add a game as an iFrame\ninto a larger page, the tag and all of the calls to the API should be made from\nwithin that iFrame.\n**Note:** If your game is embedded within an iframe on another page and the adsbygoogle tag is located within that iframe then make sure to add allow='autoplay'to the iframe element. This is a best practice and is necessary for certain ads to be eligible for your game. \n\n \u003chead\u003e\n \u003c!-- The adsbygoogle tag is not here --\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003ciframe src=\"https://www.my-game.com\" title=\"My game\" allow=\"autoplay\"\u003e\n \u003c!-- The game is loaded here and contains the adsbygoogle tag --\u003e\n \u003c/iframe\u003e\n \u003c/body\u003e\n\nHow H5 games are distributed\n----------------------------\n\nH5 games can be distributed in lots of different ways, and on lots of different\nplatforms. Often there can be different entities involved in the creation and\ndistribution of games including:\n\n- **Developers** -- the people who create the games\n- **Engines** -- companies that provide the tools to build them\n- **Hosting providers** -- who host games\n- **Distributors** -- that work with developers to build rich catalogs of games\n- **Publishers** -- who own the **traffic source** and want to put games on their sites or apps\n\nIn many cases entities can span these roles---you might develop, host and\npublish your own games.\n\nGames can be played in different ways, that include:\n\n- **Fullscreen** -- where they take over the entire screen for an immersive experience\n- **iFrame/WebView** -- where they serve into a part of larger document\n- **Embedded** -- where they're placed directly on pages that have other content\n\nThe fullscreen and iFrame experiences apply to both web and app (\"iFrame\" in\nthis case can also refer to a WebView embedded within an app)---we expect\nthe majority of games to be distributed in these ways. Embedded games are\nweb-only experiences.\n\n### Remember\n\n1. The HTML document that contains the tag is where the ad shows.\n2. The ad must always fully cover the enclosing document.\n3. The tag and the game should always be located within the same document."]]
