メインコンテンツへスキップ

​
概要

FlutterアプリでAdrop.registerWebViewを使用して、WebView内にバックフィル広告を表示できます。

​
前提条件

プロジェクトに以下のパッケージを追加してください： 
flutter pub add webview_flutter webview_flutter_android webview_flutter_wkwebview
WebViewバックフィル広告には、AndroidとiOSの両方でadrop-ads-backfillの設定が必要です。設定方法ははじめにを参照してください。

​
プラットフォーム設定

WebViewでバックフィル広告を有効にするには、ネイティブプラットフォームの設定が必要です。
android/app/src/main/AndroidManifest.xmlに以下を追加してください：
AndroidManifest.xml
<manifest>
    <application>
        <!-- WebViewバックフィル広告連携 -->
        <meta-data
            android:name="com.google.android.gms.ads.INTEGRATION_MANAGER"
            android:value="webview"/>
    </application>
</manifest>
この設定はWebViewでバックフィル広告が正常に動作するために必要です。設定がないと、バックフィル広告が表示されない場合があります。

​
WebViewの登録

WebViewControllerを作成し、プラットフォーム固有の識別子を取得して、コンテンツをロードする前にAdrop.registerWebViewで登録してください。 
import 'dart:io';
import 'package:adrop_ads_flutter/adrop_ads_flutter.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';
import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';

class WebViewScreen extends StatefulWidget {
  const WebViewScreen({super.key});

  @override
  State<WebViewScreen> createState() => _WebViewScreenState();
}

class _WebViewScreenState extends State<WebViewScreen> {
  late final WebViewController _controller;
  bool _isReady = false;

  @override
  void initState() {
    super.initState();

    final PlatformWebViewControllerCreationParams params;
    if (WebViewPlatform.instance is WebKitWebViewPlatform) {
      params = WebKitWebViewControllerCreationParams(
        allowsInlineMediaPlayback: true,
        mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
      );
    } else {
      params = const PlatformWebViewControllerCreationParams();
    }

    _controller = WebViewController.fromPlatformCreationParams(params)
      ..setJavaScriptMode(JavaScriptMode.unrestricted);

    _registerAndLoad();
  }

  Future<void> _registerAndLoad() async {
    final int identifier;
    if (Platform.isAndroid) {
      identifier =
          (_controller.platform as AndroidWebViewController).webViewIdentifier;
    } else if (Platform.isIOS) {
      identifier =
          (_controller.platform as WebKitWebViewController).webViewIdentifier;
    } else {
      return;
    }

    await Adrop.registerWebView(identifier);

    setState(() => _isReady = true);
    _controller.loadRequest(Uri.parse('https://your-website.com'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _isReady
          ? WebViewWidget(controller: _controller)
          : const Center(child: CircularProgressIndicator()),
    );
  }
}

​
WebView識別子の取得

webViewIdentifierはプラットフォームごとに異なる方法で取得します：
プラットフォームコントローラープロパティ
AndroidAndroidWebViewController.webViewIdentifier
iOSWebKitWebViewController.webViewIdentifier
if (Platform.isAndroid) {
  identifier =
      (_controller.platform as AndroidWebViewController).webViewIdentifier;
} else if (Platform.isIOS) {
  identifier =
      (_controller.platform as WebKitWebViewController).webViewIdentifier;
}
Adrop.registerWebView()はWebコンテンツをロードする前に呼び出してください。登録完了後にURLをロードする必要があります。

​
iOS WebView設定

iOSでは、WebKitWebViewControllerCreationParamsを使用してインラインメディア再生を設定してください： 
final params = WebKitWebViewControllerCreationParams(
  allowsInlineMediaPlayback: true,
  mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
);

_controller = WebViewController.fromPlatformCreationParams(params)
  ..setJavaScriptMode(JavaScriptMode.unrestricted);
WebViewバックフィル広告にはadrop-ads-backfillモジュールが必要です。モジュールがインストールされていない場合、registerWebView()は無視されます。

​
外部URLの処理

アプリで自社ドメイン以外のURLを外部ブラウザで開くロジックがある場合、広告リソースリクエスト（例：googleads.g.doubleclick.net）がブロックされないようにする必要があります。 広告リソース（iframe、スクリプトなど）は広告SDKによって自動的にロードされ、ユーザーが直接クリックしたものではありません。メインフレームのナビゲーションのみを外部ブラウザにリダイレクトしてください。 
import 'package:url_launcher/url_launcher.dart';

const allowedHost = 'my-domain.com';

_controller = WebViewController.fromPlatformCreationParams(params)
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setNavigationDelegate(
    NavigationDelegate(
      onNavigationRequest: (NavigationRequest request) {
        final host = Uri.parse(request.url).host;

        // メインフレームのナビゲーションのみ外部ブラウザで開く
        // 広告リソース（例：googleads.g.doubleclick.net）はiframe/スクリプトでロードされるためブロックしない
        if (!host.contains(allowedHost) && request.isMainFrame) {
          launchUrl(Uri.parse(request.url), mode: LaunchMode.externalApplication);
          return NavigationDecision.prevent;
        }
        return NavigationDecision.navigate;
      },
    ),
  );
自社ドメイン以外のすべてのリクエストをブロックまたはリダイレクトしないでください。googleads.g.doubleclick.netのような広告リソースはバックフィル広告のプロセスで自動的にロードされ、WebView内で正常にロードされる必要があります。

​
関連ドキュメント

バナー広告

バナー広告の実装方法

リファレンス

APIリファレンス

サンプル

サンプルコード