Banner

Banneranzeigen nehmen eine bestimmte Stelle im Layout einer App ein, entweder oben oder unten auf dem Gerätebildschirm. 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. 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 der Anzeige bleibt bei verschiedenen Anzeigenanfragen gleich und die Inhalte um die Anzeige herum bleiben beim Aktualisieren der Anzeige an Ort und Stelle.

Immer mit Testanzeigen testen

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:

/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 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 für die 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>{
  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() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

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

Mit AdManagerBannerAdListener 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> {
  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() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: size,
      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 präsentieren

Wenn du eine AdManagerBannerAd 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 der Widget-Struktur hinzugefügt wird.

AdWidget erbt von der Widget-Klasse von Flutter und kann wie jedes andere Widget verwendet werden. Unter iOS muss das Widget in einem Widget mit einer angegebenen Breite und Höhe platziert werden. Andernfalls wird Ihre Anzeige möglicherweise nicht ausgeliefert. Ein AdManagerBannerAd 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. Die Best Practice für den Aufruf von dispose() ist, entweder nachdem AdWidget aus der Widgetstruktur oder im AdManagerBannerAdListener.onAdFailedToLoad()-Callback entfernt wurde.

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.

Weitere Informationen zu anderen Bannertypen

Machen Sie sich mit den anderen in diesem Abschnitt beschriebenen Bannertypen für Ihre Flutter-Anwendung vertraut.

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.