WebViewガイド

概要

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

前提条件

プロジェクトに以下のパッケージを追加してください：

flutter pub add webview_flutter webview_flutter_android webview_flutter_wkwebview

WebViewバックフィル広告には、AndroidとiOSの両方でadrop-ads-backfillの設定が必要です。設定方法ははじめにを参照してください。

プラットフォーム設定

WebViewでバックフィル広告を有効にするには、ネイティブプラットフォームの設定が必要です。

Android
iOS

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>

ios/Runner/Info.plistに以下のキーを追加してください：

Info.plist

<key>GADIntegrationManager</key>
<string>webview</string>

この設定は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はプラットフォームごとに異なる方法で取得します：

プラットフォーム	コントローラー	プロパティ
Android	`AndroidWebViewController`	`.webViewIdentifier`
iOS	`WebKitWebViewController`	`.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リファレンス

サンプル

サンプルコード

SDKガイド

AI

Android

iOS

React Native

Flutter

Web

REST API

概要

前提条件

プラットフォーム設定

WebViewの登録

WebView識別子の取得

iOS WebView設定

外部URLの処理

関連ドキュメント

バナー広告

リファレンス

サンプル

​概要

​前提条件

​プラットフォーム設定

​WebViewの登録

​WebView識別子の取得

​iOS WebView設定

​外部URLの処理

​関連ドキュメント

バナー広告

リファレンス

サンプル

概要

前提条件

プラットフォーム設定

WebViewの登録

WebView識別子の取得

iOS WebView設定

外部URLの処理

関連ドキュメント