Bannière

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:

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

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:

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

  2. Utilisez la méthode statique appropriée de 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());

Charger une annonce

L'exemple suivant instancie une bannière:

class BannerExampleState extends State<BannerExample>{
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';

  /// 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 = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      listener: BannerAdListener(
        // 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('BannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
      ),
    )..load();
  }
}

Grâce à 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:

class BannerExampleState extends State<BannerExample> {
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';


  /// 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 = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      listener: BannerAdListener(
        // 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('BannerAd 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'AdMob. Si vous n'avez pas activé l'actualisation, envoyez une nouvelle requête. Pour en savoir plus sur l'actualisation des blocs d'annonces, par exemple pour définir une fréquence d'actualisation, consultez Utiliser l'actualisation automatique pour les bannières.

Afficher une bannière

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 s'afficher. Un BannerAd 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 BannerAdListener.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.

Exemple complet sur GitHub

Pour voir un exemple complet de l'intégration de la bannière décrite 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 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.