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 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.

Die einfachste Methode zum Laden von Testanzeigen ist die Verwendung unserer speziellen Test-Anzeigenblock-ID für Banner:

  • /6499/example/banner

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> {
  AdManagerBannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/6499/example/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();
  }
}

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 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 = '/6499/example/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 einem bestimmten Breite und Höhe festlegen. 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.

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 davon nicht betroffen sind und mit optimaler Leistung auf auf allen Android-API-Levels.