Integracja interfejsu WebView API for Ads

Interfejs WebView API for Ads umożliwia zarabianie na reklamach w aplikacji za pomocą WebViewController. Jeśli wyświetlasz w aplikacji treści internetowe, które implementują reklamy za pomocą kodu AdSense lub tagu wydawcy Google w WebViewController, użyj tego interfejsu API, aby włączyć zarabianie na reklamach. Więcej informacji znajdziesz w zasadach AdMob.

  1. Zarabiaj na wysyłaniu żądań reklam za pomocą Google Mobile Ads Flutter Plugin

    Aby zarabiać na aplikacji, możesz wysyłać do AdMob żądania reklam za pomocą Google Mobile Ads Flutter Pluginwdrożonych formatów reklam w aplikacji mobilnej.

    Więcej informacji

  2. Zarabianie za pomocą interfejsu WebView API for Ads

    Jeśli Twoja aplikacja używa WebViewController do wyświetlania treści z internetu, w których wyświetlają się reklamy z Ad Managera lub AdSense, użyj interfejsu WebView API for Ads, aby zarejestrować obiekty WebViewController w Google Mobile Ads Flutter Plugin. Kod JavaScript w kodzie AdSense lub tagu wydawcy Google tworzy i wysyła żądania reklamy, więc nie musisz wysyłać żadnych żądań reklamy za pomocą pakietu SDK. Pamiętaj, że ten interfejs API obsługuje tylko formaty zasobów reklamowych w internecie mobilnym i na komputerach.

    Jeśli nie jesteś właścicielem treści internetowych w WebViewController, zachęcamy Cię do korzystania z tego interfejsu API, aby chronić reklamodawców przed spamem i zwiększać zarobki wydawców internetowych, którzy udostępniają treści.

Pamiętaj, że możesz zastosować jedną z tych opcji lub obie w tej samej aplikacji.

Ten przewodnik pomoże Ci zintegrować interfejs WebView API for Ads z aplikacją na iOS.

Zanim zaczniesz

Zanim zaczniesz korzystać z interfejsu WebView API w reklamach, wykonaj te czynności:

Omijanie sprawdzania identyfikatora aplikacji

Android

Dodaj ten tag <meta-data> do pliku AndroidManifest.xml, aby pominąć sprawdzanie APPLICATION_ID. Jeśli pominiesz ten krok, Google Mobile Ads Flutter Plugin może zgłosić błąd IllegalStateException podczas uruchamiania aplikacji.

<!-- Bypass APPLICATION_ID check for WebView API for Ads -->
<meta-data
    android:name="com.google.android.gms.ads.INTEGRATION_MANAGER"
    android:value="webview"/>

iOS

Zaktualizuj plik Runner/Info.plist, dodając do niego klucz i wartość ciągu podane poniżej, aby pominąć sprawdzanie GADApplicationIdentifier. Jeśli pominiesz ten krok, Google Mobile Ads Flutter Plugin może zgłosić GADInvalidInitializationException przy uruchamianiu aplikacji.

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

Zarejestruj WebViewController

Aby zwiększyć zarabianie na reklamach w aplikacji, które korzystają z kodu AdSense lub tagów wydawcy Google, wykonaj te czynności:WebViewController

  1. Włącz JavaScript w WebViewController. Jeśli tego nie zrobisz, reklamy mogą się nie wczytywać.

  2. Aby poprawić komfort użytkowników związany z reklamami i zapewnić zgodność z zasadami dotyczącymi plików cookie w Chrome, włącz pliki cookie innych firm w instancji AndroidWebViewController.

  3. Zarejestruj instancję WebViewController, wywołując metodę registerWebView() udostępnioną przez Google Mobile Ads Flutter Plugin.

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);
  }
}

Wczytaj adres URL

Możesz teraz wczytać adres URL i wyświetlić treści internetowe za pomocą WebViewController. Zalecamy wczytanie tego testowego adresu URL:https://google.github.io/webview-ads/test/, aby przetestować integrację przed użyciem własnego adresu URL. Jeśli JavaScript nie jest włączony, na stronie internetowej pojawi się błąd.

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://google.github.io/webview-ads/test/'));
  }

Jeśli integracja przebiegła pomyślnie, przy adresie URL testu pojawią się zielone paski stanu. Warunki, które muszą być spełnione:

  • WebView połączono z urządzeniem Google Mobile Ads Flutter Plugin
  • JavaScript włączony
  • Pliki cookie innych firm działają (nie jest to oczekiwane na urządzeniach z iOS)
  • Działanie własnych plików cookie

Wyświetl kod źródłowy naszego testowego adresu URL. Następnie możesz zastąpić testowy adres URL swoim adresem. Możesz też użyć narzędzia proxy, np. Charles, aby przechwycić ruch HTTPS aplikacji i sprawdzić, czy w żądaniach reklamy występuje parametr &scar=.