整合廣告專用的 WebView API

WebView API for Ads 允許使用 WebViewController 進行應用程式內廣告營利。如果您透過 WebViewController 顯示在應用程式中使用 AdSense 程式碼或 Google 發布商廣告代碼導入廣告的網頁內容，建議您使用這個 API 來啟用廣告營利功能。詳情請參閱 AdSense 和 Ad Manager 政策。

  1. 運用 Google Mobile Ads SDK 提出廣告請求來營利

    您可以導入行動應用程式專用廣告格式，向 導入行動應用程式廣告格式，以便搭配 Google Mobile Ads SDK 使用 Ad Manager。

    瞭解詳情。

  2. 使用 WebView API 透過廣告營利

    如果應用程式使用 WebViewController 顯示放送 Ad Manager 或 AdSense 廣告的網頁內容，請使用 WebView API for Ads 來向 Google Mobile Ads SDK 註冊 WebViewController 物件。AdSense 程式碼或 Google 發布商廣告代碼中的 JavaScript 會建立並傳送廣告請求，這樣您就不需要使用 SDK 發出任何廣告請求。請注意，使用這個 API 時，只能使用行動版網站和電腦版網站適用的廣告空間格式。

    如果您未在 WebViewController 中擁有網頁內容，建議使用此 API 協助保護廣告客戶不受垃圾內容侵擾，並為提供內容的網頁發布商改善營利成效。

請注意，你可以在同一個應用程式中選擇其中一種，也可以兩者並用。

本指南旨在協助您將適用於 Google Ads 的 WebView API 整合至 iOS 應用程式。

事前準備

開始使用 WebView API 前，請務必完成下列事項：

略過應用程式 ID 檢查

Android

在 AndroidManifest.xml 檔案中加入下列 <meta-data> 標記，即可略過 APPLICATION_ID 的檢查。如果您錯過此步驟，Google Mobile Ads SDK 可能會在應用程式啟動時擲回 IllegalStateException。

<!-- Bypass APPLICATION_ID check for WebView API for Ads -->
<meta-data
    android:name="com.google.android.gms.ads.INTEGRATION_MANAGER"
    android:value="webview"/>

iOS

使用下方的鍵和字串值更新 Runner/Info.plist 檔案，即可略過 GADApplicationIdentifier 的檢查。如果您錯過此步驟，Google Mobile Ads SDK 可能會在應用程式啟動時擲回 GADInvalidInitializationException。

<!-- Bypass GADApplicationIdentifier check for WebView API for Ads -->
<key>GADIntegrationManager</key>
<string>webview</string>

註冊 WebViewController

如要改善使用 AdSense 程式碼或 Google 發布商廣告代碼的 WebViewController 中廣告的應用程式內廣告營利成效，請按照下列步驟進行：

  1. 在 WebViewController 中啟用 JavaScript。否則可能會導致廣告無法載入。

  2. 如要改善使用者的廣告體驗並符合 Chrome 的 Cookie 政策規定，請在 AndroidWebViewController 執行個體上啟用第三方 Cookie。

  3. 呼叫 Google Mobile Ads SDK 提供的 registerWebView() 方法，註冊 WebViewController 例項。

import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';

@override
class WebViewExampleState extends State<WebViewExample> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();

    createWebView();
  }

  void createWebView() async {
    controller = WebViewController();
    // 1. Enable JavaScript in the web view.
    await controller.setJavaScriptMode(JavaScriptMode.unrestricted);

    // 2. Enable third-party cookies for Android.
    if (controller.platform is AndroidWebViewController) {
      AndroidWebViewCookieManager cookieManager = AndroidWebViewCookieManager(
        const PlatformWebViewCookieManagerCreationParams());
      await cookieManager.setAcceptThirdPartyCookies(
        controller.platform as AndroidWebViewController, true);
    }

    // 3. Register the web view.
    await MobileAds.instance.registerWebView(controller);
  }
}

載入網址

您現在可以透過 WebViewController 載入網址並顯示網頁內容。建議您先載入以下測試網址：https://webview-api-for-ads-test.glitch.me/ 來測試整合，再使用自己的網址。如果 JavaScript 未啟用，網頁會顯示錯誤訊息。

import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';

@override
class WebViewExampleState extends State<WebViewExample> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();

    createWebView();
  }

  void createWebView() async {
    controller = WebViewController();
    // 1. Enable JavaScript in the web view.
    await controller.setJavaScriptMode(JavaScriptMode.unrestricted);

    // 2. Enable third-party cookies for Android.
    if (controller.platform is AndroidWebViewController) {
      AndroidWebViewCookieManager cookieManager = AndroidWebViewCookieManager(
        const PlatformWebViewCookieManagerCreationParams());
      await cookieManager.setAcceptThirdPartyCookies(
        controller.platform as AndroidWebViewController, true);
    }

    // 3. Register the web view.
    await MobileAds.instance.registerWebView(controller);

    // 4. Load the URL.
    await controller.loadRequest(Uri.parse('https://webview-api-for-ads-test.glitch.me/'));
  }

如果出現以下情況，測試網址會顯示成功整合的綠色狀態列：

  • WebView 已連結到 Google Mobile Ads SDK
  • 已啟用 JavaScript
  • 第三方 Cookie 可正常運作 (在 iOS 裝置上未預期)
  • 第一方 Cookie 的運作方式

查看測試網址的原始碼。接著，您可以將測試網址替換成您的網址。您也可以使用 Charles 等 Proxy 工具，擷取應用程式的 HTTPS 流量，然後檢查廣告請求是否有 &scar= 參數。