Diese Seite wurde von der Cloud Translation API übersetzt.

Adaptive Ankerbanner

Adaptive Banner sind die nächste Generation responsiver Anzeigen. Die Anzeigengröße wird an das jeweilige Gerät angepasst, um die bestmögliche Leistung zu erzielen. Anders als bei Smart-Bannern, die eine feste Höhe haben, können Entwickler bei adaptiven Bannern die Anzeigenbreite festlegen. Auf dieser Grundlage wird dann die optimale Anzeigengröße ermittelt.

Dazu werden bei adaptiven Bannern feste Seitenverhältnisse anstatt fester Höhen verwendet. Die präsentierten Banneranzeigen nehmen also unabhängig von Bildschirmgröße und Gerät immer einen vergleichbaren Teil des Bildschirms ein. Daraus ergeben sich Möglichkeiten zur Leistungsoptimierung.

Adaptive Banner haben für ein bestimmtes Gerät und eine bestimmte Breite immer eine feste Größe. Nachdem Sie Ihr Layout auf einem bestimmten Gerät getestet haben, können Sie sicher sein, dass sich die Anzeigengröße nicht ändert. Die Größe des Banner-Creatives kann sich jedoch je nach Gerät ändern. Deshalb sollten Abweichungen bei der Anzeigenhöhe in Ihrem Layout berücksichtigt werden. In seltenen Fällen wird die volle adaptive Größe möglicherweise nicht ausgenutzt und stattdessen wird ein Creative in Standardgröße in diesem Slot zentriert.

Vorbereitung

Folgen Sie der Anleitung im Startleitfaden unter Mobile Ads Flutter-Plug-in importieren.

Wann Sie adaptive Banner verwenden sollten

Adaptive Banner sind ein direkter Ersatz für die branchenübliche Bannergröße 320 x 50 und das Smart-Banner-Format, das sie ersetzen.

Diese Bannergrößen werden häufig als verankerte Banner verwendet, die normalerweise oben oder unten auf dem Bildschirm fixiert sind.

Bei solchen verankerten Bannern ähnelt das Seitenverhältnis bei Verwendung adaptiver Banner dem einer Standardanzeige mit einer Größe von 320 × 50, wie in den drei Beispielen unten zu sehen ist:

Banner (320 x 50)

Adaptives Banner

Smart-Banner

Das adaptive Banner nutzt die verfügbare Bildschirmgröße besser aus. Außerdem sind adaptive Banner aus folgenden Gründen besser geeignet als Smart-Banner:

Es wird die von Ihnen angegebene Breite verwendet, anstatt die Breite auf Vollbild zu setzen. So können Sie den sicheren Bereich auf iOS-Geräten berücksichtigen und Ausschnitte auf Android-Geräten anzeigen.
Es wird eine optimale Höhe für das jeweilige Gerät ausgewählt, anstatt eine konstante Höhe für Geräte unterschiedlicher Größe zu verwenden. So werden die Auswirkungen der Gerätefragmentierung minimiert.

Implementierungshinweise

Beachten Sie bei der Implementierung adaptiver Banner in Ihrer App Folgendes:

Sie müssen die Breite der Ansicht kennen, in der die Anzeige platziert wird. Dabei sollten die Breite des Geräts sowie eventuelle sichere Bereiche oder Aussparungen berücksichtigt werden.
Der Hintergrund des Anzeigenaufrufs muss undurchsichtig sein, damit er den AdMob-Richtlinien entspricht, wenn Anzeigen kleinerer Größen ausgeliefert werden, die den Anzeigenblock nicht ausfüllen.
Verwenden Sie die neueste Version des Google Mobile Ads Flutter-Plug-ins.
Die adaptiven Bannergrößen funktionieren am besten, wenn die gesamte verfügbare Breite genutzt wird. In den meisten Fällen entspricht das der vollen Breite des Bildschirms des verwendeten Geräts. Berücksichtigen Sie dabei die geltenden Sicherheitszonen.
Mit dem Google Mobile Ads SDK wird die Größe des Banners so angepasst, dass die Anzeigenhöhe für die angegebene Breite optimiert wird, wenn die adaptiven AdSize APIs verwendet werden.
Es gibt zwei Methoden, um eine Anzeigengröße für adaptive Anzeigen abzurufen: Mit AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) können Sie eine bestimmte Ausrichtung anfordern und mit AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) die aktuelle Ausrichtung zum Zeitpunkt der Ausführung.
Die Größe, die für eine bestimmte Breite auf einem bestimmten Gerät zurückgegeben wird, ist immer gleich. Wenn Sie Ihr Layout also auf einem bestimmten Gerät getestet haben, können Sie sich darauf verlassen, dass sich die Anzeigengröße nicht ändert.
Die Höhe des verankerten Banners ist nie größer als 15 % der Gerätehöhe oder 90 dichteunabhängige Pixel und nie kleiner als 50 dichteunabhängige Pixel.

