Bannières

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

Les bannières sont des annonces rectangulaires qui occupent une partie de la mise en page d'une application. Les bannières adaptatives ancrées sont des annonces à format fixe qui restent à l'écran lorsque les utilisateurs interagissent avec l'application, ancrées en haut ou en bas de l'écran.

Ce guide explique comment charger une bannière ancrée adaptative dans une application Android.

Prérequis

  • Suivez le guide de démarrage.
  • Facultatif : Pour obtenir un exemple d'implémentation d'annonces bannière, sélectionnez l'une des applications exemples suivantes :

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

ca-app-pub-3940256099942544/9214589741

Il a été spécialement configuré pour renvoyer des annonces tests pour chaque demande. Vous pouvez l'utiliser dans vos propres applications lors du codage, des tests et du débogage. Veillez simplement à le remplacer par votre propre ID de bloc d'annonces avant de publier votre application.

Pour en savoir plus sur le fonctionnement des annonces tests du SDK Google Mobile Ads, consultez Activer les annonces tests.

Définir la vue de l'annonce

Mise en page XML

Ajoutez une vue à votre fichier XML de mise en page pour servir de conteneur à votre bannière adaptative ancrée :

<!-- Ad view container that fills the width of the screen and adjusts its
    height to the content of the ad. -->
<FrameLayout
        android:id="@+id/ad_view_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_alignParentBottom="true" />

Jetpack Compose

  1. La première étape consiste à inclure le module JetpackComposeDemo/compose-util. Ce module inclut des assistants pour composer l'objet AdView et les ressources.

  2. Étape 2 : Composez une classe BannerAd à l'aide du module compose-util :


// Place the ad view at the bottom of the screen.
Column(modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Bottom) {
  Box(modifier = modifier.fillMaxWidth()) { BannerAd(adView, modifier) }
}
BannerScreen.kt

Définir la taille de l'annonce

Définissez AdSize sur un type de bannière adaptative ancrée avec une largeur spécifiée :

Java

// Request an anchored adaptive banner with a width of 360.
adView.setAdSize(AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, 360));
MyActivity.java

Kotlin

// Request an anchored adaptive banner with a width of 360.
adView.setAdSize(AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, 360))
MainActivity.kt

Jetpack Compose


// Set the adaptive banner ad size with a given width.
val adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(LocalContext.current, 360)
adView.setAdSize(adSize)
BannerScreen.kt

Ajouter AdView à la mise en page

Créez un AdView en utilisant la taille de l'annonce à ajouter à la mise en page de votre application :

Java


// Create a new ad view.
adView = new AdView(this);
adView.setAdUnitId(AD_UNIT_ID);
// Request an anchored adaptive banner with a width of 360.
adView.setAdSize(AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, 360));

// Replace ad container with new ad view.
adContainerView.removeAllViews();
adContainerView.addView(adView);
MyActivity.java

Kotlin


// Create a new ad view.
val adView = AdView(this)
adView.adUnitId = AD_UNIT_ID
// Request an anchored adaptive banner with a width of 360.
adView.setAdSize(AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, 360))
this.adView = adView

// Replace ad container with new ad view.
binding.adViewContainer.removeAllViews()
binding.adViewContainer.addView(adView)
MainActivity.kt

Jetpack Compose


val adView = remember { AdView(context) }

// Setup and load the adview.
// Set the unique ID for this specific ad unit.
adView.adUnitId = BANNER_AD_UNIT_ID

// Set the adaptive banner ad size with a given width.
val adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(LocalContext.current, 360)
adView.setAdSize(adSize)

// Place the ad view at the bottom of the screen.
Column(modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Bottom) {
  Box(modifier = modifier.fillMaxWidth()) { BannerAd(adView, modifier) }
}
BannerScreen.kt

Charger une annonce

Une fois le AdView en place, l'étape suivante consiste à charger une annonce. Pour ce faire, utilisez la méthode loadAd() dans la classe AdView. Il accepte un paramètre AdRequest, qui contient des informations d'exécution, telles que des informations de ciblage, sur une seule demande d'annonce.

Voici un exemple montrant comment charger une annonce :

Java

AdManagerAdRequest adRequest = new AdManagerAdRequest.Builder().build();
adView.loadAd(adRequest);
MyActivity.java

Kotlin

val adRequest = AdRequest.Builder().build()
adView.loadAd(adRequest)
MainActivity.kt

Si l'opération réussit, votre application est prête à afficher des bannières publicitaires.

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. Le SDK Google Mobile Ads respecte toute 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 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.

Libérer une ressource publicitaire

Lorsque vous avez terminé d'utiliser une bannière publicitaire, vous pouvez libérer ses ressources.

Pour libérer la ressource de l'annonce, supprimez l'annonce de la hiérarchie des vues et supprimez toutes ses références :

Kotlin 

// Remove banner from view hierarchy.
val parentView = adView?.parent
if (parentView is ViewGroup) {
  parentView.removeView(adView)
}

// Destroy the banner ad resources.
adView?.destroy()

// Drop reference to the banner ad.
adView = null

Java 

// Remove banner from view hierarchy.
if (adView.getParent() instanceof ViewGroup) {
  ((ViewGroup) adView.getParent()).removeView(adView);
}
// Destroy the banner ad resources.
adView.destroy();
// Drop reference to the banner ad.
adView = null;

Jetpack Compose 


DisposableEffect(Unit) {
  // Destroy the AdView to prevent memory leaks when the screen is disposed.
  onDispose { adView.destroy() }
}
BannerScreen.kt

