WebView API für Anzeigen verwenden

Mit der WebView API für Anzeigen können Sie Anzeigen in Apps mithilfe von 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 Anzeigen monetarisierung zu aktivieren. Weitere Informationen finden Sie in den AdSense und Ad Manager Richtlinien.

  1. Monetarisieren durch Anzeigenanfragen mit Google Mobile Ads Flutter Plugin

    Sie können Ihre App monetarisieren, indem Sie Anzeigenanfragen an Ad Manager mit Google Mobile Ads Flutter Plugin senden und Anzeigenformate für mobile Apps implementieren.

    Weitere Informationen.

  2. Monetarisieren mit der WebView API für Anzeigen

    Wenn Ihre App WebViewController verwendet, um Webinhalte anzuzeigen, in denen Anzeigen von Ad Manager oder AdSense ausgeliefert werden, registrieren Sie WebViewController-Objekte mit Google Mobile Ads Flutter Plugin über die WebView API für Anzeigen. Das JavaScript im AdSense-Code oder Google Publisher-Tag erstellt und sendet Anzeigenanfragen. Sie müssen also keine Anzeigenanfragen mit dem SDK senden. Beachten Sie, dass mit dieser API nur die Inventarformate für mobile Websites und Desktop-Websites verfügbar sind.

    Wenn Sie nicht der Inhaber der Webinhalte in einem WebViewController sind, 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 in derselben App eine oder beide Optionen verwenden.

In diesem Leitfaden erfahren Sie, wie Sie die WebView API für Anzeigen in Ihre iOS-App einbinden.

Hinweis

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

Prüfung der App-ID umgehen

Android

Fügen Sie das folgende <meta-data>-Tag in Ihrer AndroidManifest.xml-Datei hinzu, um die Prüfung der APPLICATION_ID zu umgehen. Wenn Sie diesen Schritt auslassen, Google Mobile Ads Flutter Plugin kann beim Start der App eine IllegalStateException ausgelöst werden.

<!-- 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 der GADApplicationIdentifier zu umgehen. Wenn Sie diesen Schritt auslassen, Google Mobile Ads Flutter Plugin kann beim Start der App eine GADInvalidInitializationException ausgelöst werden.

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

WebViewController registrieren

So verbessern Sie die Monetarisierung von In-App-Anzeigen in einer App innerhalb eines WebViewController, der AdSense-Code oder Google Publisher-Tags verwendet:

  1. Aktivieren Sie JavaScript im WebViewController. Andernfalls werden möglicherweise keine Anzeigen geladen.

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

  3. Registrieren Sie die WebViewController-Instanz, indem Sie die registerWebView() Methode aufrufen, die von Google Mobile Ads Flutter Plugin bereitgestellt wird.

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. 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 Statusleisten für eine erfolgreiche Integration an, wenn die folgenden Bedingungen erfüllt sind:

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

Sehen Sie sich den Quellcode unserer Test-URL an. 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 einen &scar= Parameter zu prüfen.