Configurer des bannières publicitaires

Sélectionnez une plate-forme : Android (bêta) Nouveau 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 au 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 adaptative ancrée dans une application Android.

Prérequis

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 :

/21775744923/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 Google Mobile Ads SDK, consultez Activer les annonces tests.

Définir la vue d'annonce

Mise en page XML

Ajoutez une vue à votre fichier XML de mise en page pour qu'elle serve 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. Incluez le dossier JetpackCompose Utilities. Ce dossier inclut des assistants pour composer l'objet AdView et les éléments.

  2. Composez un AdView :


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

Définir la taille de l'annonce

Définissez le 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 a large anchored adaptive banner with a width of 360.
adView.setAdSize(AdSize.getLargeAnchoredAdaptiveBannerAdSize(this, 360))
MyActivity.kt

Jetpack Compose


// Set a large anchored adaptive banner ad size with a given width.
val adSize = AdSize.getLargeAnchoredAdaptiveBannerAdSize(LocalContext.current, 360)
adView.setAdSize(adSize)
AdManagerBannerScreen.kt

Ajouter AdManagerAdView à la mise en page

Créez un AdManagerAdView à l'aide de la taille d'annonce à ajouter à la mise en page de votre application :

Java


// Create a new ad view.
adView = new AdManagerAdView(this);
adView.setAdUnitId(AD_UNIT);
// 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 = AdManagerAdView(this)
adView.adUnitId = AD_UNIT_ID
// Request a large anchored adaptive banner with a width of 360.
adView.setAdSize(AdSize.getLargeAnchoredAdaptiveBannerAdSize(this, 360))
this.adView = adView

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

Jetpack Compose


val adView = remember { AdManagerAdView(context) }

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

// Set a large anchored adaptive banner ad size with a given width.
val adSize = AdSize.getLargeAnchoredAdaptiveBannerAdSize(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()) { AdManagerBannerAd(adView, modifier) }
}
AdManagerBannerScreen.kt

Charger une annonce

L'exemple suivant charge une bannière adaptative ancrée de 360 de largeur dans un objet AdManagerAdView :

Java

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

Kotlin

val adRequest = AdManagerAdRequest.Builder().build()
adView.loadAd(adRequest)
MyActivity.kt

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 SDK respecte la fréquence d'actualisation que vous avez spécifiée dans l'interface utilisateur 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, par exemple sur la définition d'une fréquence d'actualisation, consultez Fréquence d'actualisation des annonces dans les applications mobiles.

Libérer une ressource d'annonce

Lorsque vous avez terminé d'utiliser une bannière, 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 :

Java

public void destroyBanner() {
  // Remove banner from view hierarchy.
  if (adView != null) {
    View parentView = (View) adView.getParent();
    if (parentView instanceof ViewGroup) {
      ((ViewGroup) parentView).removeView(adView);
    }

    // Destroy the banner ad resources.
    adView.destroy();
  }

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

BannerSnippets.java

Kotlin

fun destroyBanner() {
  // 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
}

BannerSnippets.kt

Événements d'annonce

Vous pouvez écouter un certain nombre d'événements dans le cycle de vie de l'annonce, y compris le chargement, l'impression et le 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

if (adView != null) {
  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(@NonNull 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.
        }
      });
}
BannerSnippets.java

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

Chacune des méthodes remplaçables 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 à 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.
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 Déboguer les erreurs de chargement d'annonces documentation.
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 terminé de se charger. Si vous souhaitez retarder l'ajout de AdManagerAdView à votre activité ou fragment jusqu'à ce que vous soyez sûr qu'une annonce sera chargée, vous pouvez le faire ici, par exemple.
onAdOpened() La méthode onAdOpened() est appelée lorsqu'une annonce ouvre une superposition qui couvre 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, 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'android:hardwareAccelerated attribut pour les <application> et <activity> éléments dans votre AndroidManifest.xml. L'exemple suivant active l'accélération matérielle sur 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 les vues d'annonces individuelles ne peuvent pas être activées 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 vendues directement et les campagnes internes dont le trafficking des créations est effectué directement dans Ad Manager. Elle ne doit pas être utilisée pour les annonces de remplissage ni pour les réseaux tiers. Pour en savoir plus, consultez 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 :

Java

if (adManagerAdView != null) {
  adManagerAdView.setManualImpressionsEnabled(true);
}
BannerSnippets.java

Kotlin

adManagerAdView?.setManualImpressionsEnabled(true)
BannerSnippets.kt

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

Java

if (adManagerAdView != null) {
  adManagerAdView.recordManualImpression();
}
BannerSnippets.java

Kotlin

adManagerAdView?.recordManualImpression()
BannerSnippets.kt

Événements d'application

Les événements d'application vous permettent de créer des annonces qui peuvent envoyer des messages à leur code d'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 l'appel de onAdLoaded().

Définissez le AppEventListener sur votre AdManagerAdView :

Java

if (adManagerAdView != null) {
  adManagerAdView.setAppEventListener(this);
}
BannerSnippets.java

Kotlin

adManagerAdView?.appEventListener = this
BannerSnippets.kt

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

Java

@Override
public void onAppEvent(@NonNull String name, @NonNull String info) {
  if (name.equals("color")) {
    switch (info) {
      case "green":
        // Set background color to green.
        break;
      case "blue":
        // Set background color to blue.
        break;
      default:
        // Set background color to black.
        break;
    }
  }
}
BannerSnippets.java

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

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>

Pour obtenir une implémentation des événements d'application dans l'application de démonstration de l'API, consultez l'exemple d'événements d'application Ad Manager.

Java Kotlin JetpackCompose

É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 réduire l'annonce. 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 larges 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 placent des bannières dans du contenu à faire défiler. Pour en savoir plus, consultez Bannières adaptatives intégrées .

Découvrir d'autres sujets