메인 콘텐츠로 건너뛰기

​
개요

Flutter 앱의 WebView에서 Adrop.registerWebView를 사용하여 백필 광고를 표시할 수 있습니다.

​
사전 요구사항

프로젝트에 다음 패키지를 추가하세요: 
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()는 웹 콘텐츠를 로드하기 전에 호출하세요. 등록이 완료된 후에 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 레퍼런스

예제

예제 코드