Dieser Leitfaden richtet sich an Publisher, die mit einer Flutter-App Einnahmen erzielen möchten.
Das Einbinden des Google Mobile Ads SDK in eine Flutter-App, den Sie hier ausführen, ist der erste Schritt, um AdMob-Anzeigen zu präsentieren und Umsätze zu erzielen. Sobald die Integration abgeschlossen ist, können Sie ein Anzeigenformat auswählen, um detaillierte Implementierungsschritte zu erhalten.
Das Google Mobile Ads SDK für Flutter unterstützt derzeit das Laden und Einblenden von Banner-, Interstitial- (Vollbild), nativen und Anzeigen mit Prämie.
Voraussetzungen
- Flutter 1.22.0 oder höher
- Android
- Android Studio 3.2 oder höher
- Ausrichtung auf Android-API-Level 20 oder höher
compileSdkVersion
auf 28 oder höher setzen
- iOS
- Neueste Version von Xcode mit aktivierten Befehlszeilentools
- Empfohlen: AdMob-Konto erstellen und Android- und/oder iOS-App registrieren
Mobile Ads SDK importieren
- Fügen Sie das Google Mobile Ads SDK für Flutter-Plug-in in Ihr Flutter-Projekt ein.
Plattformspezifische Einrichtung
Android
AndroidManifest.xml aktualisieren
Die AdMob-App-ID muss im AndroidManifest.xml
enthalten sein.
Andernfalls kommt es beim Start der App zum Absturz.
Fügen Sie die AdMob-App-ID (identifiziert in der AdMob-Benutzeroberfläche) in die Datei android/app/src/main/AndroidManifest.xml
der App ein, indem Sie ein <meta-data>
-Tag mit dem Namen com.google.android.gms.ads.APPLICATION_ID
hinzufügen. Ihre App-ID finden Sie auf der AdMob-Benutzeroberfläche. Geben Sie für android:value
wie unten gezeigt Ihre eigene AdMob-App-ID in Anführungszeichen ein:
<manifest> <application> <!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 --> <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/> <application> <manifest>
Verwenden Sie dieselbe value
, wenn Sie das Plug-in in Ihrem Dart-Code initialisieren.
Weitere Informationen zum Konfigurieren von AndroidManifest.xml
und zum Einrichten der App-ID finden Sie im Android-Leitfaden.
iOS
Info.plist aktualisieren
Fügen Sie in der Datei ios/Runner/Info.plist
Ihrer App einen GADApplicationIdentifier
-Schlüssel mit einem Stringwert Ihrer AdMob-App-ID hinzu (identifiziert in der AdMob-Benutzeroberfläche):
<key>GADApplicationIdentifier</key> <string>ca-app-pub-################~##########</string>
Sie müssen denselben Wert übergeben, wenn Sie das Plug-in in Ihrem Dart-Code initialisieren.
Weitere Informationen zum Konfigurieren von Info.plist
und zum Einrichten Ihrer App-ID finden Sie im iOS-Leitfaden.
Mobile Ads SDK initialisieren
Bevor die Anzeigen geladen werden, bitten Sie Ihre App, das Mobile Ads SDK zu initialisieren. Rufen Sie dazu MobileAds.instance.initialize()
auf. Dadurch wird ein SDK initialisiert und eine Future
Funktion zurückgegeben, die nach Abschluss der Initialisierung oder nach einer 30-sekündigen Zeitüberschreitung abgeschlossen wird. Diese Schritte müssen nur einmal ausgeführt werden, idealerweise direkt vor der Ausführung der App.
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:flutter/material.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
MobileAds.instance.initialize();
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
// Load ads.
}
}
Anzeigenformat auswählen
Das Mobile Ads SDK wurde importiert und Sie können eine Anzeige implementieren. AdMob bietet verschiedene Anzeigenformate. Wählen Sie einfach das Format aus, das am besten zu Ihrer App passt.
Banner
Rechteckige Anzeigen, die oben oder unten auf dem Bildschirm des Geräts erscheinen. Banneranzeigen bleiben auf dem Bildschirm, während Nutzer mit der App interagieren, und können nach einer bestimmten Zeit automatisch aktualisiert werden. Wenn Sie noch nicht mit mobilen Anzeigen vertraut sind, ist das jetzt der erste Schritt.
Interstitial
Vollbildanzeigen, die die Benutzeroberfläche einer App abdecken, bis sie vom Nutzer geschlossen werden Sie eignen sich am besten für natürliche Pausen während der Ausführung einer App, z. B. zwischen Levels eines Spiels oder kurz nach dem Abschluss einer Aufgabe.
Interstitial-Anzeige implementieren
Nativ
Anpassbare Anzeigen, die zum Design Ihrer App passen. Sie entscheiden, wie und wo sie platziert werden. So haben Sie die Möglichkeit, das Layout optimal auf Ihre App abzustimmen.
Verfügbar
Anzeigen, in denen Nutzer für das Ansehen von kurzen Videos und die Interaktion mit spielbaren Anzeigen und Umfragen belohnt werden Geeignet für die Monetarisierung von kostenlosen Spielen.