광고용 WebView API 통합

광고 수익 창출을 위한 WebView API를 사용하면 WebViewController 애드센스 코드 또는 Google 게시자 태그 WebViewController 기능을 사용하려면 이 API를 사용하여 광고를 수익을 창출할 수 있습니다. 자세한 내용은 AdSense Ad Manager 정책

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

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

    자세히 알아보기

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

    앱이 WebViewController를 사용하여 광고를 게재하는 웹 콘텐츠를 표시하는 경우 Ad Manager 또는 AdSense의 경우 광고 수익 창출을 위한 WebView API를 사용하여 WebViewController 객체와 함께 사용할 수 있습니다. 이 애드센스 코드의 자바스크립트 또는 Google 게시자 태그 광고 요청을 생성하고 전송하므로 생성합니다. 모바일 웹과 데스크톱 웹만 인벤토리 형식 확인할 수 있습니다

    WebViewController의 웹 콘텐츠를 소유하지 않은 경우에도 여전히 가능합니다. 이 API를 사용하여 광고주에게 스팸과 콘텐츠를 제공한 웹 게시자의 수익 창출 개선

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

이 가이드에서는 광고 수익 창출을 위한 WebView API를 iOS 앱

시작하기 전에

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

애플리케이션 식별자 확인 우회

Android

AndroidManifest.xml 파일에 다음 <meta-data> 태그를 추가하여 APPLICATION_ID 확인을 우회합니다. 이 단계를 놓치면 모바일 광고 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 등록

앱에서 애드센스를 사용하는 WebViewController 코드 또는 Google 게시자 태그가 있는 경우 다음 단계를 따르세요. 아래 목록에 나와 있습니다.

  1. WebViewController에서 JavaScript를 사용 설정합니다. 그렇지 않을 경우 있습니다.

  2. 사용자의 만족도를 Chrome의 광고 경험과 일관성 있는 콘텐츠를 쿠키 정책: 사용 설정 AndroidWebViewController 인스턴스의 서드 파티 쿠키입니다.

  3. 다음을 호출하여 WebViewController 인스턴스를 등록합니다. registerWebView() 메서드를 사용할 수 있습니다.

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을 로드하는 것이 좋습니다. https://webview-api-for-ads-test.glitch.me/: 광고를 게재할 수 있습니다. 자바스크립트가 유효하지 않은 경우 웹페이지에 오류가 표시됩니다. 사용 설정되어 있습니다.

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 모바일 광고 SDK에 연결되었습니다.
  • 자바스크립트가 사용 설정됨
  • 서드 파티 쿠키 작동 (iOS 기기에서는 예상되지 않음)
  • 퍼스트 파티 쿠키의 작동

소스 코드 보기 '테스트 URL'을 입력합니다. 그러면 테스트 URL을 실제 URL로 바꿀 수 있습니다. 그 외에 Charles와 같은 프록시 도구를 사용하여 앱의 HTTPS 트래픽을 확인하고 광고 요청에서 &scar= 매개변수를 검사합니다.