Banneranzeigen nehmen eine bestimmte Stelle 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 AdMob-Banneranzeigen in eine Flutter-App einbinden. Zusätzlich zu Code-Snippets und Anleitungen finden Sie hier auch Informationen zur richtigen Größe von Bannern.
Immer mit Testanzeigen testen
Verwenden Sie beim Entwickeln und Testen Ihrer Apps Testanzeigen und keine Produktionsanzeigen. Andernfalls kann Ihr Konto gesperrt werden.
Am einfachsten lassen sich Testanzeigen mit unserer Testanzeigenblock-ID für Banner laden:
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 jedoch vor dem Veröffentlichen Ihrer App durch Ihre Anzeigenblock-IDs.
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 Standard-Bannergrößen aufgeführt.
| Größe in dp (B x H) | Beschreibung | AdSize-Konstante |
|---|---|---|
| 320 x 50 | 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 × adaptive Höhe | Adaptives Banner | – |
Wenn Sie eine benutzerdefinierte Bannergröße definieren möchten, legen Sie die gewünschte AdSize fest:
final AdSize adSize = AdSize(300, 50);
Ereignisse für Banneranzeigen
Mit BannerAdListener können Sie Lebenszyklusereignisse beobachten, z. B. das Laden einer Anzeige. In diesem Beispiel werden die einzelnen Methoden 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
Damit BannerAd als Widget angezeigt werden kann, müssen Sie nach dem Aufrufen von load() eine AdWidget mit einer unterstützten Anzeige instanziieren. Sie können das Widget erstellen, bevor Sie load() aufrufen. load() muss jedoch aufgerufen werden, bevor es der Widget-Struktur hinzugefügt wird.
AdWidget wird von der Widget-Klasse von Flutter übernommen und kann wie jedes andere Widget verwendet werden. Unter iOS muss das Widget in einem Widget mit einer angegebenen Breite und Höhe platziert werden. Andernfalls wird Ihre Anzeige möglicherweise nicht geschaltet. Ein BannerAd kann in einem Container mit einer Größe platziert werden, die zur Anzeige passt:
...
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 erforderlich ist. Die Best Practice für den Aufruf von dispose() ist, entweder nachdem AdWidget aus der Widgetstruktur entfernt wurde oder der Callback BannerAdListener.onAdFailedToLoad() verwendet wird.
Fertig! In Ihrer App können jetzt Banneranzeigen ausgeliefert werden.
Scrollbeschränkung unter Android 9 und niedriger
Uns ist bewusst, dass einige ältere oder weniger leistungsstarke Geräte mit Android 9 oder niedriger möglicherweise eine suboptimale Leistung aufweisen, wenn Inline-Banneranzeigen in scrollbaren Ansichten ausgeliefert werden. Wir empfehlen, diese Bannertypen nur unter Android 10 oder höher zu verwenden. Banner mit festen Positionen, z. B. verankerte Banner, sind nicht betroffen und können mit optimaler Leistung auf allen Android API-Ebenen verwendet werden.