Adaptive Banner sind die nächste Generation responsiver Anzeigen, mit denen indem Sie die Anzeigengröße für jedes Gerät optimieren. 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.
Zur Auswahl der besten Anzeigengröße werden für adaptive Banner feste Seitenverhältnisse anstelle von mit einer festen Höhe. Dies führt zu Banneranzeigen, die einen gleichmäßigeren Teil des Bildschirms über verschiedene Geräte hinweg messen und die Leistung.
Bei adaptiven Bannern wird immer ein für ein bestimmtes Gerät und eine feste Breite festgelegt. Sobald Sie Ihr Layout an einem je nach Gerät, können Sie sicher sein, dass sich die Anzeigengröße nicht ändert. Die Die Größe des Banner-Creatives kann sich je nach Gerät ändern. Daher kann Ihr Layout Abweichungen in der Anzeigenhöhe berücksichtigen. In seltenen Fällen wird möglicherweise nicht die volle adaptive Größe gefüllt und ein Creative mit Standardgröße in dieser Anzeigenfläche zentriert.
Vorbereitung
- Folgen Sie der Anleitung im Startleitfaden. Informationen zum Importieren des Flutter-Plug-ins für mobile Anzeigen
Wann sollten adaptive Banner verwendet werden?
Adaptive Banner sollen die Anzeigengröße 320 × 50 sowie das Smart-Banner-Format ersetzen.
Diese Bannergrößen werden häufig als verankerte Banner verwendet, die in der Regel am oberen oder unteren Bildschirmrand fixiert.
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 Im Vergleich zu einem Smart-Banner ist ein adaptives Banner aus folgenden Gründen die bessere Wahl:
Es wird die von Ihnen angegebene Breite verwendet, anstatt eine volle Breite zu erzwingen auf dem Display, sodass Sie den Sicherheitsbereich auf iOS-Geräten berücksichtigen können. für Android.
Sie wählt die optimale Höhe für das jeweilige Gerät aus konstante Höhe bei Geräten unterschiedlicher Größe, wodurch die Auswirkungen Gerätefragmentierung.
Implementierungshinweise
Wenn Sie adaptive Banner in Ihrer App implementieren, ist Folgendes zu beachten:
- Sie müssen die Breite des Ansichtsbereichs kennen, in dem die Anzeige platziert wird. Dabei sollten die Gerätebreite und alle anwendbaren sicheren Bereiche oder Ausschnitte berücksichtigt werden.
- Der Hintergrund der Anzeigenansicht muss undurchsichtig sein, damit die AdMob-Richtlinien, wenn kleinere Anzeigengrößen geschaltet werden, nicht die Anzeigenfläche füllen.
- Achten Sie darauf, dass Sie die aktuelle Version von Google Mobile Ads Flutter verwenden. .
- Die adaptiven Bannergrößen sind so konzipiert, dass sie am besten funktionieren, wenn die gesamte verfügbaren Breite. In den meisten Fällen entspricht dies der gesamten Bildschirmbreite. das verwendete Gerät. Berücksichtigen Sie dabei die geltenden Sicherheitszonen.
- Das Google Mobile Ads SDK passt die Größe des Banners an eine optimierte Anzeigenhöhe an. bei Verwendung der adaptiven AdSize APIs für die angegebene Breite.
- Es gibt zwei Methoden, um eine Anzeigengröße für adaptives Targeting abzurufen:
AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width)
um eine bestimmte Ausrichtung anzufordern.AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)
für den aktuelle Ausrichtung zum Zeitpunkt der Ausführung. - Die für eine bestimmte Breite auf einem Gerät zurückgegebene Größe ist immer die Sobald Sie Ihr Layout auf einem bestimmten Gerät getestet haben, dass sich die Anzeigengröße nicht ändert.
- Die Höhe des verankerten Banners ist nie größer als die niedrigeren 15% des des Geräts oder 90 dichteunabhängige Pixel und nie kleiner als 50 dichteunabhängige Pixel.
Kurzanleitung
So implementieren Sie ein einfaches verankertes adaptives Banner:
- Größe für adaptive Banneranzeigen abrufen Die Größe, die Sie erhalten, wird verwendet,
Ihr adaptives Banner. Damit die adaptive Anzeigengröße verwendet werden kann, müssen folgende Voraussetzungen erfüllt sein:
- Rufen Sie die Breite des verwendeten Geräts in dichteunabhängigen Pixeln ab oder legen Sie
Ihre eigene Breite festlegen,
wenn Sie nicht die volle Breite des Bildschirms nutzen möchten.
Mit
MediaQuery.of(context)
können Sie die Bildschirmbreite abrufen. - Verwenden Sie die entsprechenden statischen Methoden für die Klasse der Anzeigengröße, z. B.
AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)
um ein adaptivesAdSize
-Objekt für die aktuelle Ausrichtung abzurufen.
- Rufen Sie die Breite des verwendeten Geräts in dichteunabhängigen Pixeln ab oder legen Sie
Ihre eigene Breite festlegen,
wenn Sie nicht die volle Breite des Bildschirms nutzen möchten.
Mit
- Erstellen Sie ein
BannerAd
-Objekt mit Ihrer Anzeigenblock-ID, der adaptiven Anzeigengröße und ein Anzeigenanfrageobjekt. - Laden Sie die Anzeige wie eine normale Banneranzeige und zeigen Sie sie von einem
AdWidget
– genau wie bei einem normalen Anzeigenaufruf.
Codebeispiel
Mit diesem Beispiel-Widget wird ein verankertes adaptives Banner geladen, das in den Bildschirmbreite:
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 ist die Funktion
AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize
wird verwendet
zum Abrufen der Größe eines Banners an einer verankerten Position für die aktuelle Benutzeroberfläche
Ausrichtung. Um ein verankertes Banner in einer bestimmten Ausrichtung vorab zu laden, verwenden Sie
AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width)
und die gewünschte Ausrichtung übergeben.
Vollständiges Beispiel auf GitHub
Das vollständige Beispiel finden Sie im Bannerbeispiel des GitHub-Repositorys. .