WebView API for Ads を組み込む

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

  1. Google Mobile Ads SDK を使用して広告リクエストを行い、収益化する

    アプリを収益化するには、モバイルアプリ向け広告フォーマットを実装することで、アド マネージャーでは、モバイルアプリ向け広告フォーマットを実装することで、Google Mobile Ads SDK と連携します。

    詳細

  2. WebView API for Ads を使用して収益化する

    アド マネージャーまたは AdSense から広告を配信するウェブ コンテンツを表示するためにアプリで WebViewController を使用する場合は、WebView API for Ads を使用して WebViewController オブジェクトを Google Mobile Ads SDK で登録します。AdSense コードまたは Google パブリッシャー タグの JavaScript で、広告リクエストの作成および送信が行われるため、SDK で広告リクエストを行う必要がありません。なお、この API で使用できるのは、モバイルウェブと PC ウェブの広告枠形式のみです。

    WebViewController にウェブ コンテンツを所有していない場合でも、スパムから広告主を保護し、コンテンツを提供したウェブ パブリッシャーの収益化を改善するには、この API を使用することをおすすめします。

同じアプリで、片方のオプションだけを使って収益化することも、両方のオプションを使って収益化することも可能です。

このガイドでは、WebView API for Ads を iOS アプリに統合する方法を説明します。

始める前に

WebView API for Ads を使用するには、以下が必要です。

アプリケーション ID のチェックをバイパスする

Android

APPLICATION_ID のチェックをバイパスするために、AndroidManifest.xml ファイルに次の <meta-data> タグを追加します。この手順を行わないと、アプリの起動時に 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

GADApplicationIdentifier のチェックをバイパスするために、以下のキーと文字列値で Runner/Info.plist ファイルを更新します。この手順を行わないと、アプリの起動時に 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);
  }
}

URL を読み込む

これで、URL を読み込み、WebViewController でウェブ コンテンツを表示できるようになりました。独自の URL を使用する前に、テスト URL（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/'));
  }

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

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

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