Adaptive Banner sind die nächste Generation responsiver Anzeigen, bei denen die Anzeigengröße für jedes Gerät optimiert wird und dadurch die Leistung maximiert wird. Smart-Banner, bei denen nur feste Höhen unterstützt werden, wurden verbessert. Bei adaptiven Bannern können Sie die Anzeigenbreite angeben und anhand dieser die optimale Anzeigengröße bestimmen.
Zur Auswahl der besten Anzeigengröße werden bei adaptiven Bannern statt einer festen Höhe feste Seitenverhältnisse verwendet. Das führt zu Banneranzeigen, die auf allen Geräten einen immer gleichen Teil des Bildschirms einnehmen und Möglichkeiten zur Leistungssteigerung bieten.
Bei adaptiven Bannern wird für das jeweilige Gerät und die jeweilige Breite immer eine konstante Größe zurückgegeben. Nachdem Sie das Layout auf einem bestimmten Gerät getestet haben, können Sie sicher sein, dass sich die Größe der Anzeige nicht ändert. Die Größe des Banner-Creatives kann sich jedoch je nach Gerät ändern. Daher sollten Sie bei Ihrem Layout Abweichungen bei der Anzeigenhöhe berücksichtigen. In seltenen Fällen kann es vorkommen, dass nicht die volle adaptive Größe gefüllt wird und stattdessen ein Creative in Standardgröße auf dieser Anzeigenfläche zentriert wird.
Voraussetzungen
- Folgen Sie der Anleitung im Startleitfaden zum Importieren des Flutter-Plug-ins für mobile Anzeigen.
Wann sollten adaptive Banner verwendet werden?
Adaptive Banner sind als Drop-in-Ersatz sowohl für die branchenübliche Bannergröße 320 × 50 als auch für das Smart-Banner-Format konzipiert, 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 entspricht das Seitenverhältnis bei adaptiven Bannern denen einer Standardanzeige im Format 320 × 50, wie in den folgenden drei Beispielen gezeigt:
 Banner (320 × 50) |
 Adaptives Banner |
 Smart-Banner |
Mit adaptiven Bannern wird die verfügbare Bildschirmgröße besser genutzt. Darüber hinaus ist ein adaptives Banner im Vergleich zu einem Smart-Banner aus folgenden Gründen besser geeignet:
Dabei wird die von Ihnen angegebene Breite verwendet, anstatt die Breite als Vollbild zu erzwingen. So können Sie unter iOS den sicheren Bereich berücksichtigen und unter Android Display-Aussparungen berücksichtigen.
Es wählt eine optimale Höhe für das jeweilige Gerät aus, anstatt für Geräte unterschiedlicher Größe eine konstante Höhe zu verwenden, wodurch die Auswirkungen der Gerätefragmentierung abgemildert werden.
Implementierungshinweise
Beachten Sie bei der Implementierung von adaptiven Bannern 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 alle sicheren Bereiche oder Aussparungen berücksichtigt werden.
- Der Hintergrund der Anzeigenansicht muss undurchsichtig sein, damit die AdMob-Richtlinien eingehalten werden, wenn kleinere Anzeigengrößen ausgeliefert werden, die die Anzeigenfläche nicht füllen.
- Sie müssen die neueste Version des Flutter-Plug-ins für Google Mobile Ads verwenden.
- Die adaptiven Banner funktionieren am besten, wenn die volle verfügbare Breite genutzt wird. In den meisten Fällen ist dies die volle Breite des Bildschirms des verwendeten Geräts. Achten Sie darauf, auch geeignete Sicherheitsbereiche zu berücksichtigen.
- Wenn Sie die adaptiven AdSize APIs verwenden, wird die Größe des Banners mit dem Google Mobile Ads SDK auf eine für die angegebene Breite optimierte Anzeigenhöhe angepasst.
- Es gibt zwei Methoden, um eine Anzeigengröße für adaptives Targeting abzurufen:
AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width), um eine bestimmte Ausrichtung anzufordern, undAdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)für die aktuelle Ausrichtung bei der Ausführung. - Die für eine bestimmte Breite auf einem Gerät zurückgegebene Größe bleibt immer gleich. Sobald Sie Ihr Layout auf einem bestimmten Gerät getestet haben, können Sie also sicher sein, dass sich die Größ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 niemals kleiner als 50 dichteunabhängige Pixel.
Kurzanleitung
Folgen Sie der Anleitung unten, um ein einfaches verankertes adaptives Banner zu implementieren.
- Anzeigengröße für adaptive Banner abrufen. Diese Größe wird für die Anforderung
Ihres adaptiven Banners verwendet. Um die adaptive Anzeigengröße zu erhalten, müssen folgende Voraussetzungen erfüllt sein:
- Du kannst die Breite des verwendeten Geräts in dichteunabhängigen Pixeln abrufen oder deine eigene Breite festlegen, wenn du nicht die volle Breite des Bildschirms nutzen möchtest.
Sie können
MediaQuery.of(context)verwenden, um die Bildschirmbreite abzurufen. - Verwenden Sie geeignete statische Methoden für die Anzeigengrößen-Klasse (z. B.
AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)), um ein adaptivesAdSize-Objekt für die aktuelle Ausrichtung zu erhalten.
- Du kannst die Breite des verwendeten Geräts in dichteunabhängigen Pixeln abrufen oder deine eigene Breite festlegen, wenn du nicht die volle Breite des Bildschirms nutzen möchtest.
Sie können
- Erstellen Sie ein
BannerAd-Objekt mit Ihrer Anzeigenblock-ID, der adaptiven Anzeigengröße und einem Anzeigenanfrageobjekt. - Laden Sie die Anzeige wie eine normale Banneranzeige und präsentieren Sie sie über einen
AdWidgetwie eine normale Anzeigenansicht.
Codebeispiel
Hier sehen Sie ein Beispiel-Widget, mit dem ein verankertes adaptives Banner geladen wird, das zur Breite des Bildschirms passt:
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 Ausrichtung der Benutzeroberfläche abzurufen. Wenn Sie ein verankertes Banner in einer bestimmten Ausrichtung vorab laden möchten, verwenden Sie AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) und übergeben Sie die gewünschte Ausrichtung.