Configurer des bannières publicitaires

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

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 être actualisées automatiquement au bout d'un certain temps.

Ce guide vous explique comment utiliser les bannières adaptatives ancrées. Les bannières adaptatives ancrées optimisent la taille de l'annonce pour chaque appareil en fonction de la 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 à 320 x 50. Une fois que vous avez spécifié la largeur totale disponible, Google Mobile Ads Flutter Plugin renvoie une annonce dont la hauteur est optimale pour cette largeur. La hauteur optimale de l'annonce reste constante d'une demande d'annonce à l'autre, et le contenu entourant l'annonce reste en place lorsque l'annonce est actualisée.

Toujours tester 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 de test consiste à utiliser l'ID de bloc d'annonces de test dédié aux 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 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.

Obtenir la taille de l'annonce

Les grandes bannières adaptatives offrent un format plus grand conçu pour les mises en page sans défilement. Par rapport aux bannières adaptatives ancrées standards, ces bannières permettent une hauteur maximale plus élevée (jusqu'à 20% de la hauteur de l'écran, entre 50 et 150 dp). Cet espace accru est optimisé pour les contenus vidéo.

Pour demander une bannière avec la bonne taille d'annonce, 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.getLargeAnchoredAdaptiveBannerAdSize(int width) pour obtenir la taille d'annonce pour l'orientation actuelle.

// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(
  MediaQuery.sizeOf(context).width.truncate(),
);

Charger une annonce

L'exemple suivant charge une bannière :

void _loadAd() async {
  // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
  final size = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(
    MediaQuery.sizeOf(context).width.truncate(),
  );

  if (size == null) {
    // Unable to get width of anchored banner.
    return;
  }

  unawaited(
    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(),
  );
}

Remplacez _adUnitId par votre propre ID de bloc d'annonces.

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 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.');
},

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. Google Mobile Ads Flutter Plugin respecte la 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 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 du widget.

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 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 à 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 lorsqu'elle n'est plus nécessaire. La bonne pratique consiste à appeler dispose() après la suppression de AdWidget de l'arborescence du widget ou dans le rappel BannerAdListener.onAdFailedToLoad().

Et voilà ! Votre application est maintenant prête à afficher 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 exécutant Android 9 ou une version antérieure peuvent présenter des performances non optimales lors de l'affichage de 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 concernées et peuvent être utilisées avec des performances optimales sur tous les niveaux d'API Android.

Exemple complet sur GitHub

Pour voir l'exemple complet, consultez la démo de l'API.

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. Pour les applications qui placent des bannières dans du contenu à faire défiler, nous recommandons d'utiliser des bannières adaptatives intégrées plutôt que des bannières adaptatives ancrées. 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 réduire l'annonce à une taille plus petite. Envisagez d'utiliser cette bannière pour optimiser davantage vos performances. Pour en savoir plus, consultez Bannières réductibles.