このページは Cloud Translation API によって翻訳されました。

WebView API for Ads を組み込む

WebView API for Ads を使用すると、 WebViewController。広告を実装するウェブコンテンツを表示する場合、 AdSense コード Google パブリッシャータグ使用する場合は、この API を使用して広告を有効にする必要があります。WebViewController 収益化。詳しくは、 AdSense アドマネージャーのポリシーをご覧ください。

Google Mobile Ads SDK を使って広告リクエストを行って収益化する

サイトやアプリを収益化するには、アドマネージャーと Google Mobile Ads SDK を実装して、モバイル向けの広告フォーマットをアプリ。
詳細
WebView API for Ads を使用して収益化する

アプリが WebViewController を使用して、広告を配信するウェブコンテンツを表示する場合アドマネージャー AdSense: WebView API for Ads を使用して登録します。 Google Mobile Ads SDK を使って WebViewController オブジェクトを作成します。「 AdSense コード内の JavaScript または Google パブリッシャータグ自動的に作成されるため、広告リクエストを送信したり説明します。モバイルウェブと PC ウェブのみが広告枠のフォーマットこの API を使用して作成できます。

WebViewController のウェブコンテンツの所有者でない場合でも、スパムやスパムから広告主を保護するために、コンテンツを提供したウェブパブリッシャーの収益性を高める。

1 つのオプション、または両方のオプションを同じアプリで実行できます。

このガイドは、WebView API for Ads をダウンロードします

始める前に

WebView API for Ads を使用する前に、必ず次のことを行ってください。

Flutter プラグイン用 Google Mobile Ads SDK を使用するをバージョン 3.0.0 以降に更新する必要があります。
webview_flutter を依存関係として追加する pubspec.yaml ファイルに指定します。
webview_flutter_android を追加をバージョン 3.7.0 以降にする必要があります。

アプリケーション 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 を登録する

アプリ内広告による収益化を改善するため WebViewController（AdSense を使用）コードまたは Google パブリッシャータグについては、次のとおりです。

WebViewController で JavaScript を有効にします。そのようにしないと、広告が読み込まれないようにします。
ユーザーエクスペリエンスを向上させるにはChrome の標準仕様と一貫性を Cookie ポリシー、 AndroidWebViewController インスタンス上のサードパーティ Cookie。
次を呼び出して、WebViewController インスタンスを登録します。 registerWebView() Google Mobile Ads SDK が提供するメソッドを呼び出します

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);
  }
}

URL を読み込む

これで、URL を読み込み、WebViewController を通じてウェブコンテンツを表示できるようになりました。次のテスト URL を読み込むことをおすすめします。 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/'));
  }

次の場合、テスト URL には統合が成功したことを示す緑色のステータスバーが表示されます。次の条件が適用されます。

WebView を Google Mobile Ads SDK に接続しました
JavaScript が有効
サードパーティ Cookie が機能する（iOS デバイスでは想定されない）
ファーストパーティ Cookie の仕組み

ソースコードを表示するコピーします。その後、テスト URL をご自身の URL で置き換えることができます。また、 Charles などのプロキシツールを使用してアプリの HTTPS トラフィックをチェックして、広告リクエストの &scar= パラメータを調べます。