WebView API für Anzeigen integrieren

Mit der WebView API für Anzeigen können Sie In-App-Anzeigen mithilfe von WebViewController monetarisieren. Wenn Sie Webcontent mit Anzeigen über WebViewController in Ihrer App anzeigen, die mit AdSense-Code oder dem Google Publisher-Tag implementiert sind, sollten Sie diese API verwenden, um die Monetarisierung von Anzeigen zu aktivieren. Weitere Informationen finden Sie in den AdMob-Richtlinien.

  1. Mit dem Google Mobile Ads SDK Anzeigenanfragen senden und Einnahmen erzielen

    Sie können Ihre App monetarisieren, indem Sie mit dem Google Mobile Ads SDK Anzeigenanfragen an AdMob senden und Anzeigenformate für mobile Apps implementieren.

    Weitere Informationen

  2. Mit der WebView API für Anzeigen Einnahmen erzielen

    Wenn in Ihrer App WebViewController verwendet wird, um Webcontent mit Anzeigen aus Ad Manager oder AdSense anzuzeigen, registrieren Sie WebViewController-Objekte mit dem Google Mobile Ads SDK über die WebView API für Anzeigen. Das JavaScript im AdSense-Code oder Google Publisher-Tag erstellt und sendet Anzeigenanfragen, sodass Sie keine Anzeigenanfragen über das SDK senden müssen. Beachten Sie, dass mit dieser API nur die Inventarformate für das mobile Web und das Desktop-Web verfügbar sind.

    Auch wenn Sie nicht der Inhaber der Webinhalte in einer WebViewController sind, sollten Sie diese API verwenden, um Werbetreibende vor Spam zu schützen und die Monetarisierung für die Webpublisher zu verbessern, die die Inhalte bereitgestellt haben.

Sie können entweder eine oder beide Optionen in derselben App verwenden.

Dieser Leitfaden soll Ihnen dabei helfen, die WebView API für Anzeigen in Ihre iOS-App einzubinden.

Hinweis

Bevor Sie die WebView API für Anzeigen verwenden, müssen Sie Folgendes tun:

Prüfung der Anwendungs-ID umgehen

Fügen Sie der Datei AndroidManifest.xml das folgende <meta-data>-Tag hinzu, um die Prüfung für die APPLICATION_ID zu umgehen. Wenn Sie diesen Schritt auslassen, löst das Google Mobile Ads SDK beim Start der App möglicherweise eine IllegalStateException aus.

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

Aktualisieren Sie die Datei Runner/Info.plist mit dem Schlüssel und dem Stringwert unten, um eine Prüfung auf GADApplicationIdentifier zu umgehen. Wenn Sie diesen Schritt auslassen, löst das Google Mobile Ads SDK beim Start der App möglicherweise eine GADInvalidInitializationException aus.

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

WebViewController registrieren

Wenn Sie die In-App-Anzeigenmonetarisierung in einer WebViewController mit AdSense-Code oder Google-Publisher-Tags verbessern möchten, gehen Sie so vor:

  1. Aktivieren Sie JavaScript in der WebViewController. Andernfalls werden Anzeigen möglicherweise nicht geladen.

  2. Um die Anzeigennutzung für Ihre Nutzer zu verbessern und die Chrome-Cookie-Richtlinie einzuhalten, aktivieren Sie Drittanbieter-Cookies in Ihrer AndroidWebViewController-Instanz.

  3. Registrieren Sie die WebViewController-Instanz, indem Sie die vom Google Mobile Ads SDK bereitgestellte Methode registerWebView() aufrufen.

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 laden

Sie können jetzt eine URL laden und Ihre Webinhalte über WebViewController anzeigen lassen. Wir empfehlen, diese Test-URL zu laden: https://webview-api-for-ads-test.glitch.me/, um die Integration zu testen, bevor Sie Ihre eigene URL verwenden. Wenn JavaScript nicht aktiviert ist, wird auf der Webseite ein Fehler angezeigt.

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

Wenn die folgenden Bedingungen erfüllt sind, werden für die Test-URL grüne Statusbalken für eine erfolgreiche Integration angezeigt:

  • WebView mit dem Google Mobile Ads SDK verbunden ist
  • JavaScript aktiviert
  • Drittanbieter-Cookies funktionieren (nicht auf iOS-Geräten)
  • Funktionsweise von eigenen Cookies

Quellcode unserer Test-URL ansehen Sie können die Test-URL dann durch Ihre URL ersetzen. Sie können auch ein Proxy-Tool wie Charles verwenden, um den HTTPS-Traffic Ihrer App zu erfassen und die Anzeigenanfragen auf einen &scar=-Parameter zu prüfen.