Banneranzeigen nehmen im Layout einer App einen Platz ein, entweder oben oder unten auf dem Bildschirm des Geräts. 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 Ad Manager-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.
Am einfachsten lassen sich Testanzeigen laden, wenn Sie die spezielle Test-Anzeigenblock-ID für Banner verwenden:
/21775744923/example/adaptive-banner
Die Testanzeigenblöcke sind so konfiguriert, dass bei jeder Anfrage Testanzeigen zurückgegeben werden. Sie können sie in Ihren eigenen Apps verwenden, während Sie Code schreiben, testen und debuggen. Ersetzen Sie sie jedoch vor dem Veröffentlichen Ihrer
Anzeige laden
Im folgenden Beispiel wird eine Banneranzeige instanziiert:
class BannerExampleState extends State<BannerExample> { AdManagerBannerAd? _bannerAd; bool _isLoaded = false; // TODO: replace this test ad unit with your own ad unit. final adUnitId = '/21775744923/example/adaptive-banner'; /// Loads a banner ad. void loadAd() { _bannerAd = AdManagerBannerAd( adUnitId: adUnitId, request: const AdManagerAdRequest(), size: AdSize.banner, listener: AdManagerBannerAdListener( // 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('AdManagerBannerAd 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 (BxH) | 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 AdManagerBannerAdListener
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> { AdManagerBannerAd? _bannerAd; bool _isLoaded = false; // TODO: replace this test ad unit with your own ad unit. final adUnitId = '/21775744923/example/adaptive-banner'; /// Loads a banner ad. void loadAd() { _bannerAd = AdManagerBannerAd( adUnitId: adUnitId, request: const AdManagerAdRequest(), size: AdSize.banner, listener: AdManagerBannerAdListener( // 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('AdManagerBannerAd 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 AdManagerBannerAd
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 aus der Widget-Klasse von Flutter übernommen und kann wie jedes andere verwendet werden
Widget. Achten Sie unter iOS darauf, dass Sie das Widget in einem Widget mit einer bestimmten Breite und Höhe platzieren. Andernfalls wird Ihre Anzeige möglicherweise nicht geschaltet. Ein AdManagerBannerAd
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 AdManagerBannerAdListener.onAdFailedToLoad()
Callback des Nutzers an.
Fertig! In Ihrer App können jetzt Banneranzeigen ausgeliefert werden.
Scrolleinschrä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, diese Bannertypen nur unter Android 10 oder höher zu verwenden. Fixierte Banner wie da verankerte Banner nicht betroffen sind und mit optimaler Leistung auf auf allen Android-API-Levels.