使用适用于广告的 WebView API

适用于广告的 WebView API 支持使用 WebViewController 通过应用内广告创收。如果您在应用中通过 WebViewController 展示 Web 内容，且此类内容中包含使用 AdSense 代码或 Google 发布商代码 植入的广告，则应使用此 API 实现广告 创收。如需了解详情，请参阅 AdSense 和 Ad Manager 政策。

  1. 使用 Google Mobile Ads Flutter Plugin 发出广告请求，从而实现创收

    您可以使用以下方法通过应用创收：植入适合移动应用的广告格式，然后使用 向 Ad Manager 发出广告请求。Google Mobile Ads Flutter Plugin

    了解详情。

  2. 使用适用于广告的 WebView API 实现创收

    如果您的应用使用 WebViewController 展示 Web 内容，且在此类内容中投放 Ad Manager 或 AdSense 广告，则应使用适用于广告的 WebView API 向 Google Mobile Ads Flutter Plugin 注册 WebViewController 对象。AdSense 代码或 Google 发布商代码中的 JavaScript 会构建并发送广告请求，因此您无需使用此 SDK 发出任何广告请求。请注意，使用此 API 时，只有移动网站和桌面网站 广告资源格式 可用。

    即使您不使用 WebViewController 展示 Web 内容，我们仍建议您使用此 API 来帮助保护广告客户免受垃圾内容的侵扰，同时帮助提供内容的网站发布商提升创收效果。

请注意，您可以在同一应用中选择其中一种方法，也可以同时选择两种方法。

本指南旨在帮助您将适用于广告的 WebView API 集成到 iOS 应用中。

准备工作

在开始使用适用于广告的 WebView API 之前，请务必执行以下操作：

绕过应用标识符检查

Android

在您的 AndroidManifest.xml 文件中添加以下 <meta-data> 标记，以 绕过对 APPLICATION_ID 的检查。如果您漏掉此步骤， Google Mobile Ads Flutter Plugin可能会在应用启动时抛出 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 Flutter Plugin可能会在应用启动时抛出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 Flutter Plugin 提供的 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 展示 Web 内容。 我们建议您在使用自己的网址之前，加载以下测试网址来测试集成：https://google.github.io/webview-ads/test/。如果未启用 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://google.github.io/webview-ads/test/'));
  }

如果符合以下条件，测试网址会显示绿色状态栏，表示集成成功：

  • WebView 已连接到 Google Mobile Ads Flutter Plugin
  • 已启用 JavaScript
  • 第三方 Cookie 可正常运行（在 iOS 设备上不应出现此情况）
  • 第一方 Cookie 可正常运行

查看测试网址的源代码 。然后，您可以将测试网址替换为自己的网址。您也可以 使用代理工具（例如 Charles）来捕获您的 应用的 HTTPS 流量，并检查广告请求中是否存在 &scar= 参数。