Korzystanie z interfejsu WebView API w reklamach

Interfejs WebView API for Ads umożliwia zarabianie na reklamach w aplikacji za pomocą WebViewController. Jeśli wyświetlasz w aplikacji treści z internetu, które zawierają reklamy z kodem AdSense lub tagiem wydawcy Google, za pomocą WebViewController, musisz użyć tego interfejsu API, aby umożliwić zarabianie na reklamach. Więcej informacji znajdziesz w zasadach AdSense i Ad Managera.

  1. Zarabiaj, wysyłając żądania reklamy za pomocą Google Mobile Ads Flutter Plugin

    Możesz zarabiać na aplikacji, wysyłając żądania reklamy do Ad Managera za pomocą Google Mobile Ads Flutter Plugin, wdrażając formaty 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, które zawierają 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 za pomocą tego interfejsu API dostępne są tylko formaty zasobów reklamowych w internecie mobilnym i na stronie na komputer.

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

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

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

Zanim zaczniesz

Zanim zaczniesz korzystać z interfejsu WebView API for Ads, wykonaj te czynności:

Pomiń sprawdzanie identyfikatora aplikacji

Android

Dodaj w pliku AndroidManifest.xml tag <meta-data>, aby pominąć sprawdzanie APPLICATION_ID. Jeśli pominiesz ten krok, Google Mobile Ads Flutter Plugin może wygenerować 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 klucz i wartość ciągu poniżej, aby pominąć sprawdzanie GADApplicationIdentifier. Jeśli pominiesz ten krok, Google Mobile Ads Flutter Plugin może wygenerować błąd GADInvalidInitializationException podczas uruchamiania aplikacji.

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

Rejestrowanie WebViewController

Aby zwiększyć przychody z reklam w aplikacji w WebViewController, która korzysta z kodu AdSense lub tagów wydawcy Google, wykonaj te czynności:

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

  2. Aby poprawić jakość reklam wyświetlanych użytkownikom i zachować zgodność z zasadami dotyczącymi plików cookie Chrome, włącz pliki cookie innych firm w instancji AndroidWebViewController.

  3. Zarejestruj instancję WebViewController, wywołując metodę registerWebView() udostępnianą 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świetlać treści z internetu 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 spełnione są te warunki, testowy adres URL wyświetla zielone paski stanu wskazujące na udaną integrację:

  • WebView połączono z: Google Mobile Ads Flutter Plugin
  • Włączony JavaScript
  • Pliki cookie innych firm działają (nie jest to oczekiwane na urządzeniach z iOS).
  • Własne pliki cookie działają

Wyświetl kod źródłowy naszego testowego adresu URL. Następnie możesz zastąpić testowy adres URL swoim adresem URL. Możesz też użyć narzędzia proxy, takiego jak Charles, aby przechwycić ruch HTTPS aplikacji i sprawdzić żądania reklamy pod kątem parametru &scar=.