WebView API für Anzeigen einbinden

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

  1. Monetarisieren durch Anzeigenanfragen mit Google Mobile Ads Flutter Plugin

    Sie können Ihre App monetarisieren, indem Sie mit Google Mobile Ads Flutter Plugin Anzeigenanfragen an AdMob senden. Dazu müssen Sie Anzeigenformate für mobile Apps implementieren.

    Weitere Informationen

  2. Monetarisierung mit der WebView API für Anzeigen

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

    Wenn Sie die Webinhalte in einer WebViewController nicht besitzen, empfehlen wir Ihnen dennoch, diese API zu 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 die eine oder die andere Option oder sogar beide in derselben App verwenden.

Dieser Leitfaden soll Ihnen dabei helfen, die WebView API for Ads in Ihre iOS-App einzubinden.

Hinweis

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

Prüfung der Anwendungskennung umgehen

Android

Fügen Sie der Datei AndroidManifest.xml das folgende <meta-data>-Tag hinzu, um die Prüfung auf die APPLICATION_ID zu umgehen. Wenn Sie diesen Schritt überspringen, wird bei Google Mobile Ads Flutter Plugin möglicherweise ein IllegalStateException beim Start der App ausgegeben.

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

iOS

Aktualisieren Sie die Datei Runner/Info.plist mit dem Schlüssel und dem Stringwert unten, um die Prüfung auf GADApplicationIdentifier zu umgehen. Wenn Sie diesen Schritt nicht ausführen, wird bei App-Start möglicherweise eine GADInvalidInitializationException von Google Mobile Ads Flutter Plugin ausgegeben.

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

WebViewController registrieren

So können Sie die In-App-Anzeigenmonetarisierung von Anzeigen in einer WebViewController verbessern, in der AdSense-Code oder Google Publisher-Tags verwendet werden:

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

  2. Um die Nutzerfreundlichkeit von Anzeigen zu verbessern und die Cookie-Richtlinie von Chrome einzuhalten, müssen Sie Drittanbieter-Cookies in Ihrer AndroidWebViewController-Instanz aktivieren.

  3. Registrieren Sie die WebViewController-Instanz, indem Sie die von Google Mobile Ads Flutter Plugin 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://google.github.io/webview-ads/test/, um die Integration zu testen, bevor Sie Ihre eigene URL verwenden. Auf der Webseite wird ein Fehler angezeigt, wenn JavaScript nicht aktiviert ist.

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

Die Test-URL zeigt grüne Statusbalken für eine erfolgreiche Integration an, wenn die folgenden Bedingungen erfüllt sind:

  • WebView ist mit Google Mobile Ads Flutter Plugin verbunden
  • JavaScript aktiviert
  • Drittanbieter-Cookies funktionieren (nicht auf iOS-Geräten erwartet)
  • Eigene Cookies funktionieren

Quellcode unserer Test-URL ansehen Anschließend können Sie die Test-URL 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 den Parameter &scar= zu prüfen.