Korzystanie z interfejsu WebView API w reklamach

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

    Jeśli Twoja aplikacja używa WebViewController do wyświetlania treści internetowych, które wyświetlają reklamy z Ad Managera lub AdSense, użyj interfejsu WebView API for Ads, aby zarejestrować obiekty WebViewController za pomocą 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 mobilnej i stacjonarnej wersji internetu .

    Jeśli nie jesteś właścicielem treści internetowych w WebViewController, nadal zachęcamy 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 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

Aby pominąć sprawdzanie APPLICATION_ID, dodaj ten tag <meta-data> w pliku AndroidManifest.xml. Jeśli pominiesz ten krok, Google Mobile Ads Flutter Pluginmoże zgłosić 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

Aby pominąć sprawdzanie GADApplicationIdentifier, zaktualizuj plik Runner/Info.plist za pomocą klucza i wartości ciągu znaków podanych poniżej. Jeśli pominiesz ten krok, Google Mobile Ads Flutter Plugin może zgłosić wyjątek GADInvalidInitializationException podczas uruchamiania aplikacji.

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

Zarejestruj WebViewController

Aby zwiększyć zarobki na reklamach w aplikacji w komponencie WebViewController, który używa kodu AdSense lub tagów wydawcy Google, wykonaj te czynności poniżej:

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

  2. Aby zwiększyć komfort użytkowników i zachować 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ę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świetlić treści internetowe za pomocą WebViewController. Zanim zaczniesz używać własnego adresu URL, zalecamy wczytanie tego testowego adresu URL: https://google.github.io/webview-ads/test/. 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, co oznacza, że integracja się powiodła:

  • WebView połączony z Google Mobile Ads Flutter Plugin
  • JavaScript jest włączony
  • 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 przechwytywać ruch HTTPS aplikacji i sprawdzać żądania reklamy pod kątem parametru &scar=.