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, 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 après un certain temps. Pour en savoir plus, consultez Présentation des bannières.

Ce guide vous explique comment faire vos premiers pas avec les bannières adaptatives ancrées, qui maximisent les performances en optimisant la taille d'annonce 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 les annonces standards de taille fixe. Le format est semblable à la norme du secteur : 320 x 50. Une fois que vous avez spécifié la largeur maximale disponible, vous obtenez une annonce dont la hauteur est optimale pour cette largeur. La hauteur optimale ne change pas entre les requêtes provenant d'un même appareil, et les vues environnantes n'ont pas besoin de bouger lors de l'actualisation de l'annonce.

Conditions préalables

• Suivez le guide de démarrage.

Toujours tester avec des annonces tests

Lorsque vous créez et testez vos applications, veillez à utiliser des annonces tests plutôt que des annonces de production en ligne. À 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é aux bannières Android:

/6499/example/adaptive-banner

Il a été spécialement configuré pour renvoyer des annonces tests 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 afficher une bannière, la première étape consiste à placer AdManagerAdView dans la mise en page du Activity ou du Fragment dans lequel vous souhaitez l'afficher :

Java

private AdSize getAdSize() {
  // Determine the screen width (less decorations) to use for the ad width.
  Display display = getWindowManager().getDefaultDisplay();
  DisplayMetrics outMetrics = new DisplayMetrics();
  display.getMetrics(outMetrics);

  float density = outMetrics.density;

  float adWidthPixels = adContainerView.getWidth();

  // If the ad hasn't been laid out, default to the full screen width.
  if (adWidthPixels == 0) {
    adWidthPixels = outMetrics.widthPixels;
  }

  int adWidth = (int) (adWidthPixels / density);
  return AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, adWidth);
}

private void loadBanner() {
  
  // Create a new ad view.
  AdManagerAdView adView = new AdManagerAdView(this);
  adView.setAdSizes(getAdSize());
  adView.setAdUnitId("/6499/example/adaptive-banner");

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

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

Kotlin

// Determine the screen width (less decorations) to use for the ad width.
// If the ad hasn't been laid out, default to the full screen width.
private val adSize: AdSize
  get() {
    val display = windowManager.defaultDisplay
    val outMetrics = DisplayMetrics()
    display.getMetrics(outMetrics)

    val density = outMetrics.density

    var adWidthPixels = binding.adViewContainer.width.toFloat()
    if (adWidthPixels == 0f) {
      adWidthPixels = outMetrics.widthPixels.toFloat()
    }

    val adWidth = (adWidthPixels / density).toInt()
    return AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, adWidth)
  }

private fun loadBanner() {
  
  // Create a new ad view.
  val adView = AdManagerAdView(this)
  adView.adSizes = adSize
  adView.adUnitId = "/6499/example/adaptive-banner"

  // Create an ad request.
  val adRequest = AdManagerAdRequest.Builder().build()

  // Start loading the ad in the background.
  adView.loadAd(adRequest)
}

Charger une annonce

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

Important :Effectuez tous les appels vers le SDK Mobile Ads sur le thread principal.

Voici un exemple qui montre comment charger une annonce dans la méthode onCreate() d'un Activity:

Java