Kurzanleitung

Führen Sie die folgenden Schritte aus, um ein einfaches verankertes adaptives Banner zu implementieren.

Anzeigengröße für adaptive Banner abrufen Die ermittelte Größe wird für die Anfrage Ihres adaptiven Banners verwendet. Damit die adaptive Anzeigengröße verwendet werden kann, müssen folgende Voraussetzungen erfüllt sein:
1. Rufen Sie die Breite des verwendeten Geräts in dichteunabhängigen Pixeln ab oder legen Sie eine eigene Breite fest, wenn Sie nicht die volle Breite des Bildschirms nutzen möchten. Mit MediaQuery.of(context) können Sie die Bildschirmbreite ermitteln.
2. Verwenden Sie die entsprechenden statischen Methoden für die Anzeigengrößenklasse, z. B. AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width), um ein adaptives AdSize-Objekt für die aktuelle Ausrichtung abzurufen.
Erstellen Sie ein BannerAd-Objekt mit der Anzeigenblock-ID, der adaptiven Anzeigengröße und einem Anzeigenanfrageobjekt.
Laden Sie die Anzeige wie eine normale Banneranzeige und präsentieren Sie sie wie eine normale Anzeigenansicht über einen AdWidget.

Codebeispiel

Hier ein Beispiel für ein Widget, in dem ein verankertes adaptives Banner geladen wird, das der Breite des Bildschirms entspricht:

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

/// This example demonstrates anchored adaptive banner ads.
class AnchoredAdaptiveExample extends StatefulWidget {
  @override
  _AnchoredAdaptiveExampleState createState() =>
      _AnchoredAdaptiveExampleState();
}

class _AnchoredAdaptiveExampleState extends State<AnchoredAdaptiveExample> {
  BannerAd? _anchoredAdaptiveAd;
  bool _isLoaded = false;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _loadAd();
  }

  Future<void> _loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final AnchoredAdaptiveBannerAdSize? size =
        await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
            MediaQuery.of(context).size.width.truncate());

    if (size == null) {
      print('Unable to get height of anchored banner.');
      return;
    }

    _anchoredAdaptiveAd = BannerAd(
      // TODO: replace these test ad units with your own ad unit.
      adUnitId: Platform.isAndroid
          ? 'ca-app-pub-3940256099942544/6300978111'
          : 'ca-app-pub-3940256099942544/2934735716',
      size: size,
      request: AdRequest(),
      listener: BannerAdListener(
        onAdLoaded: (Ad ad) {
          print('$ad loaded: ${ad.responseInfo}');
          setState(() {
            // When the ad is loaded, get the ad size and use it to set
            // the height of the ad container.
            _anchoredAdaptiveAd = ad as BannerAd;
            _isLoaded = true;
          });
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('Anchored adaptive banner failedToLoad: $error');
          ad.dispose();
        },
      ),
    );
    return _anchoredAdaptiveAd!.load();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('Anchored adaptive banner example'),
        ),
        body: Center(
          child: Stack(
            alignment: AlignmentDirectional.bottomCenter,
            children: <Widget>[
              ListView.separated(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  itemBuilder: (context, index) {
                    return Text(
                      'Placeholder text',
                      style: TextStyle(fontSize: 24),
                    );
                  },
                  separatorBuilder: (context, index) {
                    return Container(height: 40);
                  },
                  itemCount: 20),
              if (_anchoredAdaptiveAd != null && _isLoaded)
                Container(
                  color: Colors.green,
                  width: _anchoredAdaptiveAd!.size.width.toDouble(),
                  height: _anchoredAdaptiveAd!.size.height.toDouble(),
                  child: AdWidget(ad: _anchoredAdaptiveAd!),
                )
            ],
          ),
        ),
      );

  @override
  void dispose() {
    super.dispose();
    _anchoredAdaptiveAd?.dispose();
  }
}

Hier wird die Funktion AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize verwendet, um die Größe eines Banners an einer verankerten Position für die aktuelle Benutzeroberflächenausrichtung abzurufen. Wenn ein verankertes Banner in einer bestimmten Ausrichtung vorab geladen werden soll, verwenden Sie AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) und übergeben Sie die gewünschte Ausrichtung.

Vollständiges Beispiel auf GitHub

Das vollständige Beispiel finden Sie im GitHub-Repository Banner Example.