整合廣告專用的 WebView API

廣告 WebView API for Ads 允許使用 WebViewController。 如果您顯示的網頁內容是以 AdSense 程式碼Google 發布商廣告代碼 在應用程式中透過 WebViewController 使用,您應該使用這個 API 啟用廣告功能 營利詳情請參閱 AdMob 政策

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

    你可以向 使用 Google Mobile Ads SDK:導入行動裝置專用廣告格式 應用程式

    瞭解詳情

  2. 使用廣告專用的 WebView API 營利

    如果您的應用程式使用 WebViewController 顯示供應廣告的網路內容: Ad ManagerAdSense,請使用 WebView API for Ads 登錄 WebViewController 物件。 在 AdSense 程式碼中加入 JavaScript 或 Google 發布商廣告代碼 建立並傳送廣告請求,這樣您就不需要使用 SDK。請注意,只有行動版網站和電腦版網站 廣告空間格式 透過這個 API 取得

    如果你並未擁有WebViewController中的網頁內容,你還是 建議使用這個 API,保護廣告主免於遭受垃圾內容幹擾, 協助提供內容的網站發布商提高收益。

請注意,你可以在同一個應用程式中採取上述任一做法,或是兩者並用。

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

事前準備

開始使用廣告 WebView API 前,請務必完成下列事項:

略過應用程式 ID 檢查

Android

AndroidManifest.xml 檔案中新增下列 <meta-data> 標記,以便: 略過 APPLICATION_ID 的檢查。如果找不到這個步驟, 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

改善應用程式內廣告營利成效 WebViewController使用 AdSense 程式碼或 Google 發布商程式碼 代碼,請按照這些步驟操作 :

  1. WebViewController 中啟用 JavaScript。否則可能造成 廣告載入。

  2. 為了改進使用者並在設計時遵守 Chrome 的 cookie 政策,啟用 AndroidWebViewController 執行個體上的第三方 Cookie。

  3. 如要註冊 WebViewController 例項,請呼叫 registerWebView() 方法。

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 並非 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 工具擷取 ,並檢查廣告請求是否提供 &scar= 參數。