Partagez vos commentaires sur le SDK GMA Next-Gen sur le canal Discord #gma-next-gen-sdk du serveur de la communauté Google Advertising and Measurement.

Implémenter des annonces icône

Les annonces avec icône sont de petits emplacements d'icônes d'application qui complètent l'expérience utilisateur du système d'exploitation. Elles sont flexibles et peuvent accompagner la plupart des activités au niveau du système d'exploitation, comme l'écran de verrouillage et l'écran de partage. Vous pouvez afficher des annonces avec icône individuellement ou dans plusieurs groupes. Chaque annonce fournit un ensemble d'éléments de texte et de chaîne que votre application est chargée de générer. Les images suivantes montrent des annonces avec icône affichées dans un dossier d'application :

Ce guide vous explique comment demander et afficher des annonces avec icône.

Prérequis

Avant de commencer, vous devez disposer de GMA Next-Gen SDK 0.8.0-alpha01 ou version ultérieure.

Toujours tester 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. Si vous n'utilisez pas d'annonces tests, votre compte pourrait être suspendu.

Pour obtenir des annonces tests, utilisez vos blocs d'annonces et activez les appareils de test, ou utilisez l'ID de bloc d'annonces de test dédié suivant pour les annonces avec icône Android :

ca-app-pub-3940256099942544/1476272466

Pour en savoir plus sur les annonces tests GMA Next-Gen SDK, consultez Activer les annonces tests.

Charger une annonce avec icône

Chargez une annonce avec icône avec votre demande d'annonce avec icône et gérez les événements de chargement d'annonce :

Kotlin

private fun loadIconAd() {
  val request =
    IconAdRequest.Builder(AD_UNIT_ID)
      // The "AdChoices" badge is rendered at the top right corner of the icon ad
      // if left unspecified.
      .setAdChoicesPlacement(AdChoicesPlacement.BOTTOM_RIGHT)
      // It is recommended to specify the placement of your icon ad
      // to help Google optimize your icon ad performance.
      .setIconAdPlacement(IconAdPlacement.BROWSER)
      .build()

  IconAd.load(
    request,
    object : AdLoadCallback<IconAd> {
      override fun onAdFailedToLoad(adError: LoadAdError) {
        Log.w(Constant.TAG, "Icon ad failed to load: $adError")
        showToast("Icon ad failed to load.")
      }

      override fun onAdLoaded(ad: IconAd) {
        Log.d(Constant.TAG, "Icon ad loaded")
        // Always call destroy() on ads on removal.
        iconAd?.destroy()
        iconAd = ad
        setAdEventCallback(ad)
        displayIconAd(ad)
      }
    },
  )
}
IconAdFragment.kt

Java

private void loadIconAd() {
  IconAdRequest request =
      new IconAdRequest.Builder(AD_UNIT_ID)
          // The "AdChoices" badge is rendered at the top right corner of the icon ad
          // if left unspecified.
          .setAdChoicesPlacement(AdChoicesPlacement.BOTTOM_RIGHT)
          // It is recommended to specify the placement of your icon ad
          // to help Google optimize your icon ad performance.
          .setIconAdPlacement(IconAdPlacement.BROWSER)
          .build();

  IconAd.load(
      request,
      new AdLoadCallback<IconAd>() {
        @Override
        public void onAdFailedToLoad(@NonNull LoadAdError adError) {
          Log.w(Constant.TAG, "Icon ad failed to load :" + adError);
          showToast("Icon ad failed to load with error code: " + adError.getCode());
        }

        @Override
        public void onAdLoaded(@NonNull IconAd ad) {
          Log.d(Constant.TAG, "Icon ad loaded.");

          // Always call destroy() on ads on removal.
          if (iconAd != null) {
              iconAd.destroy();
          }
          iconAd = ad;
          setAdEventCallback(ad);
          displayIconAd(ad);
        }
      });
}
IconAdFragment.java

Créer une vue d'annonce avec icône

Les annonces avec icône doivent utiliser IconAdView comme élément racine pour leurs assets. Dans la vue d'annonce avec icône, placez tous les éléments visuels de votre annonce.

