Banneranzeigen nehmen einen Platz im Layout einer App ein, entweder oben oder unten auf dem Gerätebildschirm. Sie bleiben auf dem Bildschirm, während die Nutzenden mit der App interagieren. und kann nach einer bestimmten Zeit automatisch aktualisiert werden.
In diesem Leitfaden erfahren Sie, wie Sie AdMob-Banneranzeigen Flutter App. Zusätzlich zu Code-Snippets und Anweisungen enthält sie über die richtige Größe von Bannern.
Immer mit Testanzeigen testen
Verwenden Sie beim Entwickeln und Testen Ihrer Apps nur Testanzeigen, Live-Produktionsanzeigen. Andernfalls kann Ihr Konto gesperrt werden.
Die einfachste Methode zum Laden von Testanzeigen ist die Verwendung unserer speziellen Test-Anzeigenblock-ID für Banner:
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. können Sie sie beim Programmieren, Testen und Debuggen in Ihren eigenen Apps verwenden. Ersetzen Sie sie jedoch vor dem Veröffentlichen Ihrer
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 x 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 überwachen, z. B.
wie beim Laden einer Anzeige. Dieses Beispiel implementiert jede Methode und protokolliert eine Nachricht
an die Konsole:
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
Zum Anzeigen eines BannerAd
als Widget müssen Sie eine AdWidget
instanziieren
mit einer unterstützten Anzeige nach dem Aufruf von load()
. Sie können das Widget vor dem
load()
wird aufgerufen, aber load()
muss aufgerufen werden, bevor es dem Widget hinzugefügt werden kann
Baum.
„AdWidget
“ wird von der Flutter-Klasse „Widget“ übernommen und kann wie jedes andere verwendet werden
Widget. Achten Sie unter iOS darauf, dass Sie das Widget in einem Widget mit einem bestimmten
Breite und Höhe festlegen. Andernfalls wird Ihre Anzeige möglicherweise nicht geschaltet. Ein BannerAd
kann in einem Container mit einer zur Anzeige passenden Größe platziert werden:
... 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
wann dispose()
aufgerufen werden soll, entweder nachdem AdWidget
aus dem
Widget-Baum oder in der BannerAdListener.onAdFailedToLoad()
Callback des Nutzers an.
Fertig! In Ihrer App können jetzt Banneranzeigen ausgeliefert werden.
Scrollbeschränkung unter Android 9 und niedriger
Uns ist bekannt, dass einige ältere oder weniger leistungsstarke Geräte mit Android 9 oder ist die Leistung möglicherweise suboptimal. wenn Inline-Banneranzeigen in scrollbaren Ansichten ausgeliefert werden. Wir empfehlen nur auf Geräten mit Android 10 oder höher verwenden. Fixierte Banner wie da verankerte Banner nicht betroffen sind und mit optimaler Leistung auf auf allen Android-API-Levels.