整合廣告適用的 WebView API

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

  1. 使用 Google Mobile Ads SDK 發出廣告請求來營利

    您可以透過實作行動應用程式廣告格式，使用 Google Mobile Ads SDK 向 AdMob 提出廣告請求，進而透過應用程式營利。

    瞭解詳情。

  2. 使用 WebView API for Ads 營利

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

    如果您不是 WebViewController 中的網站內容擁有者，建議您還是使用這個 API，以便保護廣告客戶免受垃圾郵件影響，並協助提供內容的網站發布者提高收益。

請注意，您可以在同一個應用程式中執行任一選項，甚至兩者皆可。

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

事前準備

開始使用 WebView API 廣告前，請務必完成下列步驟：

略過應用程式 ID 檢查

AndroidiOS

請在 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"/>

請使用下列鍵和字串值更新 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= 參數的廣告要求。