광고용 WebView API 통합

광고 수익 창출을 위한 WebView API를 이용하면 WebViewController를 통해 인앱 광고 수익을 올리게 됩니다. WebViewController를 통해 앱에서 애드센스 코드 또는 Google 게시자 태그를 사용하여 광고를 구현하는 웹 콘텐츠를 표시하는 경우 광고 수익을 올리려면 이 API를 사용해야 합니다. 자세한 내용은 AdSense 및 Ad Manager 정책

  1. Google 모바일 광고 SDK로 광고를 요청하여 수익 창출

    모바일 앱용 광고 형식을 구현하여 Ad Manager에서 Google 모바일 광고 SDK를 구현하면 모바일 앱용 광고 형식을 구현할 수 있습니다.

    자세히 알아보기

  2. 광고 수익 창출을 위한 WebView API를 사용하여 수익 창출

    앱에서 WebViewController를 이용해 Ad Manager 또는 AdSense의 광고를 게재하는 웹 콘텐츠를 표시하는 경우에는 광고 수익 창출을 위한 WebView API를 Google 모바일 광고 SDK와 함께 이용해 WebViewController 객체를 등록하세요. 애드센스 코드 또는 Google 게시자 태그의 JavaScript가 광고 요청을 생성하고 전송하므로 SDK로 광고 요청을 하지 않아도 됩니다. 이러한 API를 이용하면 모바일 웹 및 데스크톱 웹 인벤토리 형식만 사용할 수 있습니다.

    WebViewController의 웹 콘텐츠를 소유하지 않은 경우에도 이 API를 사용하여 광고주를 스팸으로부터 보호하고 콘텐츠를 제공한 웹 게시자의 수익 창출을 개선하는 것이 좋습니다.

동일한 앱에서 두 옵션 중 하나만 또는 둘 다 사용할 수 있습니다.

이 가이드에서는 광고 수익 창출을 위한 WebView API를 iOS 앱에 통합하는 방법을 설명합니다.

시작하기 전에

광고 수익 창출을 위한 WebView API를 사용하기 전에 다음을 실행해야 합니다.

애플리케이션 식별자 확인을 우회합니다.

Android

다음 <meta-data> 태그를 AndroidManifest.xml 파일에 추가하면 APPLICATION_ID 검사를 건너뜁니다. 이 단계를 놓치면 앱 시작 시 Google 모바일 광고 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 모바일 광고 SDK에서 GADInvalidInitializationException을 발생시킬 수 있습니다.

<!-- Bypass GADApplicationIdentifier check for WebView API for Ads -->
<key>GADIntegrationManager</key>
<string>webview</string>

WebViewController 등록

애드센스 코드 또는 Google 게시자 태그를 사용하는 WebViewController 내에서 광고의 인앱 광고 수익 창출을 개선하려면 다음 단계를 따르세요.

  1. WebViewController에서 자바스크립트를 사용 설정하세요. 그렇지 않으면 광고가 로드되지 않을 수 있습니다.

  2. 사용자의 광고 경험을 개선하고 Chrome의 쿠키 정책을 준수하려면 AndroidWebViewController 인스턴스에서 서드 파티 쿠키를 사용 설정하세요.

  3. Google 모바일 광고 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 로드

이제 WebViewController를 통해 URL을 로드하고 웹 콘텐츠를 표시할 수 있습니다. 자체 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에는 성공적인 통합의 녹색 상태 표시줄이 표시됩니다.

  • Google 모바일 광고 SDK에 연결된 WebView
  • 자바스크립트 사용
  • 서드 파티 쿠키 작동 (iOS 기기에서는 예상되지 않음)
  • 퍼스트 파티 쿠키 작동

테스트 URL의 소스 코드를 확인합니다. 그런 다음 테스트 URL을 원하는 URL로 바꾸면 됩니다. 또한 Charles와 같은 프록시 도구를 이용해 앱의 HTTPS 트래픽을 포착하고 광고 요청에서 &scar= 매개변수를 검사할 수 있습니다.