本指南將說明如何整合使用 Google IMA HTML5 SDK,透過 AdSense 在 HTML 5 網頁遊戲中放送廣告。
技術設定總覽
AdSense 遊戲廣告需要透過 Google 互動式媒體廣告軟體開發套件 (IMA HTML5 SDK) 才能運作,這個 SDK 可讓您經由 JavaScript 請求 AdSense 廣告,提供更貼近內容的廣告。
如要透過 IMA HTML5 SDK 請求及顯示廣告,請設定廣告請求、載入收到的廣告,並在正確時間顯示廣告。您可以使用預設發布商 ID ca-games-pub-4968145218643279
測試整合結果。
請務必先向客戶經理舉例說明整合方式,才能在自己的網站上部署廣告。
簡易整合
簡易整合是整合 AdSense 遊戲廣告和 HTML5 遊戲最簡單的方法。這個選項屬於快速導入解決方案,其中提供 AdSense 遊戲廣告中所有可用的功能和廣告格式。
如果發布商對這種簡易整合方式感興趣,歡迎在這裡註冊。
進階整合
若發布商想採用更進階且可自訂的整合方式,就必須在 HTML5 遊戲中導入完整的 IMA HTML5 SDK。這種方式提供較多的彈性,例如您可以透過 Google Ad Manager 使用特定功能;但請注意,這種整合方式也較為複雜。
開始進階整合
如要開始作業,請先將 IMA HTML5 SDK 整合至遊戲中。
- 設定 IMA HTML5 SDK 整合
按照 Google Developers 網站上的規定,建立要與遊戲整合的 IMA HTML5 SDK。我們整理了入門步驟、可下載的程式碼範例和完整 API 參考資料,協助您瞭解相關程序。
- 設定廣告容器 (
AdDisplayContainer
)由於 IMA HTML5 SDK 專為影片廣告發布商和遊戲發行商打造,
AdDisplayContainer
物件具有多元的設定方式。為 AdSense 遊戲廣告設定
AdDisplayContainer
物件時,您可以直接將參考傳進會包含廣告的 div。範例:
var adDisplayContainer = new google.ima.AdDisplayContainer(document.getElementById('adContainer'));
- 設定廣告請求 (
AdsRequest
)建立
AdsRequest
物件時,您必須確認相關參數和屬性都已設定正確,廣告才能順利傳回並顯示。範例:
// 請求 AdSense 遊戲廣告。
var adsRequest = new google.ima.AdsRequest();
// 設定 AdSense 遊戲廣告的廣告代碼
adsRequest.adTagUrl = 'https://googleads.g.doubleclick.net/pagead/ads?ad_type=video_image_text&client=ca-games-pub-4968145218643279&videoad_start_delay=0&description_url=http%3A%2F%2Fwww.google.com&max_ad_duration=20000&adtest=on';
// 強制圖像/文字廣告以全版位 UI 顯示
adsRequest.forceNonLinearFullSlot = true;
// 指定線性與非線性版位大小。
adsRequest.linearAdSlotWidth = {your_game_width};
adsRequest.linearAdSlotHeight = {your_game_height};
adsRequest.nonLinearAdSlotWidth = {your_game_width};
adsRequest.nonLinearAdSlotHeight = {your_game_height}; - 監聽相關事件並建立回呼
監聽 IMA SDK 內觸發的事件非常重要,有助您掌握停止顯示廣告並恢復使用者遊戲畫面的時機。
下列廣告事件常用來判斷廣告在遊戲內容中的刊登位置。例如,透過監聽
COMPLETE
事件,您就能瞭解廣告播放完畢的時間點,並可接著向使用者顯示遊戲內容。如需廣告事件的完整清單,請參閱 API 參考資料。事件名稱 說明 AdEvent.Type.CLICK
點選廣告時觸發。 AdEvent.Type.COMPLETE
廣告播放完畢時觸發。 AdEvent.Type.LOADED
有可用廣告資料時觸發。 AdEvent.Type.SKIPPED
使用者略過廣告時觸發。 AdEvent.Type.START
廣告開始播放時觸發。 AdEvent.Type.USER_CLOSE
使用者關閉廣告時觸發。 AdErrorEvent.Type.AD_ERROR
發生廣告錯誤事件時觸發。
可能發生的廣告錯誤類型有很多。例如,載入廣告媒體素材資源時發生錯誤,或廣告請求傳回空白廣告回應。如需可能發生的錯誤清單,請參閱 API 參考資料。