Banneranzeigen einrichten

Plattform auswählen: Android iOS Unity Flutter Android (Legacy)

Banneranzeigen werden im Layout einer App platziert, entweder oben oder unten auf dem Bildschirm. 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 Ankerbanneranzeigen haben ein festes Seitenverhältnis und keine feste Größe. Das Seitenverhältnis ist ähnlich wie bei 320 × 50. Wenn Sie die verfügbare volle Breite angeben, wird mit Google Mobile Ads Flutter Plugin eine Anzeige mit der optimalen Höhe für diese Breite zurückgegeben. 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 Ort und Stelle.

Immer mit Testanzeigen testen

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

Testanzeigen lassen sich am einfachsten mit unserer speziellen Test-Anzeigenblock-ID für Banner laden:

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

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. Sie müssen sie nur durch Ihre eigenen Anzeigenblock-IDs ersetzen, bevor Sie Ihre App veröffentlichen.

Anzeigengröße abrufen

Große adaptive Banner sind ein größeres Format, das für Layouts ohne Scrollfunktion entwickelt wurde. Im Vergleich zu standardmäßigen adaptiven Ankerbannern haben diese Banner eine größere maximale Höhe (bis zu 20% der Bildschirmhöhe, zwischen 50 und 150 dp). Dieser zusätzliche Speicherplatz ist für Videoinhalte optimiert.

So fordern Sie eine Banneranzeige 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 in der Klasse AdSize, um ein AdSize-Objekt abzurufen. Verwenden Sie beispielsweise AdSize.getLargeAnchoredAdaptiveBannerAdSize(int width), um die Anzeigengröße für die aktuelle Ausrichtung abzurufen.

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

Anzeige laden

Im folgenden Beispiel wird eine Banneranzeige geladen:

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

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

  unawaited(
    BannerAd(
      adUnitId: "_adUnitId",
      request: const AdRequest(),
      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(),
  );
}

Ersetzen Sie _adUnitId durch Ihre Anzeigenblock-ID.

Mit BannerAdListener können Sie auf Lebenszyklusereignisse wie das Laden einer Anzeige reagieren. In diesem Beispiel wird jede Methode implementiert und eine Meldung 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 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.');
},

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. Google Mobile Ads Flutter Plugin berücksichtigt alle Aktualisierungsraten, die Sie auf 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 einblenden

Wenn Sie eine BannerAd 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 vor dem Aufrufen von load() erstellen, aber load() muss aufgerufen werden, bevor Sie es dem Widgetbaum 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 BannerAd 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!),
      ),
    ),
  ),

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

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

Einschränkung beim Scrollen unter Android 9 und niedriger

Wir wissen, dass einige ältere oder weniger leistungsstarke Geräte mit Android 9 oder niedriger bei der Darstellung von Inline-Banneranzeigen in scrollenden Ansichten möglicherweise eine suboptimale Leistung aufweisen. Wir empfehlen, diese Arten von Bannern nur unter Android 10 oder höher zu verwenden. Banner mit fester Position wie Ankerbanner sind davon nicht betroffen und können mit optimaler Leistung auf allen Android-API-Ebenen verwendet werden.

Vollständiges Beispiel auf GitHub

Das vollständige Beispiel finden Sie in der API-Demo.

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 verankerte adaptive Banner. 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 Adaptive Inline-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.