WebView API für Anzeigen einbinden

Die WebView API für Google Ads ermöglicht die Monetarisierung von In-App-Anzeigen mithilfe von WebViewController Wenn Sie Webinhalte präsentieren, in denen Anzeigen mit AdSense-Code oder Google Publisher-Tag über WebViewController in deiner App angezeigt wird, solltest du diese API verwenden, um Anzeigen zu aktivieren Monetarisierung. Weitere Informationen finden Sie in der AdSense und Ad Manager-Richtlinien.

  1. Anzeigen mithilfe des Google Mobile Ads SDK mithilfe von Anzeigenanfragen monetarisieren

    Sie können Ihre App monetarisieren, indem Sie Anzeigenanfragen an Ad Manager mit der Google Mobile Ads SDK durch Implementieren von Anzeigenformaten für Mobilgeräte App.

    Weitere Informationen

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

    Wenn deine App WebViewController zum Einblenden von Webinhalten verwendet, bei denen Anzeigen ausgeliefert werden von Ad Manager oder AdSense, registrieren Sie sich mit der WebView API for Ads WebViewController-Objekte mit dem Google Mobile Ads SDK. Die JavaScript im AdSense-Code oder Google Publisher-Tag erstellt und sendet Anzeigenanfragen, sodass Sie keine Anzeigenanfragen mit des SDK. Beachten Sie, dass nur Websites für Mobilgeräte und Websites für Computer Inventarformate sind über diese API verfügbar.

    Falls Sie nicht der Inhaber der Webinhalte in einem WebViewController sind, sind Sie trotzdem wird empfohlen, dieses API zu verwenden, um Werbetreibende vor Spam und die Monetarisierung für die Web-Publisher zu verbessern, die die Inhalte bereitgestellt haben.

Beachten Sie, dass Sie eine der beiden oder sogar beide Optionen in derselben App ausführen können.

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

Hinweis

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

Prüfung auf Anwendungskennung umgehen

Android

Fügen Sie das folgende <meta-data>-Tag in die Datei AndroidManifest.xml ein: die Prüfung auf APPLICATION_ID umgehen. Wenn Sie diesen Schritt verpassen, das Mobile Ads SDK eine Fehlermeldung IllegalStateException beim Start der App.

<!-- 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 folgenden Schlüssel- und Stringwert: eine Prüfung für GADApplicationIdentifier umgehen. Wenn Sie diesen Schritt verpassen, kann das Google Mobile Ads SDK eine GADInvalidInitializationException beim Start der App.

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

WebViewController registrieren

Um die Monetarisierung von In-App-Anzeigen innerhalb eines WebViewController, die AdSense verwenden Code oder Google Publisher Tags, folgen Sie der Anleitung unten aufgeführt:

  1. JavaScript in WebViewController aktivieren. Andernfalls kann es zu Anzeigen nicht geladen werden.

  2. Um die die Nutzerfreundlichkeit von Werbeanzeigen Cookie-Richtlinie, aktivieren Drittanbieter-Cookies auf Ihrer AndroidWebViewController-Instanz.

  3. Registrieren Sie die Instanz WebViewController durch Aufrufen der registerWebView() 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

Sie können jetzt über WebViewController eine URL laden und Ihre Webinhalte anzeigen. Wir empfehlen, diese Test-URL zu laden: https://webview-api-for-ads-test.glitch.me/ zum Testen der Integration vor dem mit Ihrer eigenen URL. Die Webseite zeigt einen Fehler an, wenn JavaScript nicht aktiviert.

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 an, wenn das gelten die folgenden Bedingungen:

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

Sehen Sie sich den Quellcode an. unserer Test-URL. Anschließend können Sie die Test-URL durch Ihre URL ersetzen. Sie können auch Verwenden Sie ein Proxy-Tool wie Charles, um Ihre App-HTTPS-Traffic und prüfen Sie die Anzeigenanfragen auf einen &scar=-Parameter.