Bannières

Les bannières sont des annonces rectangulaires qui occupent une partie de la mise en page d'une application. Elles restent à l'écran lorsque les utilisateurs interagissent avec l'application et sont ancrées en haut ou en bas de l'écran, ou intégrées au contenu lorsque l'utilisateur fait défiler la page. Les bannières peuvent s'actualiser automatiquement au bout d'un certain temps. Pour en savoir plus, consultez la page Présentation des bannières.

Ce guide vous explique comment commencer à utiliser les bannières adaptatives ancrées, qui maximisent les performances en optimisant 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 au format fixe plutôt que des annonces de taille fixe standards. Le format est semblable au format standard du secteur (320 x 50). Une fois que vous avez spécifié la largeur complète disponible, une annonce avec une hauteur optimale pour cette largeur s'affiche. La hauteur optimale ne change pas entre les requêtes provenant du même appareil, et les vues environnantes n'ont pas besoin de bouger lorsque l'annonce est actualisée.

Prérequis

• Suivez le guide de démarrage.

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

/21775744923/example/adaptive-banner

Il a été spécialement configuré pour renvoyer des annonces de test pour chaque requête. 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 Mobile Ads, consultez Annonces tests.

Ajouter AdManagerAdView à la mise en page

Pour créer une bannière, vous devez déterminer la taille de l'annonce. Procédez comme suit :

1. Créez un format d'annonce adaptative ancrée en plein écran:

   Java

   // Get the ad size with screen width.
   public AdSize getAdSize() {
     DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
     int adWidthPixels = displayMetrics.widthPixels;
   
     if (VERSION.SDK_INT >= VERSION_CODES.R) {
       WindowMetrics windowMetrics = this.getWindowManager().getCurrentWindowMetrics();
       adWidthPixels = windowMetrics.getBounds().width();
     }
   
     float density = displayMetrics.density;
     int adWidth = (int) (adWidthPixels / density);
     return AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, adWidth);
   }
   MyActivity.java
   

   Kotlin

   // Get the ad size with screen width.
   private val adSize: AdSize
     get() {
       val displayMetrics = resources.displayMetrics
       val adWidthPixels =
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
           val windowMetrics: WindowMetrics = this.windowManager.currentWindowMetrics
           windowMetrics.bounds.width()
         } else {
           displayMetrics.widthPixels
         }
       val density = displayMetrics.density
       val adWidth = (adWidthPixels / density).toInt()
       return AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, adWidth)
     }
   MyActivity.kt
   

2. Créez un AdManagerAdView à l'aide de la taille de l'annonce et ajoutez-le à la mise en page de votre application:

   Java

   // Create a new ad view.
   adView = new AdManagerAdView(this);
   adView.setAdUnitId(AD_UNIT);
   adView.setAdSize(getAdSize());
   
   // Replace ad container with new ad view.
   adContainerView.removeAllViews();
   adContainerView.addView(adView);
   MyActivity.java
   

   Kotlin

   // Create a new ad view.
   val adView = AdManagerAdView(this)
   adView.adUnitId = AD_UNIT_ID
   adView.setAdSize(adSize)
   this.adView = adView
   
   // Replace ad container with new ad view.
   binding.adViewContainer.removeAllViews()
   binding.adViewContainer.addView(adView)
   MyActivity.kt
   

Charger une annonce

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

Voici un exemple illustrant comment charger une annonce:

// Start loading the ad in the background.
AdManagerAdRequest adRequest = new AdManagerAdRequest.Builder().build();
adView.loadAd(adRequest);
MyActivity.java

// Start loading the ad in the background.
val adRequest = AdManagerAdRequest.Builder().build()
adView.loadAd(adRequest)
MyActivity.kt

Si l'opération réussit, votre application est prête à diffuser 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 celle-ci ne parvient pas à se charger. Le SDK Google Mobile Ads respecte la fréquence d'actualisation que vous avez spécifiée dans l'interface utilisateur d'Ad Manager. Si vous n'avez pas activé l'actualisation, envoyez une nouvelle requête. Pour en savoir plus sur l'actualisation des blocs d'annonces, comme la définition d'une fréquence d'actualisation, consultez la section Fréquence d'actualisation des annonces dans les applications mobiles.

Événements d'annonce

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

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 de AdListener correspond à un événement du cycle de vie d'une annonce.

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

Pour que les annonces vidéo s'affichent correctement dans les vues de vos 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> de 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 de contrôle de 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.

