Banner

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.

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.