Configurer des bannières publicitaires

Sélectionnez une plate-forme : Android (bêta) Nouveau 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 explique comment 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 à format fixe plutôt qu'à taille fixe annonces. 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 avec une hauteur 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 lorsqu'elle 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 tests dédié aux 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 pour 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 bloc 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 la largeur totale 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 :

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

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

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 enregistre 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 le chargement échoue. Google Mobile Ads Flutter Plugin 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 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

Pour afficher une 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 avec une largeur et une hauteur spécifiées. Sinon, votre annonce risque de ne pas s'afficher. Une BannerAd peut être placée 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 vous n'en avez plus besoin. La bonne pratique pour 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 à 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 avoir 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

Consultez un exemple complet de l'intégration de bannières présentée sur cette page dans 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 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 dans du contenu défilant. 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 la taille de l'annonce. Envisagez d'utiliser cette bannière pour optimiser davantage vos performances. Pour en savoir plus, consultez Bannières réductibles.