WebView API für Anzeigen einbinden

Die WebView API for Ads ermöglicht die Monetarisierung von In-App-Anzeigen mithilfe von WebViewController. Wenn Sie über WebViewController Webinhalte präsentieren, bei denen Anzeigen mit AdSense-Code oder Google Publisher-Tag in Ihrer App implementiert werden, sollten Sie diese API verwenden, um die Anzeigenmonetarisierung zu aktivieren. Weitere Informationen finden Sie in den AdSense und Ad Manager-Richtlinien.

  1. Monetarisierung durch Anzeigenanfragen mit dem Google Mobile Ads SDK

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

    Weitere Informationen

  2. Mit der WebView API for Ads Einnahmen erzielen

    Wenn in Ihrer App WebViewController zur Darstellung von Webinhalten verwendet wird, über die Anzeigen über Ad Manager oder AdSense ausgeliefert werden, verwenden Sie die WebView API für Anzeigen, um WebViewController-Objekte beim Google Mobile Ads SDK zu registrieren. Mit dem JavaScript-Code im AdSense-Code oder im Google Publisher-Tag werden Anzeigenanfragen erstellt und gesendet, sodass Sie keine Anzeigenanfragen mit dem SDK senden müssen. Beachten Sie, dass nur die Inventarformate für das mobile Web und Websites für Computer mit dieser API verfügbar sind.

    Wenn Sie nicht der Inhaber der Webinhalte in einer WebViewController sind, empfehlen wir Ihnen dennoch, diese API zu verwenden, um Werbetreibende vor Spam zu schützen und die Monetarisierung für die Web-Publisher zu verbessern, die die Inhalte bereitgestellt haben.

Beachten Sie, dass Sie in derselben App eine oder beide Optionen nutzen können.

Dieser Leitfaden soll Ihnen bei der Integration der WebView API für Anzeigen in Ihre iOS-App helfen.

Hinweis

Führen Sie die folgenden Schritte aus, bevor Sie die WebView API für Anzeigen verwenden:

Prüfung auf Anwendungskennung umgehen

Android

Fügen Sie das folgende <meta-data>-Tag in die Datei AndroidManifest.xml ein, um die Prüfung auf APPLICATION_ID zu umgehen. Wenn Sie diesen Schritt verpassen, wird vom Google Mobile Ads SDK möglicherweise beim Start der App ein IllegalStateException 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 Stringwert unten, um eine Prüfung auf GADApplicationIdentifier zu umgehen. Wenn Sie diesen Schritt verpassen, gibt das Google Mobile Ads SDK möglicherweise beim Start der App einen GADInvalidInitializationException aus.

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

WebViewController registrieren

Um die Monetarisierung von In-App-Anzeigen in einem WebViewController zu verbessern, in dem AdSense-Code oder Google Publisher-Tags verwendet werden, gehen Sie so vor:

  1. JavaScript in WebViewController aktivieren. Andernfalls werden die Anzeigen möglicherweise nicht geladen.

  2. Aktivieren Sie auf Ihrer AndroidWebViewController-Instanz Cookies von Drittanbietern, um die Nutzerfreundlichkeit von Werbeanzeigen zu verbessern und die Cookie-Richtlinie von Chrome einzuhalten.

  3. Registrieren Sie die Instanz WebViewController, indem Sie die Methode registerWebView() aufrufen, die vom Google Mobile Ads SDK 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

Du kannst jetzt über WebViewController eine URL laden und deine Webinhalte anzeigen lassen. Wir empfehlen, diese Test-URL zu laden: https://webview-api-for-ads-test.glitch.me/, um die Integration zu testen, bevor du deine eigene URL verwendest. 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/'));
  }

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

  • WebView ist mit dem Google Mobile Ads SDK verbunden
  • JavaScript 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 Proxytool wie Charles verwenden, um den HTTPS-Traffic Ihrer App zu erfassen und die Anzeigenanfragen auf einen &scar=-Parameter zu prüfen.