Bannière

Sélectionnez une plate-forme : Android iOS Unity Flutter

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 ancrées adaptatives. Les bannières adaptatives ancrées optimisent la taille de l'annonce pour chaque appareil en fonction de la largeur que vous spécifiez.

Les bannières adaptatives ancrées sont des annonces à format fixe plutôt que des annonces à taille fixe. Le format est semblable à 320x50. Une fois que vous avez spécifié la largeur totale disponible, le SDK Google Mobile Ads renvoie une annonce dont la hauteur est optimale pour cette largeur. La hauteur optimale de l'annonce reste constante pour les différentes demandes d'annonces, et le contenu qui l'entoure reste en place lorsque l'annonce est actualisée.

Toujours effectuer 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 test dédié pour les bannières :

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

Les blocs d'annonces tests sont configurés pour renvoyer des annonces tests à chaque demande. Vous pouvez les utiliser librement dans vos propres applications lors du codage, des tests et du débogage. Veillez simplement à les remplacer par vos propres ID de blocs d'annonces avant de publier votre application.

Obtenir la taille de l'annonce

Pour demander une bannière de la bonne taille, procédez comme suit :

  1. 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 toute la largeur de l'écran, vous pouvez définir votre propre largeur.

  2. Utilisez la méthode statique appropriée sur la classe AdSize pour obtenir un objet AdSize. Par exemple, utilisez AdSize.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(),
);
main.dart

Charger une annonce

L'exemple suivant charge une bannière publicitaire :

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;
  }

  BannerAd(
    adUnitId: _adUnitId,
    request: const AdRequest(),
    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();
}
main.dart

En utilisant BannerAdListener, 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 :

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

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 l'annonce ne se charge pas. Le SDK Google Mobile Ads respecte toute fréquence d'actualisation que vous avez spécifiée dans l'UI AdMob. Si vous n'avez pas activé l'actualisation, envoyez une nouvelle demande. Pour en savoir plus sur l'actualisation des blocs d'annonces, par exemple sur la définition d'une fréquence d'actualisation, consultez Utiliser l'actualisation automatique pour les bannières.

Afficher une bannière publicitaire

Pour afficher un BannerAd 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 être diffusée. Un BannerAd peut être placé dans un conteneur dont la taille correspond à celle de 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!),
      ),
    ),
  ),
main.dart

Une annonce doit être supprimée lorsque l'accès à celle-ci n'est plus nécessaire. La bonne pratique pour savoir quand appeler dispose() consiste à le faire après la suppression de AdWidget de l'arborescence des widgets ou dans le rappel BannerAdListener.onAdFailedToLoad().

Et voilà ! Votre application est maintenant prête à diffuser des bannières publicitaires.

Limitation du défilement sur Android 9 ou version antérieure

Nous sommes conscients que certains appareils plus anciens ou moins puissants exécutant Android 9 ou une version antérieure peuvent présenter des performances sous-optimales lors de l'affichage de bannières intégrées dans des vues défilantes. 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 concernées et peuvent être utilisées avec des performances optimales sur tous les niveaux d'API Android.

Exemple complet sur GitHub

Pour voir un exemple complet de l'intégration de bannières abordée sur cette page, consultez banner_example.

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 larges que les bannières adaptatives ancrées. Les bannières adaptatives intégrées sont recommandées par rapport aux bannières adaptatives ancrées pour les applications qui diffusent des bannières dans du contenu à faire défiler. Pour en savoir plus, consultez Bannières adaptatives intégrées.

Bannières réductibles

Les bannières réductibles sont des bannières qui s'affichent initialement sous la forme d'une superposition plus grande, avec un bouton permettant de les réduire. Envisagez d'utiliser cette bannière pour optimiser davantage vos performances. Pour en savoir plus, consultez Bannières réductibles.