Comptage manuel des impressions

La comptabilisation manuelle des impressions n'est possible que pour les campagnes vendues directement et les campagnes propriétaires dont les créations sont diffusées directement dans Ad Manager. Il ne doit pas être utilisé pour le remplissage ni pour les annonces de réseaux tiers. Pour en savoir plus, consultez la section Comptabilisation des impressions et des clics.

Vous pouvez envoyer manuellement des pings d'impression à Ad Manager si vous avez des conditions spéciales pour l'enregistrement d'une impression. Pour ce faire, activez un AdManagerAdRequest pour les impressions manuelles avant de charger une annonce:

AdManagerAdRequest adRequest = new AdManagerAdRequest.Builder()
    .setManualImpressionsEnabled(true)
    .build();

val adRequest = AdManagerAdRequest.Builder()
    .setManualImpressionsEnabled(true)
    .build()

Lorsque vous déterminez qu'une annonce a bien été renvoyée et qu'elle s'affiche à l'écran, vous pouvez enregistrer manuellement une impression:

{ ad_view }.recordManualImpression();

AdManagerAdView.recordManualImpression()

Événements d'application

Les événements d'application vous permettent de créer des annonces pouvant envoyer des messages au code de votre application. L'application peut ensuite prendre des mesures en fonction de ces messages.

Vous pouvez écouter les événements d'application spécifiques à Ad Manager à l'aide de AppEventListener. Ces événements peuvent se produire à tout moment au cours du cycle de vie de l'annonce, même avant l'appel de onAdLoaded().

public interface AppEventListener {
  void onAppEvent(String name, String info);
}

interface AppEventListener {
    fun onAppEvent(name: String, info: String)
}

void onAppEvent(String name, String info) est appelé lorsqu'un événement d'application se produit dans une annonce. Cette interface peut être implémentée par votre activité ou tout autre objet:

import com.google.android.gms.ads.admanager.*;

public class BannerExample extends Activity implements AppEventListener {
}

import com.google.android.gms.ads.admanager.*

class BannerExample : Activity(), AppEventListener {
}

puis transmis à AdManagerAdView:

AdManagerAdView.setAppEventListener(this);

AdManagerAdView.appEventListener = this

Voici un exemple qui montre comment modifier la couleur d'arrière-plan de votre application en fonction d'un événement d'application avec un nom de couleur:

@Override
public void onAppEvent(String name, String info) {
  if ("color".equals(name)) {
    if ("green".equals(info)) {
      // Set background color to green.
    } else if ("blue".equals(info)) {
      // Set background color to blue.
    } else {
      // Set background color to black.
    }
  }
}

override fun onAppEvent(name: String?, info: String?) {
    if (name == "color") {
        when (info) {
            "green" -> {
                // Set background color to green.
            }
            "blue" -> {
                // Set background color to blue.
            }
            else -> {
                // Set background color to black.
            }
        }
    }
}

Voici la création correspondante qui envoie des messages d'événement d'application de couleur à l'écouteur:

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0px;
      left: 0px;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

Consultez l'exemple d'événements d'application Ad Manager pour découvrir comment implémenter des événements d'application dans l'application de démonstration de l'API.

Java Kotlin

Ressources supplémentaires

Exemples sur GitHub

• Exemple d'annonces de bannières adaptatives ancrées : Java | Kotlin

• Démo des fonctionnalités avancées : Java | Kotlin

Étapes suivantes

Bannières réductibles

Les bannières réductibles sont des bannières qui sont initialement présentées sous la forme d'une superposition plus grande, avec un bouton permettant de réduire la bannière à une taille plus petite. Envisagez de l'utiliser pour optimiser davantage vos performances. Pour en savoir plus, consultez la section Bannières réductibles.

Bannières adaptatives intégrées

Les bannières adaptatives intégrées sont plus grandes et plus larges que les bannières adaptatives ancrées. Elles sont de hauteur variable et peuvent être aussi grandes que l'écran de l'appareil. Les bannières adaptatives intégrées sont recommandées aux applications qui placent des bannières publicitaires dans du contenu à faire défiler plutôt que les bannières adaptatives ancrées. Pour en savoir plus, consultez Bannières adaptatives intégrées.

Découvrir d'autres sujets

• Confidentialité des données des utilisateurs
• Optimisation de l'initialisation du SDK et du chargement des annonces (bêta)