Banner

Banneranzeigen nehmen eine Position im Layout einer App 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 adaptive Ankerbanneranzeigen einrichten. Bei verankerten adaptiven Bannern wird die Anzeigengröße für jedes Gerät anhand einer von Ihnen angegebenen Anzeigenbreite optimiert.

Adaptive Ankerbanner sind Anzeigen mit festem Seitenverhältnis und nicht mit fester Größe. Das Seitenverhältnis entspricht etwa 320 × 50. Sobald Sie die gesamte verfügbare Breite angegeben haben, gibt das Google Mobile Ads SDK eine Anzeige mit der optimalen Höhe für diese Breite zurück. Die optimale Höhe der Anzeige bleibt bei verschiedenen Anzeigenanfragen gleich und der Inhalt um die Anzeige herum bleibt beim Aktualisieren der Anzeige an seinem Platz.

Verwenden Sie immer Testanzeigen

Verwenden Sie beim Erstellen und Testen Ihrer Apps Testanzeigen anstelle von aktiven 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/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

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 vor der Veröffentlichung Ihrer App durch Ihre eigenen Anzeigenblock-IDs.

Anzeigengröße abrufen

So fordern Sie eine Banneranzeige mit der richtigen Anzeigengröße an:

  1. Mit MediaQuery.of(context) können Sie die Breite des Bildschirms des Geräts in dichteunabhängigen Pixeln (dp) abrufen. Wenn Sie nicht die volle Bildschirmbreite verwenden möchten, können Sie eine eigene Breite festlegen.

  2. Verwenden Sie die entsprechende statische Methode der Klasse AdSize, um ein AdSize-Objekt abzurufen. Mit AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) können Sie beispielsweise die Anzeigengröße für die aktuelle Ausrichtung abrufen.

// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
    MediaQuery.sizeOf(context).width.truncate());

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/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';

  /// Loads a banner ad.
  void loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      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();
  }
}

Mit BannerAdListener können Sie Lebenszyklus-Ereignisse erfassen, z. B. wenn eine Anzeige geladen wird. In diesem Beispiel werden alle Methoden implementiert und eine Nachricht wird in der Konsole protokolliert:

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/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';


  /// Loads a banner ad.
  void loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      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();
  }
}

Anzeige aktualisieren

Wenn Sie Ihren Anzeigenblock so konfiguriert haben, dass er aktualisiert wird, müssen Sie keine weitere Anzeige anfordern, wenn die Anzeige nicht geladen wird. Das Google Mobile Ads SDK berücksichtigt die Aktualisierungsrate, die Sie in der AdMob-Benutzeroberfläche angegeben haben. Wenn Sie die Aktualisierung nicht aktiviert haben, senden Sie eine neue Anfrage. Weitere Informationen zur Aktualisierung von Anzeigenblöcken, z. B. zum Festlegen einer Aktualisierungsrate, finden Sie unter Automatische Aktualisierung für Banneranzeigen verwenden.

Banneranzeige präsentieren

Wenn du eine BannerAd als Widget anzeigen möchtest, musst du nach dem Aufruf von load() eine AdWidget mit einer unterstützten Anzeige instanziieren. Sie können das Widget erstellen, bevor Sie load() aufrufen. load() muss jedoch aufgerufen werden, bevor es dem Widget-Baum hinzugefügt wird.

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 einer bestimmten Breite und Höhe platzieren. Andernfalls wird Ihre Anzeige möglicherweise nicht ausgeliefert. Ein BannerAd kann in einen Container mit einer Größe platziert werden, die der Anzeige entspricht:

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 gelöscht werden, wenn der Zugriff darauf nicht mehr erforderlich ist. Am besten wird dispose() aufgerufen, nachdem das AdWidget aus dem Widget-Baum entfernt wurde oder im BannerAdListener.onAdFailedToLoad()-Callback.

Fertig! In Ihrer App können jetzt Banneranzeigen ausgeliefert werden.

Scrolleinschränkung unter Android 9 und niedriger

Uns ist bewusst, dass auf einigen älteren oder weniger leistungsstarken Geräten mit Android 9 oder niedriger die Leistung beim Ausliefern von Inline-Banneranzeigen in scrollbaren Ansichten möglicherweise nicht optimal ist. Wir empfehlen, diese Bannertypen nur unter Android 10 oder höher zu verwenden. Banner mit fester Position wie verankerte Banner sind nicht betroffen und können auf allen Android API-Ebenen mit optimaler Leistung verwendet werden.

Vollständiges Beispiel auf GitHub

Ein vollständiges Beispiel für die auf dieser Seite beschriebene Bannerintegration finden Sie unter banner_example.

Weitere Informationen zu anderen Bannertypen

Machen Sie sich mit den anderen Arten von Bannern vertraut, die in diesem Abschnitt für Ihre Flutter-Anwendung definiert sind.

Adaptive Inline-Banner

Adaptive Inline-Banner haben eine variable Höhe und sind im Vergleich zu verankerten adaptiven Bannern größer und höher. Für Apps, in denen Banneranzeigen in scrollbaren Inhalten platziert werden, werden adaptive Inline-Banner anstelle von adaptiven Ankerbannern empfohlen. Weitere Informationen finden Sie unter Inline-adaptive Banner.

Minimierbare Banner

Minimierbare Banneranzeigen sind Banneranzeigen, die zuerst als größeres Overlay mit einer Schaltfläche angezeigt werden, über die die Anzeige auf eine kleinere Größe minimiert werden kann. Sie können dieses Banner verwenden, um die Leistung weiter zu optimieren. Weitere Informationen finden Sie unter Minimierbare Banneranzeigen.