private void loadBanner() {
  // 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);

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

Kotlin

private fun loadBanner() {
  // This is an ad unit ID for a test ad. Replace with your own banner ad unit ID.
  adView.adUnitId = "/6499/example/banner"
  adView.setAdSize(adSize)
  
  // Create an ad request.
  val adRequest = AdManagerAdRequest.Builder().build()

  // Start loading the ad in the background.
  adView.loadAd(adRequest)
}

Si votre annonce ne se charge pas, vous n'avez pas besoin d'en demander une autre de façon explicite tant que vous avez configuré l'actualisation de votre bloc d'annonces. Le SDK Google Mobile Ads respecte la fréquence d'actualisation que vous avez spécifiée Ad Manager dans l'interface Web. Si vous n'avez pas activé l'actualisation, vous devrez envoyer une nouvelle requête.

Conseil:Vous pouvez utiliser les appels de volume d'annonces pour créer un cache d'annonces préchargées avant de les diffuser, de sorte que les annonces puissent s'afficher sans latence en cas de besoin. Les annonces expirent au bout d'une heure. Vous devez donc vider ce cache et actualiser la page avec de nouvelles annonces toutes les heures.

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

Événements d'annonces

Vous pouvez écouter un certain nombre d'événements au cours du cycle de vie d'une annonce, y compris le chargement, les impressions et les clics sur l'annonce, ainsi que les événements d'ouverture et de fermeture de l'annonce. Nous vous recommandons de définir le rappel avant de charger la bannière.

Java

AdManagerAdView.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

AdManagerAdView.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 pouvant être remplacées dans AdListener correspond à un événement du cycle de vie d'une annonce.

Méthodes remplaçables
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 dans l'application après avoir consulté l'URL de destination d'une annonce. Votre application peut l'utiliser pour reprendre des activités suspendues ou effectuer toute autre tâche nécessaire pour se préparer à une interaction.
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 lorsque le chargement d'une annonce est terminé. Si vous souhaitez retarder l'ajout du AdManagerAdView à 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 des annonces vidéo s'affichent correctement dans vos bannières, vous devez activer l'accélération matérielle.

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 votre application ne se comporte pas correctement lorsque l'accélération matérielle est activée dans le monde entier, 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 d'accélération matérielle. Notez que les visionnages d'annonces individuels ne peuvent pas être activés pour l'accélération matérielle si l'activité est désactivée. L'accélération matérielle doit donc être activée pour l'activité elle-même.

Comptabilisation manuelle des impressions

La comptabilisation manuelle des impressions n'est compatible qu'avec les campagnes de vente directe et d'auto-promotion avec des créations dont le trafficking est effectué directement dans Ad Manager. Vous ne devez pas l'utiliser pour les annonces de remplissage ou les annonces de réseaux tiers. Pour en savoir plus, consultez la section Comptabiliser les impressions et les clics.

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

Java

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

Kotlin

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 une impression manuellement:

Java

AdManagerAdView.recordManualImpression();

Kotlin

AdManagerAdView.recordManualImpression()

Important :Les impressions sont normalement déclenchées lorsque le rappel onAdLoaded() est invoqué. Vous ne devez envisager d'utiliser cette fonctionnalité que si vous souhaitez enregistrer des impressions à un autre moment.

Événements d'application

Les événements d'application vous permettent de créer des annonces qui peuvent envoyer des messages au code de l'application. L'application peut ensuite effectuer des actions en fonction de ces messages.

Vous pouvez écouter des é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 que onAdLoaded() ne soit appelé.

Java

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

Kotlin

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:

Java

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

public class BannerExample extends Activity implements AppEventListener {
}

Kotlin

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

class BannerExample : Activity(), AppEventListener {
}

puis transmis à AdManagerAdView:

Java

AdManagerAdView.setAppEventListener(this);

Kotlin

AdManagerAdView.appEventListener = this

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

Java

@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.
    }
  }
}

Kotlin

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

Et voici la création correspondante qui envoie les messages d'événement d'application 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énement d'application Ad Manager pour découvrir une implémentation des événements d'application dans l'application de démonstration de l'API.

Java Kotlin

Autres ressources

Exemples sur GitHub

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

• Démonstration 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 l'annonce. Pensez à 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 grandes que les bannières adaptatives ancrées. Ils sont de hauteur variable et peuvent être aussi hauts que 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 affichent des bannières dans du contenu à faire défiler. Pour en savoir plus, consultez la section Bannières adaptatives intégrées.

Découvrir d'autres sujets

• Confidentialité des utilisateurs
• Initialisation du SDK et chargement des annonces Optimize (bêta)