L'exemple suivant montre une mise en page permettant de créer une vue pour une annonce avec icône :

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.libraries.ads.mobile.sdk.iconad.IconAdView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

  <LinearLayout
      android:id="@+id/icon_ad_container"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:background="#00FFC107"
      android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
      <TextView
          android:id="@+id/ad_badge"
          android:width="15dp"
          android:height="15dp"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:background="#FFC107"
          android:text="Ad"
          android:textColor="#FFFFFF"
          android:textSize="12sp" />
      <TextView
          android:id="@+id/ad_headline"
          android:textStyle="normal"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_gravity="center"
          android:autoText="true"
          android:inputType="text|textMultiLine"
          android:textColor="#808080"
          android:textSize="12sp" />
    </LinearLayout>

    <com.google.android.material.imageview.ShapeableImageView xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/ad_icon"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        android:background="@android:color/holo_green_light"
        android:contentDescription="@string/content_description_icon_ad"
        android:theme="@style/Theme.AppCompat.Light"
        app:shapeAppearanceOverlay="@style/roundedCorners"
        app:strokeColor="@null" />

    <RatingBar
        android:id="@+id/ad_stars"
        style="?android:attr/ratingBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:isIndicator="true"
        android:numStars="5"
        android:stepSize="0.5" />
    <Button
        android:id="@+id/ad_call_to_action"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:textSize="12sp" />
  </LinearLayout>

</com.google.android.libraries.ads.mobile.sdk.iconad.IconAdView>

Afficher l'annonce avec icône à l'écran

Pour afficher l'annonce avec icône à l'écran, procédez comme suit :

Développez la vue d'annonce avec icône et ajoutez-la à votre hiérarchie de vues.
Remplissez chaque vue enfant avec l'asset d'annonce avec icône correspondant.

L'exemple suivant couvre les étapes précédentes pour afficher l'annonce avec icône à l'écran :

Kotlin

val iconAdViewBinding = IconAdBinding.inflate(layoutInflater)
// Add the ad view to the active view hierarchy.
binding.iconAdContainer.addView(iconAdViewBinding.root)
val iconAdView = iconAdViewBinding.root

// Populate the view elements with their respective icon ad asset.
iconAdView.callToActionView = iconAdViewBinding.adCallToAction
iconAdView.headlineView = iconAdViewBinding.adHeadline
iconAdView.iconView = iconAdViewBinding.adIcon
iconAdView.starRatingView = iconAdViewBinding.adStarsIconAdFragment.kt

Java

IconAdBinding iconAdViewBinding = IconAdBinding.inflate(getLayoutInflater());
// Add the ad view to the active view hierarchy.
binding.iconAdContainer.addView(iconAdViewBinding.getRoot());
IconAdView iconAdView = iconAdViewBinding.getRoot();

// Populate the view elements with their respective icon ad asset.
iconAdView.setCallToActionView(iconAdViewBinding.adCallToAction);
iconAdView.setHeadlineView(iconAdViewBinding.adHeadline);
iconAdView.setIconView(iconAdViewBinding.adIcon);
iconAdView.setStarRatingView(iconAdViewBinding.adStars);IconAdFragment.java

Rendre l'annonce avec icône cliquable

Le GMA Next-Gen SDK enregistre des écouteurs de clics pour chaque vue d'asset qui est mappée lorsque registerIconAd() est appelé. Mappez les propriétés de la vue d'annonce avec icône sur la vue correspondante dans votre hiérarchie de vues avant d'enregistrer l'annonce avec icône :

Kotlin

// Map each asset view property to the corresponding view in your view hierarchy.
iconAdViewBinding.adCallToAction.text = iconAd.callToAction
iconAdViewBinding.adHeadline.text = iconAd.headline
iconAdViewBinding.adIcon.setImageDrawable(iconAd.icon.drawable)
iconAd.starRating?.toFloat().also { value ->
  if (value != null) {
    iconAdViewBinding.adStars.rating = value
  }
}

// Register the icon ad with the view presenting it.
iconAdView.registerIconAd(iconAd)IconAdFragment.kt

Java

// Map each asset view property to the corresponding view in your view hierarchy.
iconAdViewBinding.adCallToAction.setText(iconAd.getCallToAction());
iconAdViewBinding.adHeadline.setText(iconAd.getHeadline());
iconAdViewBinding.adIcon.setImageDrawable(iconAd.getIcon().getDrawable());

if (iconAd.getStarRating() != null) {
  iconAdViewBinding.adStars.setRating(iconAd.getStarRating().floatValue());
}

