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 pendant que les utilisateurs interagissent avec l'application, et peuvent s'actualiser automatiquement après un certain délai.

Ce guide vous explique comment intégrer des bannières Ad Manager dans un application Flutter. En plus des extraits de code et des instructions, il inclut des informations sur le dimensionnement correct des bannières.

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

/21775744923/example/adaptive-banner

Les blocs d'annonces tests sont configurés pour renvoyer des annonces tests pour chaque demande. vous êtes libre de 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 vos l'application.

Charger une annonce

L'exemple suivant permet d'instancier 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() {
    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: AdSize.banner,
      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();
  }
}

Le tableau ci-dessous répertorie les tailles de bannière standard.

Taille en dp (LxH) Description Constante AdSize
320 x 50 Bannière standard banner
320 x 100 Grande bannière largeBanner
320x250 Rectangle moyen mediumRectangle
468 x 60 Bannière pleine taille fullBanner
728 x 90 Classement leaderboard
Largeur x Hauteur adaptative fournie Bannière adaptative ND

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 à 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() {
    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: AdSize.banner,
      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();
  }
}

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 Appeler load(), mais load() doit être appelé avant de l'ajouter au widget arbre.

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 n'est plus nécessaire. La bonne pratique pour savoir quand appeler dispose() est soit après la suppression de AdWidget dans ou dans l'arborescence de widgets AdManagerBannerAdListener.onAdFailedToLoad() .

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

Limitation du défilement sur Android 9 et versions antérieures

Nous sommes conscients que certains appareils plus anciens ou moins puissants fonctionnant sous Android 9 ou plus tôt pourrait présenter de performances non optimales lors de l'affichage de bannières intégrées dans des vues déroulantes. Nous vous recommandons uniquement à l'aide de ces types de bannières sous Android 10 ou version ultérieure. Les bannières à position fixe telles que car 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.