Événements d'annonce

Vous pouvez écouter un certain nombre d'événements dans le cycle de vie de l'annonce, y compris les événements de chargement, d'impression et de clic sur l'annonce, ainsi que les événements d'ouverture et de fermeture de l'annonce. Il est recommandé de définir le rappel avant de charger la bannière.

Java

adView.setAdListener(new AdListener() {
    @Override
    public void onAdClicked() {
      // Code to be executed when the user clicks on an ad.
    }

    @Override
    public void onAdClosed() {
      // Code to be executed when the user is about to return
      // to the app after tapping on an ad.
    }

    @Override
    public void onAdFailedToLoad(LoadAdError adError) {
      // Code to be executed when an ad request fails.
    }

    @Override
    public void onAdImpression() {
      // Code to be executed when an impression is recorded
      // for an ad.
    }

    @Override
    public void onAdLoaded() {
      // Code to be executed when an ad finishes loading.
    }

    @Override
    public void onAdOpened() {
      // Code to be executed when an ad opens an overlay that
      // covers the screen.
    }
});

Kotlin

adView.adListener = object: AdListener() {
    override fun onAdClicked() {
      // Code to be executed when the user clicks on an ad.
    }

    override fun onAdClosed() {
      // Code to be executed when the user is about to return
      // to the app after tapping on an ad.
    }

    override fun onAdFailedToLoad(adError : LoadAdError) {
      // Code to be executed when an ad request fails.
    }

    override fun onAdImpression() {
      // Code to be executed when an impression is recorded
      // for an ad.
    }

    override fun onAdLoaded() {
      // Code to be executed when an ad finishes loading.
    }

    override fun onAdOpened() {
      // Code to be executed when an ad opens an overlay that
      // covers the screen.
    }
}

Chacune des méthodes remplaçables dans AdListener correspond à un événement du cycle de vie d'une annonce.

Méthodes pouvant être remplacées
onAdClicked() La méthode onAdClicked() est appelée lorsqu'un clic est enregistré pour une annonce.
onAdClosed() La méthode onAdClosed() est appelée lorsqu'un utilisateur revient à l'application après avoir consulté l'URL de destination d'une annonce. Votre application peut l'utiliser pour reprendre les activités suspendues ou effectuer toute autre tâche nécessaire pour se préparer à l'interaction. Consultez l'exemple AdListener AdMob pour découvrir une implémentation des méthodes d'écouteur d'annonces dans l'application Android API Demo.
onAdFailedToLoad() La méthode onAdFailedToLoad() est la seule à inclure un paramètre. Le paramètre d'erreur de type LoadAdError décrit l'erreur qui s'est produite. Pour en savoir plus, consultez la documentation sur le débogage des erreurs de chargement d'annonces.
onAdImpression() La méthode onAdImpression() est appelée lorsqu'une impression est enregistrée pour une annonce.
onAdLoaded() La méthode onAdLoaded() est exécutée lorsqu'une annonce a fini de se charger. Si vous souhaitez retarder l'ajout de AdView à votre activité ou fragment jusqu'à ce que vous soyez sûr qu'une annonce sera chargée, par exemple, vous pouvez le faire ici.
onAdOpened() La méthode onAdOpened() est appelée lorsqu'une annonce ouvre une superposition qui recouvre l'écran.

Accélération matérielle pour les annonces vidéo

Pour que les annonces vidéo s'affichent correctement dans vos vues de bannières publicitaires, l'accélération matérielle doit être activée.

L'accélération matérielle est activée par défaut, mais certaines applications peuvent choisir de la désactiver. Si cela s'applique à votre application, nous vous recommandons d'activer l'accélération matérielle pour les classes Activity qui utilisent des annonces.

Activer l'accélération matérielle

Si l'accélération matérielle est activée de façon globale et que votre application n'adopte pas le comportement attendu, vous pouvez également la contrôler pour chaque activité. Pour activer ou désactiver l'accélération matérielle, vous pouvez utiliser l'attribut android:hardwareAccelerated pour les éléments <application> et <activity> dans votre AndroidManifest.xml. L'exemple suivant active l'accélération matérielle pour l'ensemble de l'application, mais la désactive pour une activité :

<application android:hardwareAccelerated="true">
    <!-- For activities that use ads, hardwareAcceleration should be true. -->
    <activity android:hardwareAccelerated="true" />
    <!-- For activities that don't use ads, hardwareAcceleration can be false. -->
    <activity android:hardwareAccelerated="false" />
</application>

Pour en savoir plus sur les options permettant de contrôler l'accélération matérielle, consultez le guide sur l'accélération matérielle. Notez que l'accélération matérielle ne peut pas être activée pour les vues d'annonces individuelles si l'activité est désactivée. L'accélération matérielle doit donc être activée pour l'activité elle-même.

Étapes suivantes

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 les réduire. Envisagez de l'utiliser pour optimiser davantage vos performances. Pour en savoir plus, consultez Bannières réductibles.

Bannières adaptatives intégrées

Les bannières adaptatives intégrées sont plus grandes et plus hautes que les bannières adaptatives ancrées. Elles ont une hauteur variable et peuvent atteindre la hauteur de l'écran de l'appareil. Les bannières adaptatives intégrées sont recommandées plutôt que les bannières adaptatives ancrées pour les applications qui diffusent des bannières dans du contenu à faire défiler. Pour en savoir plus, consultez Bannières adaptatives intégrées.

Découvrir d'autres thèmes