// Register the icon ad with the view presenting it.
iconAdView.registerIconAd(iconAd);IconAdFragment.java

Facultatif : Définir le rappel d'événement d'annonce avec icône

Pour gérer les événements de cycle de vie des annonces avec icône, définissez le rappel d'événement :

Kotlin

iconAd.adEventCallback =
  object : IconAdEventCallback {
    override fun onAdShowedFullScreenContent() {
      // Icon ad showed full screen content.
    }

    override fun onAdDismissedFullScreenContent() {
      // Icon ad dismissed full screen content.
    }

    override fun onAdFailedToShowFullScreenContent(
      fullScreenContentError: FullScreenContentError
    ) {
      // Icon ad failed to show full screen content.
    }

    override fun onAdImpression() {
      // Icon ad recorded an impression.
    }

    override fun onAdClicked() {
      // Icon ad recorded a click.
    }

    override fun onAdPaid(value: AdValue) {
      // Icon ad estimated to have earned money.
    }
  }IconAdFragment.kt

Java

iconAd.setAdEventCallback(
    new IconAdEventCallback() {
      @Override
      public void onAdShowedFullScreenContent() {
        // Icon ad showed full screen content.
      }

      @Override
      public void onAdDismissedFullScreenContent() {
        // Icon ad dismissed full screen content.
      }

      @Override
      public void onAdFailedToShowFullScreenContent(
          @NonNull FullScreenContentError fullScreenContentError) {
        // Icon ad failed to show full screen content.
      }

      @Override
      public void onAdImpression() {
        // Icon ad recorded an impression.
      }

      @Override
      public void onAdClicked() {
        // Icon ad recorded a click.
      }

      @Override
      public void onAdPaid(@NonNull AdValue value) {
        // Icon ad estimated to have earned money.
      }
    });IconAdFragment.java

Optimiser les performances

Les sections suivantes décrivent les étapes d'implémentation facultatives permettant d'optimiser les performances des annonces avec icône.

Utiliser un corrélateur pour charger plusieurs annonces

Lorsque vous chargez plusieurs annonces avec icône à afficher ensemble, effectuez des requêtes séquentielles en utilisant la même valeur de corrélateur pour vous assurer que les annonces chargées sont uniques. La durée de vie du corrélateur est de 10 secondes. Le serveur ne considère pas les requêtes effectuées à plus de 10 secondes d'intervalle comme corrélées.

L'exemple suivant montre comment définir une valeur de corrélateur dans la demande d'annonce :

Kotlin

val correlator = Correlator.generateCorrelator()
val request =
      IconAdRequest.Builder("ca-app-pub-3940256099942544/1476272466")
        .setCorrelator(correlator)
        .build()

Java

Correlator correlator = Correlator.generateCorrelator();
IconAdRequest request =
    new IconAdRequest.Builder("ca-app-pub-3940256099942544/1476272466")
        .setCorrelator(correlator)
        .build();

Définir un emplacement d'annonce avec icône

Pour aider Google à comprendre l'emplacement de votre annonce avec icône afin d'optimiser ses performances, il est recommandé de spécifier où vous comptez afficher les annonces avec icône au moment de la requête.

Utilisez la valeur d'énumération IconAdPlacement qui représente le mieux votre cas d'utilisation :

Kotlin

val request =
  IconAdRequest.Builder("ca-app-pub-3940256099942544/1476272466")
    .setIconAdPlacement(IconAdPlacement.BROWSER)
    .build()

Java

IconAdRequest request =
    new IconAdRequest.Builder("ca-app-pub-3940256099942544/1476272466")
        .setIconAdPlacement(IconAdPlacement.BROWSER)
        .build();

Implémenter des annonces icône Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Prérequis

Toujours tester avec des annonces tests

Charger une annonce avec icône

Kotlin

Java

Créer une vue d'annonce avec icône

Afficher l'annonce avec icône à l'écran

Kotlin

Java

Rendre l'annonce avec icône cliquable

Kotlin

Java

Facultatif : Définir le rappel d'événement d'annonce avec icône

Kotlin

Java

Optimiser les performances

Utiliser un corrélateur pour charger plusieurs annonces

Kotlin

Java

Définir un emplacement d'annonce avec icône

Kotlin

Java

Implémenter des annonces icône