Banneranzeigen einrichten

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

Banneranzeigen belegen einen Platz im Layout einer App, 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 finden Sie Informationen zu adaptiven Ankerbannern. Bei adaptiven Ankerbannern wird die Anzeigengröße für jedes Gerät anhand einer von Ihnen angegebenen Anzeigenbreite optimiert.

Adaptive Ankerbanneranzeigen sind Anzeigen mit festem Seitenverhältnis und nicht mit fester Größe. Das Seitenverhältnis ähnelt dem von 320 × 50. Sobald Sie die gesamte verfügbare Breite angegeben haben, gibt Google Mobile Ads Flutter Plugin eine Anzeige mit der optimalen Höhe für diese Breite zurück. Die optimale Höhe der 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 Erstellen und Testen Ihrer Apps Testanzeigen anstelle von Live-Anzeigen. Andernfalls kann es zu einer Sperrung Ihres Kontos kommen.

Testanzeigen lassen sich am einfachsten mit unserer speziellen Test-Anzeigenblock-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 in Ihren eigenen Apps beim Programmieren, Testen und Debuggen verwenden. Ersetzen Sie sie durch Ihre eigenen Anzeigenblock-IDs, bevor Sie Ihre App veröffentlichen.

Anzeigengröße abrufen

Große adaptive Banner bieten ein größeres Format, das für Layouts ohne Scrollen konzipiert ist. Im Vergleich zu standardmäßigen adaptiven Ankerbannern ermöglichen diese Banner eine größere maximale Höhe (bis zu 20% der Bildschirmhöhe, zwischen 50 und 150 dp). Dieser größere Bereich ist für Videoinhalte optimiert.

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

  1. Rufe die Breite des Gerätebildschirms in dichteunabhängigen Pixeln (dp) mit MediaQuery.of(context) ab. Wenn Sie nicht die gesamte 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.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 _loadAdManagerBannerAd() 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 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(),
  );
}

Ersetzen Sie _adUnitId durch Ihre Anzeigenblock-ID.

Mit AdManagerBannerAdListener können Sie Lifecycle-Events beobachten, 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 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 so konfiguriert haben, dass er aktualisiert wird, müssen Sie keine weitere Anzeige anfordern, wenn die Anzeige nicht geladen werden kann. Google Mobile Ads Flutter Plugin berücksichtigt alle Aktualisierungsraten, 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 einblenden

Wenn Sie eine AdManagerBannerAd als Widget anzeigen möchten, müssen Sie 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 Sie es dem Widget-Baum hinzufügen.

AdWidget übernimmt die Eigenschaften 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. Eine AdManagerBannerAd kann in einem Container platziert werden, dessen Größe 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 entweder nach dem Entfernen von AdWidget aus dem Widget-Baum oder im Callback AdManagerBannerAdListener.onAdFailedToLoad().

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

Einschränkung beim Scrollen unter Android 9 und niedriger

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

Weitere Bannertypen

Machen Sie sich mit anderen Bannertypen 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 adaptiven Ankerbannern größer und höher. 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 sind Banneranzeigen, die zuerst als größeres Overlay mit einer Schaltfläche zum Minimieren der Anzeige auf eine kleinere Größe dargestellt werden. Sie können dieses Banner verwenden, um die Leistung weiter zu optimieren. Weitere Informationen finden Sie unter Minimierbare Banneranzeigen.