Les bannières sont diffusées dans une application, en haut ou en bas de l'écran de l'appareil. Elles restent à l'écran lorsque les utilisateurs interagissent avec l'application et peuvent s'actualiser automatiquement au bout d'un certain temps.
Ce guide vous aide à commencer à utiliser les bannières adaptatives ancrées. Les bannières adaptatives ancrées optimisent la taille des annonces pour chaque appareil à l'aide d'une largeur d'annonce que vous spécifiez.
Les bannières adaptatives ancrées sont des annonces au format fixe plutôt que des annonces de taille fixe. Le format est semblable à 320x50. Une fois que vous avez spécifié la largeur complète disponible, le SDK Google Mobile Ads renvoie une annonce avec une hauteur optimale pour cette largeur. La hauteur optimale de l'annonce reste constante entre les différentes demandes d'annonces, et le contenu entourant l'annonce reste en place lorsque l'annonce est actualisée.
Effectuez toujours des tests avec des annonces tests
Lorsque vous créez et testez vos applications, assurez-vous d'utiliser des annonces tests plutôt que des annonces de production. À défaut, votre compte risque d'être suspendu.
Le moyen le plus simple de charger des annonces tests consiste à utiliser notre ID de bloc d'annonces tests dédié pour les bannières:
/21775744923/example/adaptive-banner
Les blocs d'annonces de test sont configurés pour renvoyer des annonces de test pour chaque requête. Vous pouvez les utiliser dans vos propres applications lors du codage, des tests et du débogage. Veillez simplement à les remplacer par vos propres ID de bloc d'annonces avant de publier votre application.
Obtenir la taille de l'annonce
Pour demander une bannière avec la bonne taille, procédez comme suit:
Obtenez la largeur de l'écran de l'appareil en pixels indépendants de la densité (dp) à l'aide de
MediaQuery.of(context). Si vous ne souhaitez pas utiliser la largeur de l'écran, vous pouvez définir votre propre largeur.Utilisez la méthode statique appropriée de la classe
AdSizepour obtenir un objetAdSize. Par exemple, utilisezAdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)pour obtenir la taille de l'annonce pour l'orientation actuelle.
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.sizeOf(context).width.truncate());
Charger une annonce
L'exemple suivant instancie une bannière:
class BannerExampleState extends State<BannerExample>{
AdManagerBannerAd? _bannerAd;
bool _isLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final adUnitId = '/21775744923/example/adaptive-banner';
/// Loads a banner ad.
void loadAd() async {
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.sizeOf(context).width.truncate());
_bannerAd = AdManagerBannerAd(
adUnitId: adUnitId,
request: const AdManagerAdRequest(),
size: size,
listener: AdManagerBannerAdListener(
// Called when an ad is successfully received.
onAdLoaded: (ad) {
debugPrint('$ad loaded.');
setState(() {
_isLoaded = true;
});
},
// Called when an ad request failed.
onAdFailedToLoad: (ad, err) {
debugPrint('AdManagerBannerAd failed to load: $error');
// Dispose the ad here to free resources.
ad.dispose();
},
),
)..load();
}
}
Événements de bannière publicitaire
Grâce à AdManagerBannerAdListener, vous pouvez écouter les événements de cycle de vie, par exemple lorsqu'une annonce est chargée. Cet exemple implémente chaque méthode et consigne un message dans la console:
class BannerExampleState extends State<BannerExample> {
AdManagerBannerAd? _bannerAd;
bool _isLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final adUnitId = '/21775744923/example/adaptive-banner';
/// Loads a banner ad.
void loadAd() async {
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.sizeOf(context).width.truncate());
_bannerAd = AdManagerBannerAd(
adUnitId: adUnitId,
request: const AdManagerAdRequest(),
size: size,
listener: AdManagerBannerAdListener(
// Called when an ad is successfully received.
onAdLoaded: (ad) {
debugPrint('$ad loaded.');
setState(() {
_isLoaded = true;
});
},
// Called when an ad request failed.
onAdFailedToLoad: (ad, err) {
debugPrint('AdManagerBannerAd failed to load: $error');
// Dispose the ad here to free resources.
ad.dispose();
},
// Called when an ad opens an overlay that covers the screen.
onAdOpened: (Ad ad) {},
// Called when an ad removes an overlay that covers the screen.
onAdClosed: (Ad ad) {},
// Called when an impression occurs on the ad.
onAdImpression: (Ad ad) {},
),
)..load();
}
}
Actualiser une annonce
Si vous avez configuré votre bloc d'annonces pour qu'il s'actualise, vous n'avez pas besoin de demander une autre annonce lorsque celle-ci ne parvient pas à se charger. Le SDK Google Mobile Ads respecte la fréquence d'actualisation que vous avez spécifiée dans l'interface utilisateur d'Ad Manager. Si vous n'avez pas activé l'actualisation, envoyez une nouvelle requête. Pour en savoir plus sur l'actualisation des blocs d'annonces, comme la définition d'une fréquence d'actualisation, consultez la section Fréquence d'actualisation des annonces dans les applications mobiles.
Afficher une bannière
Pour afficher un AdManagerBannerAd en tant que widget, vous devez instancier un AdWidget avec une annonce compatible après avoir appelé load(). Vous pouvez créer le widget avant d'appeler load(), mais load() doit être appelé avant de l'ajouter à l'arborescence des widgets.
AdWidget hérite de la classe Widget de Flutter et peut être utilisé comme n'importe quel autre widget. Sur iOS, assurez-vous de placer le widget dans un widget dont la largeur et la hauteur sont spécifiées. Sinon, votre annonce risque de ne pas s'afficher. Un AdManagerBannerAd peut être placé dans un conteneur dont la taille correspond à l'annonce:
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!),
),
),
)
}
Une annonce doit être supprimée lorsque l'accès à celle-ci n'est plus nécessaire. Il est recommandé d'appeler dispose() après la suppression de AdWidget de l'arborescence de widgets ou dans le rappel AdManagerBannerAdListener.onAdFailedToLoad().
Et voilà ! Votre application est maintenant prête à diffuser des bannières publicitaires.
Limite de défilement sur Android 9 ou version antérieure
Nous sommes conscients que les performances peuvent être sous-optimales sur certains appareils plus anciens ou moins puissants exécutant Android 9 ou une version antérieure lorsqu'ils affichent des bannières intégrées dans des vues à défilement. Nous vous recommandons de n'utiliser ces types de bannières que sur Android 10 ou version ultérieure. Les bannières à position fixe, telles que les bannières ancrées, ne sont pas affectées et peuvent être utilisées avec des performances optimales à tous les niveaux d'API Android.
En savoir plus sur les autres types de bannières
Familiarisez-vous avec les autres types de bannières définis dans cette section pour votre application Flutter.
Bannières adaptatives intégrées
Les bannières adaptatives intégrées ont une hauteur variable et sont plus grandes et plus hautes que les bannières adaptatives ancrées. Nous vous recommandons d'utiliser des bannières adaptatives intégrées plutôt que des bannières adaptatives ancrées pour les applications qui placent des bannières publicitaires dans du contenu à faire défiler. Pour en savoir plus, consultez la section Bannières adaptatives intégrées.
Bannières réductibles
Les bannières réductibles sont des bannières qui sont initialement présentées sous la forme d'une superposition plus grande, avec un bouton permettant de réduire la bannière à une taille plus petite. Envisagez d'utiliser cette bannière pour optimiser davantage vos performances. Pour en savoir plus, consultez la section Annonces bannières réductibles.