Banner

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.

Am einfachsten lassen sich Testanzeigen laden, wenn Sie die 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 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> {
  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();
  }
}

In der folgenden Tabelle sind die Standardbannergröß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);

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

Wenn du ein BannerAd als Widget anzeigen möchtest, musst du nach dem Aufruf von load() ein AdWidget mit einer unterstützten Anzeige instanziieren. 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 erbt von der Widget-Klasse von Flutter und kann wie jedes andere Widget verwendet werden. 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.

Vollständiges Beispiel auf GitHub

Banner