Diese Seite wurde von der Cloud Translation API übersetzt.

Banner

Banneranzeigen werden im Layout einer App platziert, 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 erhalten Sie eine Einführung in verankerte adaptive Banneranzeigen. 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. Nachdem Sie die volle 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 für die Anzeige bleibt bei verschiedenen Anzeigenanfragen gleich und der Content, der die Anzeige umgibt, bleibt an Ort und Stelle, wenn die Anzeige aktualisiert wird.

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:

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.
Verwenden Sie die entsprechende statische Methode der Klasse AdSize, um ein AdSize-Objekt abzurufen. Verwenden Sie beispielsweise AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width), um die Anzeigengröße für die aktuelle Ausrichtung abzurufen.

// 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();
  }
}

Ereignisse für Banneranzeigen

Mit BannerAdListener können Sie Lebenszyklusereignisse beobachten, z. B. das Laden einer Anzeige. 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();
  }
}

Banneranzeige einblenden

Damit BannerAd als Widget angezeigt werden kann, müssen Sie nach dem Aufrufen 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 der Widget-Struktur hinzugefügt wird.

AdWidget erbt von der Widget-Klasse von Flutter und kann wie jedes andere Widget verwendet werden. Achten Sie unter iOS darauf, das Widget in einem Widget mit einer bestimmten Breite und Höhe zu 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 entsorgt werden, wenn kein Zugriff mehr darauf 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.

Einschränkung beim Scrollen 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.