Dieser Leitfaden richtet sich an Publisher, die eine Flutter-App monetarisieren möchten.
Wenn Sie das Google Mobile Ads SDK in eine Flutter-App einbinden, wie Sie es hier tun, ist das der erste Schritt, um AdMob-Anzeigen zu schalten und Einnahmen 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 Anzeigen Banner-, Interstitial- (Vollbildanzeigen), native Anzeigen und Anzeigen mit Prämie.
Vorbereitung
- Flutter 1.22.0 oder höher
- Android
- Android Studio 3.2 oder höher
- Ausrichtung auf Android API-Level 20 oder höher
- Legen Sie
compileSdkVersion
auf 28 oder höher fest.
- iOS
- Neueste Version von Xcode mit aktivierter Befehlszeile Tools
- Empfehlung: Erstellen Sie ein AdMob-Konto. Konto und ein Android-Gerät registrieren und/oder iOS-App
Mobile Ads SDK importieren
- Binden Sie das Google Mobile Ads SDK für Flutter ein. Plug-in in Ihrem Flutter- Projekt arbeiten.
Plattformspezifische Einrichtung
Android
AndroidManifest.xml aktualisieren
Die AdMob-App-ID muss in der AndroidManifest.xml
enthalten sein. Fehler bei
führt das zu einem Absturz beim Start der App.
Fügen Sie die AdMob-App-ID hinzu, die im AdMob-Web-
android/app/src/main/AndroidManifest.xml
-Datei, indem Sie ein <meta-data>
-Tag hinzufügen
mit dem Namen com.google.android.gms.ads.APPLICATION_ID
. Geben Sie für android:value
Ihre eigene AdMob-App-ID in Anführungszeichen ein, wie hier gezeigt:
<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 dasselbe value
, wenn Sie das Plug-in in Ihrem Dart-Code initialisieren.
Weitere Informationen finden Sie in der Android-
für weitere Informationen
Informationen zum Konfigurieren von AndroidManifest.xml
und Einrichten der App
ID.
iOS
Info.plist aktualisieren
Fügen Sie der Datei ios/Runner/Info.plist
Ihrer App den Schlüssel GADApplicationIdentifier
mit dem Stringwert Ihrer AdMob-App-ID hinzu, wie sie in der AdMob-Weboberfläche angezeigt wird:
<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
Bitten Sie Ihre App, das Mobile Ads SDK zu initialisieren, bevor Anzeigen geladen werden. Rufen Sie dazu
MobileAds.instance.initialize()
initialisiert das SDK und gibt einen
Future
, die nach Abschluss der Initialisierung oder nach 30 Sekunden abgeschlossen ist
Timeout festlegen. Dies muss nur einmal erfolgen, idealerweise direkt vor dem Ausführen 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
Nachdem das Mobile Ads SDK importiert wurde, können Sie eine Anzeige implementieren. AdMob verschiedene Anzeigenformate, sodass Sie dasjenige auswählen können, das am besten zur User Experience Ihrer App passt.
Banner
Rechteckige Anzeigen, die oben oder unten auf dem Display des Geräts eingeblendet werden. Banneranzeige bleiben die Anzeigen auf dem Bildschirm, während die Nutzer mit der App interagieren, und können aktualisiert werden. nach einer gewissen Zeit automatisch aktiviert. Wenn Sie noch keine Erfahrung mit mobiler Werbung haben, sind sie ein guter Ausgangspunkt.
Interstitial
Vollbildanzeigen, die die Benutzeroberfläche einer App verdecken, bis sie vom Nutzer geschlossen werden. Sie werden am besten bei natürlichen Pausen während der Ausführung einer App eingesetzt, z. B. zwischen Leveln eines Spiels oder direkt nach Erledigung einer Aufgabe.
Interstitial-Anzeige implementieren
Nativ
Anpassbare Anzeigen, die an das Design Ihrer App angepasst werden Sie entscheiden, wie und wo sie platziert werden, damit das Layout besser zum Design Ihrer App passt.
Verfügbar
Anzeigenformat, bei dem Nutzer, die sich kurze Videos ansehen oder mit spielbaren Anzeigen oder Umfragen interagieren, mit Prämien belohnt werden. Gut zur Monetarisierung von Free-to-play-Nutzern geeignet.