Banner

Plattform auswählen:Android iOS Unity Flutter

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 erfahren Sie, wie Sie adaptive Ankerbanneranzeigen verwenden. Bei verankerten adaptiven Bannern wird die Anzeigengröße für jedes Gerät anhand einer von Ihnen angegebenen Anzeigenbreite optimiert.

Adaptive Ankerbanneranzeigen haben ein festes Seitenverhältnis und keine feste Größe. Das Seitenverhältnis entspricht etwa 320 × 50. Wenn Sie die verfügbare Breite angeben, 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 konstant und der Inhalt um die Anzeige herum bleibt beim Aktualisieren der Anzeige an seinem Platz.

Immer Testanzeigen verwenden

Verwenden Sie beim Entwickeln und Testen Ihrer Apps Testanzeigen anstelle von Live-Anzeigen. Andernfalls kann es zu einer Kontosperrung kommen.

Am einfachsten lassen sich Testanzeigen mit unserer speziellen Testanzeigenblock-ID für Banner laden:

/21775744923/example/adaptive-banner

Die Testanzeigenblöcke sind so konfiguriert, dass für jede Anfrage Testanzeigen zurückgegeben werden. Sie können sie beim Programmieren, Testen und Debuggen in Ihren eigenen Apps verwenden. Denken Sie daran, sie vor der Veröffentlichung Ihrer App durch Ihre eigenen Anzeigenblock-IDs zu ersetzen.

Anzeigengröße abrufen

So fordern Sie ein Banner mit der richtigen Anzeigengröße an:

  1. Mit MediaQuery.of(context) können Sie die Breite des Gerätebildschirms 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. 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(),
);
main.dart

Anzeige laden

Im folgenden Beispiel wird eine Banneranzeige geladen:

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

  if (size == null) {
    // Unable to get width of anchored banner.
    return;
  }

  unawaited(BannerAd(
    adUnitId: "_adUnitId",
    request: const AdManagerAdRequest(),
    size: size,
    listener: BannerAdListener(
      onAdLoaded: (ad) {
        // Called when an ad is successfully received.
        debugPrint('Ad was loaded.');
        setState(() {
          _bannerAd = ad as BannerAd;
        });
      },
      onAdFailedToLoad: (ad, err) {
        // Called when an ad request failed.
        debugPrint('Ad failed to load with error: $err');
        ad.dispose();
      },
    ),
  ).load());
}
banner_ad_snippets.dart

Ersetzen Sie _adUnitId durch Ihre Anzeigenblock-ID.

Mit AdManagerBannerAdListener können Sie auf Lebenszyklus-Events reagieren, z. B. wenn eine Anzeige geladen wird. In diesem Beispiel wird jede Methode implementiert und eine Nachricht in der Konsole protokolliert:

onAdOpened: (Ad ad) {
  // Called when an ad opens an overlay that covers the screen.
  debugPrint("Ad was opened.");
},
onAdClosed: (Ad ad) {
  // Called when an ad removes an overlay that covers the screen.
  debugPrint("Ad was closed.");
},
onAdImpression: (Ad ad) {
  // Called when an impression occurs on the ad.
  debugPrint("Ad recorded an impression.");
},
onAdClicked: (Ad ad) {
  // Called when an a click event occurs on the ad.
  debugPrint("Ad was clicked.");
},
onAdWillDismissScreen: (Ad ad) {
  // iOS only. Called before dismissing a full screen view.
  debugPrint("Ad will be dismissed.");
},
main.dart

Anzeige aktualisieren

Wenn Sie Ihren Anzeigenblock für die Aktualisierung konfiguriert haben, müssen Sie keine weitere Anzeige anfordern, wenn die Anzeige nicht geladen wird. Das Google Mobile Ads SDK berücksichtigt jede Aktualisierungsrate, die Sie in der Ad Manager-Benutzeroberfläche angegeben haben. Wenn Sie die Aktualisierung nicht aktiviert haben, stellen Sie eine neue Anfrage. Weitere Informationen zur Aktualisierung von Anzeigenblöcken, z. B. zum Festlegen einer Aktualisierungsrate, finden Sie unter Aktualisierungsrate der Anzeigen in mobilen Apps.

Banneranzeige präsentieren

Wenn Sie eine AdManagerBannerAd als Widget anzeigen möchten, müssen Sie eine AdWidget mit einer unterstützten Anzeige instanziieren, nachdem Sie load() aufgerufen haben. Sie können das Widget erstellen, bevor Sie load() aufrufen. load() muss jedoch aufgerufen werden, bevor Sie es dem Widget-Baum hinzufügen.

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 AdManagerBannerAd kann in einem 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!),
      ),
    ),
  ),
main.dart

Eine Anzeige muss verworfen werden, wenn der Zugriff darauf nicht mehr erforderlich ist. Die Best Practice für den Aufruf von dispose() besteht darin, ihn entweder nach dem Entfernen von AdWidget aus dem Widget-Baum oder im Callback AdManagerBannerAdListener.onAdFailedToLoad() aufzurufen.

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

Einschränkung beim Scrollen unter Android 9 und niedriger

Wir wissen, dass bei einigen älteren oder weniger leistungsstarken Geräten mit Android 9 oder älter die Leistung möglicherweise nicht optimal ist, wenn Inline-Banneranzeigen in scrollenden Ansichten dargestellt werden. Wir empfehlen, diese Arten von Bannern nur unter Android 10 oder höher zu verwenden. Banner mit fester Position wie verankerte Banner sind davon nicht betroffen und können mit optimaler Leistung auf allen Android-API-Ebenen verwendet werden.

Weitere Informationen zu anderen Bannertypen

Machen Sie sich mit 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 größer und höher als adaptive Ankerbanner. Adaptive Inline-Banner werden für Apps, in denen Banneranzeigen in scrollbaren Inhalten platziert werden, gegenüber adaptiven Ankerbannern empfohlen. Weitere Informationen finden Sie unter Inline-Adaptive Banner.

Minimierbare Banner

Minimierbare Banneranzeigen werden zuerst als größeres Overlay mit einer Schaltfläche zum Minimieren der Anzeige auf eine kleinere Größe präsentiert. Sie können dieses Banner verwenden, um die Leistung weiter zu optimieren. Weitere Informationen finden Sie unter Minimierbare Banneranzeigen.