Banneranzeigen einrichten

Banneranzeigen werden an einer bestimmten Stelle 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 mit verankerten adaptiven Banneranzeigen beginnen. Bei verankerten adaptiven Bannern wird die Anzeigengröße für jedes Gerät optimiert. Dazu wird eine von Ihnen angegebene Anzeigenbreite verwendet.

Verankerte adaptive Banneranzeigen haben ein festes Seitenverhältnis und keine feste Größe. Das Seitenverhältnis ist ähnlich wie bei 320 × 50. Sobald Sie die verfügbare Breite angeben, Google Mobile Ads Flutter Plugin gibt 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 an Ort und Stelle, wenn die Anzeige aktualisiert wird.

Immer mit Testanzeigen testen

Verwenden Sie beim Erstellen und Testen Ihrer Apps Testanzeigen anstelle von aktiven Anzeigen. Andernfalls kann Ihr Konto gesperrt werden.

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 bei jeder Anfrage Testanzeigen zurückgegeben werden. Sie können sie beim Programmieren, Testen und Debuggen in Ihren eigenen Apps verwenden. Ersetzen Sie sie jedoch 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:

Rufen Sie die Breite des Gerätebildschirms in dichteunabhängigen Pixeln (dp) mit MediaQuery.of(context) ab. Wenn Sie nicht die volle Bildschirmbreite verwenden möchten, können Sie eine eigene Breite festlegen.
Verwenden Sie die entsprechende statische Methode in 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(),
);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 eigene Anzeigenblock-ID.

Banneranzeigen-Ereignisse

Mit AdManagerBannerAdListener können Sie auf Lebenszyklusereignisse wie das Laden einer Anzeige warten. 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 so konfiguriert haben, dass er aktualisiert wird, müssen Sie keine weitere Anzeige anfordern, wenn das Laden der Anzeige fehlschlägt. Google Mobile Ads Flutter Plugin berücksichtigt jede Aktualisierungsrate die Sie in der Ad Manager-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 Aktualisierungsrate der Anzeigen in mobilen Apps.

Banneranzeige präsentieren

Wenn Sie eine AdManagerBannerAd als Widget präsentieren möchten, müssen Sie nach dem Aufruf von load() ein AdWidget mit einer unterstützten Anzeige instanziieren. Sie können das Widget vor dem Aufruf von load() erstellen, aber load() muss aufgerufen werden, bevor Sie es der Widget-Struktur hinzufügen.

AdWidget wird von der Widget-Klasse von Flutter abgeleitet und kann wie jedes andere Widget verwendet werden. Unter iOS müssen Sie das Widget in einem Widget mit einer bestimmten Breite und Höhe platzieren. Andernfalls wird Ihre Anzeige möglicherweise nicht präsentiert. Eine 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() ist entweder, nachdem das AdWidget aus der Widget-Struktur entfernt wurde, oder im Callback AdManagerBannerAdListener.onAdFailedToLoad().

Jetzt weißt du Bescheid. Ihre App ist jetzt bereit, Banneranzeigen zu präsentieren.

Einschränkung beim Scrollen unter Android 9 und niedriger

Wir wissen, dass bei einigen älteren oder weniger leistungsstarken Geräten mit Android 9 oder niedriger die Leistung bei der Präsentation von Inline-Banneranzeigen in scrollbaren Ansichten suboptimal sein kann. 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 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 verankerten adaptiven Bannern größer und höher. Adaptive Inline-Banner werden für Apps empfohlen, bei denen Banneranzeigen in scrollbaren Inhalten platziert werden. Weitere Informationen finden Sie unter Adaptive Inline-Banner.

Minimierbare Banner

Minimierbare Banneranzeigen werden zuerst als größeres Overlay mit einer Schaltfläche präsentiert, mit der die Anzeige auf eine kleinere Größe minimiert werden kann. Mit diesem Banner können Sie die Leistung weiter optimieren. Weitere Informationen finden Sie unter Minimierbare Banneranzeigen.