Banneranzeigen nehmen einen Platz im Layout einer App ein, entweder oben oder unten auf dem Gerätebildschirm. Sie bleiben auf dem Bildschirm, während Nutzer mit der App interagieren, und können nach einer bestimmten Zeit automatisch aktualisiert werden.
In diesem Leitfaden erfahren Sie, wie Sie Banneranzeigen aus AdMob in eine Flutter-App einbinden. Zusätzlich zu Code-Snippets und Anleitungen enthält sie auch Informationen zur richtigen Größenanpassung von Bannern.
Immer mit Testanzeigen testen
Verwenden Sie beim Erstellen und Testen Ihrer Apps Testanzeigen anstelle von Produktionsanzeigen. Andernfalls kann dein Konto gesperrt werden.
Am einfachsten laden Sie Testanzeigen, indem Sie unsere spezielle Test-Anzeigenblock-ID für Banner verwenden:
Android
ca-app-pub-3940256099942544/6300978111
iOS
ca-app-pub-3940256099942544/2934735716
Die Testanzeigenblöcke sind so konfiguriert, dass bei jeder Anfrage Testanzeigen zurückgegeben werden. Sie können sie beim Programmieren, Testen und Debuggen in Ihren eigenen Apps verwenden. Ersetzen Sie sie einfach durch Ihre eigenen Anzeigenblock-IDs, bevor Sie Ihre App veröffentlichen.
Anzeige laden
Im folgenden Beispiel wird eine Banneranzeige instanziiert:
class BannerExampleState extends State<BannerExample> {
BannerAd? _bannerAd;
bool _isLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final adUnitId = Platform.isAndroid
? 'ca-app-pub-3940256099942544/6300978111'
: 'ca-app-pub-3940256099942544/2934735716';
/// Loads a banner ad.
void loadAd() {
_bannerAd = BannerAd(
adUnitId: adUnitId,
request: const AdRequest(),
size: AdSize.banner,
listener: BannerAdListener(
// Called when an ad is successfully received.
onAdLoaded: (ad) {
debugPrint('$ad loaded.');
setState(() {
_isLoaded = true;
});
},
// Called when an ad request failed.
onAdFailedToLoad: (ad, err) {
debugPrint('BannerAd failed to load: $error');
// Dispose the ad here to free resources.
ad.dispose();
},
),
)..load();
}
}
Bannergrößen
In der folgenden Tabelle sind die Standardbannergrößen aufgeführt.
| Größe in dp (B x H) | Beschreibung | AdSize-Konstante |
|---|---|---|
| 320x50 | Normale Banner- | banner
|
| 320 × 100 | Großes Banner | largeBanner
|
| 320 × 250 | Medium Rectangle | mediumRectangle
|
| 468 × 60 | Full-Size Banner | fullBanner
|
| 728 x 90 | Leaderboard (Bestenliste) | leaderboard
|
| Angegebene Breite x adaptive Höhe | Adaptives Banner | – |
Um eine benutzerdefinierte Bannergröße festzulegen, legen Sie Ihre bevorzugte AdSize fest:
final AdSize adSize = AdSize(300, 50);
Ereignisse für Banneranzeigen
Mit BannerAdListener können Sie auf Lebenszyklusereignisse wie das Laden einer Anzeige warten. In diesem Beispiel wird jede Methode implementiert und eine Meldung in der Console protokolliert:
class BannerExampleState extends State<BannerExample> {
BannerAd? _bannerAd;
bool _isLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final adUnitId = Platform.isAndroid
? 'ca-app-pub-3940256099942544/6300978111'
: 'ca-app-pub-3940256099942544/2934735716';
/// Loads a banner ad.
void loadAd() {
_bannerAd = BannerAd(
adUnitId: adUnitId,
request: const AdRequest(),
size: AdSize.banner,
listener: BannerAdListener(
// Called when an ad is successfully received.
onAdLoaded: (ad) {
debugPrint('$ad loaded.');
setState(() {
_isLoaded = true;
});
},
// Called when an ad request failed.
onAdFailedToLoad: (ad, err) {
debugPrint('BannerAd failed to load: $error');
// Dispose the ad here to free resources.
ad.dispose();
},
// Called when an ad opens an overlay that covers the screen.
onAdOpened: (Ad ad) {},
// Called when an ad removes an overlay that covers the screen.
onAdClosed: (Ad ad) {},
// Called when an impression occurs on the ad.
onAdImpression: (Ad ad) {},
),
)..load();
}
}
Banneranzeige einblenden
Um ein BannerAd als Widget anzuzeigen, müssen Sie nach dem Aufrufen von load() ein AdWidget mit einer unterstützten Anzeige instanziieren. Sie können das Widget vor dem load()-Aufruf erstellen, aber load() muss aufgerufen werden, bevor es zur Widget-Struktur hinzugefügt wird.
AdWidget übernimmt die Widget-Klasse von Flutter und kann wie jedes andere Widget verwendet werden. Platzieren Sie auf iOS-Geräten das Widget in einem Widget mit der angegebenen Breite und Höhe. Andernfalls wird Ihre Anzeige möglicherweise nicht geschaltet. Ein BannerAd kann in einem Container mit einer Größe platziert werden, die der Anzeige entspricht:
...
if (_bannerAd != null) {
Align(
alignment: Alignment.bottomCenter,
child: SafeArea(
child: SizedBox(
width: _bannerAd!.size.width.toDouble(),
height: _bannerAd!.size.height.toDouble(),
child: AdWidget(ad: _bannerAd!),
),
),
)
}
...
Eine Anzeige muss entsorgt werden, wenn kein Zugriff mehr darauf benötigt wird. Die Best Practice für den Aufruf von dispose() besteht entweder nach dem Entfernen von AdWidget aus der Widgetstruktur oder aus dem BannerAdListener.onAdFailedToLoad()-Callback.
Fertig! In Ihrer App können jetzt Banneranzeigen ausgeliefert werden.
Begrenzung beim Scrollen unter Android 9 und niedriger
Uns ist bewusst, dass einige ältere oder weniger leistungsstarke Geräte mit Android 9 oder niedriger möglicherweise eine unoptimale Leistung bei der Auslieferung von Inline-Banneranzeigen in scrollbaren Ansichten aufweisen. Wir empfehlen, diese Bannertypen nur unter Android 10 oder höher zu verwenden. Banner mit fester Position, wie verankerte Banner, sind davon nicht betroffen und können mit optimaler Leistung auf allen Android API-Ebenen verwendet werden.