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.
- 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.
- 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 SieWebViewController
-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:
- Verwenden Sie in Ihrer App das Google Mobile Ads SDK for Flutter-Plug-in mit Version 3.0.0 oder höher.
- Fügen Sie
webview_flutter
als Abhängigkeit in die Dateipubspec.yaml
ein. - Fügen Sie
webview_flutter_android
mit Version 3.7.0 oder höher in Ihre App ein.
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:
Aktivieren Sie JavaScript in der
WebViewController
. Andernfalls werden Anzeigen möglicherweise nicht geladen.Um die Anzeigennutzung für Ihre Nutzer zu verbessern und die Chrome-Cookie-Richtlinie einzuhalten, aktivieren Sie Drittanbieter-Cookies in Ihrer
AndroidWebViewController
-Instanz.Registrieren Sie die
WebViewController
-Instanz, indem Sie die vom Google Mobile Ads SDK bereitgestellte MethoderegisterWebView()
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.