Bannière

Les bannières occupent un emplacement dans la mise en page d'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 après un certain temps.

Ce guide explique comment intégrer des bannières AdMob à une application Flutter. En plus des extraits de code et des instructions, il fournit des informations sur le dimensionnement correct des bannières.

Toujours tester avec des annonces tests

Lorsque vous créez et testez vos applications, veillez à 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/6300978111

iOS

ca-app-pub-3940256099942544/2934735716

Les blocs d'annonces tests sont configurés pour renvoyer des annonces tests pour chaque demande. 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.

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/6300978111'
    : 'ca-app-pub-3940256099942544/2934735716';

  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: AdSize.banner,
      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();
  }
}

Le tableau ci-dessous liste les tailles de bannières standards.

Taille en dp (LxH) Description Constante AdSize
320x50 Bannière standard banner
320 x 100 Grande bannière largeBanner
320x250 Rectangle moyen mediumRectangle
468 x 60 Bannière taille réelle fullBanner
728 x 90 Classement leaderboard
Largeur fournie x Hauteur adaptative Bannière adaptative N/A

Pour définir une taille de bannière personnalisée, définissez votre AdSize préféré:

final AdSize adSize = AdSize(300, 50);

Grâce à BannerAdListener, vous pouvez écouter des événements de cycle de vie, tels que le chargement d'une annonce. Cet exemple met en œuvre 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/6300978111'
    : 'ca-app-pub-3940256099942544/2934735716';


  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: AdSize.banner,
      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();
  }
}

Afficher une bannière

Pour afficher un BannerAd en tant que widget, vous devez instancier 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, veillez à placer le widget dans un widget avec une largeur et une hauteur spécifiées. Sinon, votre annonce risque de ne pas être diffusée. Un élément 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!),
      ),
    ),
  )
}
...

Une annonce doit être supprimée lorsque l'accès n'est plus nécessaire. Il est recommandé d'appeler dispose() 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.

Scrolling limitation on Android 9 and below

We are aware that some older or less powerful devices running Android 9 or earlier may have suboptimal performance when displaying inline banner ads within scrolling views. We recommend only using these types of banners on Android 10 or later. Fixed position banners such as anchored banners are not affected and can be used with optimal performance on all Android API levels.

Exemple complet sur GitHub

Bannière