Format natif avancé

Afficher une annonce native

Lorsqu'une annonce native est chargée, le SDK Google Mobile Ads appelle l'écouteur pour le format d'annonce correspondant. Votre application est ensuite chargée d'afficher l'annonce, mais elle n'est pas nécessairement tenue de le faire immédiatement. Pour faciliter l'affichage des formats d'annonces définis par le système, le SDK propose des ressources utiles, comme décrit ci-dessous.

Classe NativeAdView

Pour le format NativeAd, il existe la classe NativeAdView correspondante. Cette classe est un ViewGroup que les éditeurs doivent utiliser comme racine pour le NativeAd. Un seul NativeAdView correspond à une seule annonce native. Chaque vue utilisée pour afficher les composants de cette annonce (le ImageView qui affiche le composant de capture d'écran, par exemple) doit être un enfant de l'objet NativeAdView.

La hiérarchie des vues d'une annonce native qui utilise un LinearLayout pour afficher les vues de ses composants peut se présenter comme suit:

<com.google.android.gms.ads.nativead.NativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
    android:orientation="vertical">
        <LinearLayout
        android:orientation="horizontal">
          <ImageView
           android:id="@+id/ad_app_icon" />
          <TextView
            android:id="@+id/ad_headline" />
         </LinearLayout>
         <!--Add remaining assets such as the image and media view.-->
    </LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>

Voici un exemple qui crée un NativeAdView et le remplit avec un NativeAd:

Java

AdLoader.Builder builder = new AdLoader.Builder(this, "/21775744923/example/native")
    .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
        @Override
        public void onNativeAdLoaded(NativeAd nativeAd) {
            // Assumes you have a placeholder FrameLayout in your View layout
            // (with ID fl_adplaceholder) where the ad is to be placed.
            FrameLayout frameLayout =
                findViewById(R.id.fl_adplaceholder);
            // Assumes that your ad layout is in a file call native_ad_layout.xml
            // in the res/layout folder
            NativeAdView adView = (NativeAdView) getLayoutInflater()
                .inflate(R.layout.native_ad_layout, null);
            // This method sets the assets into the ad view.
            populateNativeAdView(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

Kotlin

val builder = AdLoader.Builder(this, "/21775744923/example/native")
    .forNativeAd { nativeAd ->
        // Assumes you have a placeholder FrameLayout in your View layout
        // (with ID fl_adplaceholder) where the ad is to be placed.
        val frameLayout: FrameLayout = findViewById(R.id.fl_adplaceholder)
        // Assumes that your ad layout is in a file call native_ad_layout.xml
        // in the res/layout folder
        val adView = layoutInflater
                .inflate(R.layout.native_ad_layout, null) as NativeAdView
        // This method sets the assets into the ad view.
        populateNativeAdView(nativeAd, adView)
        frameLayout.removeAllViews()
        frameLayout.addView(adView)
    }

Notez que tous les composants d'une annonce native donnée doivent être affichés dans la mise en page NativeAdView. Le SDK Google Mobile Ads tente d'enregistrer un avertissement lorsque des composants d'annonces natives sont affichés en dehors d'une mise en page de vue d'annonce native.

Les classes de vue d'annonce fournissent également des méthodes permettant d'enregistrer la vue utilisée pour chaque composant individuel, et une pour enregistrer l'objet NativeAd lui-même. Enregistrer les vues de cette manière permet au SDK de gérer automatiquement des tâches telles que:

  • Enregistrer les clics
  • Enregistrer les impressions lorsque le premier pixel est visible à l'écran
  • Affichage de la superposition AdChoices pour les créations natives de remplissage (actuellement limité à un groupe restreint d'éditeurs)

Superposition "Choisir sa pub"

Une superposition Choisir sa pub est ajoutée en tant que vue d'annonce par le SDK lorsqu'une annonce de remplissage est renvoyée. Si votre application utilise le remplissage des annonces natives, laissez de l'espace dans le coin de votre choix de la vue de l'annonce native pour le logo AdChoices inséré automatiquement. Il est également important que la superposition "Choisir sa pub" soit visible. Choisissez donc des couleurs et des images d'arrière-plan appropriées. Pour en savoir plus sur l'apparence et le fonctionnement de la superposition, consultez les consignes d'implémentation des annonces natives programmatiques.

Attribution des annonces pour les annonces natives programmatiques

Lorsque vous diffusez des annonces natives programmatiques, vous devez afficher une attribution d'annonce pour indiquer que la vue est une publicité. Pour en savoir plus, consultez nos Consignes concernant le règlement.

Exemple de code

Pour diffuser une annonce native, procédez comme suit:

  1. Créez une instance de la classe NativeAdView.

  2. Pour chaque composant d'annonce à afficher:

    1. Renseignez la vue d'éléments avec l'élément de l'objet d'annonce.
    2. Enregistrez la vue d'élément avec la classe NativeAdView.

  3. Enregistrez MediaView si la mise en page de votre annonce native inclut un élément multimédia volumineux.

  4. Enregistrez l'objet d'annonce avec la classe NativeAdView.

Voici un exemple de fonction qui affiche un NativeAd:

Java

private void displayNativeAd(ViewGroup parent, NativeAd ad) {

  // Inflate a layout and add it to the parent ViewGroup.
  LayoutInflater inflater = (LayoutInflater) parent.getContext()
          .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  NativeAdView adView = (NativeAdView) inflater
          .inflate(R.layout.ad_layout_file, parent);

  // Locate the view that will hold the headline, set its text, and call the
  // NativeAdView's setHeadlineView method to register it.
  TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
  headlineView.setText(ad.getHeadline());
  adView.setHeadlineView(headlineView);

  // Repeat the process for the other assets in the NativeAd
  // using additional view objects (Buttons, ImageViews, etc).

  // If the app is using a MediaView, it should be
  // instantiated and passed to setMediaView. This view is a little different
  // in that the asset is populated automatically, so there's one less step.
  MediaView mediaView = (MediaView) adView.findViewById(R.id.ad_media);
  adView.setMediaView(mediaView);

  // Call the NativeAdView's setNativeAd method to register the
  // NativeAdObject.
  adView.setNativeAd(ad);

  // Ensure that the parent view doesn't already contain an ad view.
  parent.removeAllViews();

  // Place the AdView into the parent.
  parent.addView(adView);
}

Kotlin

fun displayNativeAd(parent: ViewGroup, ad: NativeAd) {

  // Inflate a layout and add it to the parent ViewGroup.
  val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
          as LayoutInflater
  val adView = inflater.inflate(R.layout.ad_layout_file, parent) as NativeAdView

  // Locate the view that will hold the headline, set its text, and use the
  // NativeAdView's headlineView property to register it.
  val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
  headlineView.text = ad.headline
  adView.headlineView = headlineView

  // Repeat the process for the other assets in the NativeAd using
  // additional view objects (Buttons, ImageViews, etc).

  val mediaView = adView.findViewById<MediaView>(R.id.ad_media)
  adView.mediaView = mediaView

  // Call the NativeAdView's setNativeAd method to register the
  // NativeAdObject.
  adView.setNativeAd(ad)

  // Ensure that the parent view doesn't already contain an ad view.
  parent.removeAllViews()

  // Place the AdView into the parent.
  parent.addView(adView)
}

Voici les tâches individuelles:

  1. Gonfler la mise en page

    Java

    LayoutInflater inflater = (LayoutInflater) parent.getContext()
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
NativeAdView adView = (NativeAdView) inflater
        .inflate(R.layout.ad_layout_file, parent);

    Kotlin

    val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
        as LayoutInflater
val adView = inflater.inflate(R.layout.ad_layout_file, parent) as NativeAdView

    Ce code gonfle une mise en page XML contenant des vues permettant d'afficher une annonce native, puis de localiser une référence à NativeAdView. Notez que vous pouvez également réutiliser un NativeAdView existant s'il y en a un dans votre fragment ou votre activité, ou même créer une instance de manière dynamique sans utiliser de fichier de mise en page.

  2. Remplir et enregistrer les vues des composants

    Cet exemple de code localise la vue utilisée pour afficher le titre, définit son texte à l'aide du composant de chaîne fourni par l'objet d'annonce et l'enregistre avec l'objet NativeAdView:

    Java

    TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
headlineView.setText(ad.getHeadline());
adView.setHeadlineView(headlineView);

    Kotlin

    val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
headlineView.text = ad.headline
adView.headlineView = headlineView

    Ce processus de localisation de la vue, de définition de sa valeur et de son enregistrement auprès de la classe de vue d'annonce doit être répété pour chacun des composants fournis par l'objet d'annonce native que l'application affichera.

  3. Gérer les clics

    N'implémentez pas de gestionnaires de clics personnalisés sur les vues au-dessus ou dans la vue d'annonce native. Les clics sur les composants de vue d'annonce sont gérés par le SDK tant que vous remplissez et enregistrez correctement les vues d'éléments, comme indiqué dans la section précédente.

    Pour écouter les clics, implémentez le rappel de clic du SDK Google Mobile Ads:

    Java

    AdLoader adLoader = new AdLoader.Builder(context, "/21775744923/example/native")
    // ...
    .withAdListener(new AdListener() {
        @Override
        public void onAdFailedToLoad(LoadAdError adError) {
            // Handle the failure by logging.
        }
        @Override
        public void onAdClicked() {
            // Log the click event or other custom behavior.
        }
    })
    .build();

    Kotlin

    val adLoader = AdLoader.Builder(this, "/21775744923/example/native")
    // ...
    .withAdListener(object : AdListener() {
        override fun onAdFailedToLoad(adError: LoadAdError) {
            // Handle the failure.
        }
        override fun onAdClicked() {
            // Log the click event or other custom behavior.
        }
    })
    .build()

  4. Enregistrer MediaView

    Vous devez utiliser l'asset MediaView plutôt que l'asset ImageView si vous souhaitez inclure une image principale dans la mise en page de votre annonce native.

    MediaView est un View spécial conçu pour afficher l'élément multimédia principal, qu'il s'agisse d'une vidéo ou d'une image.

    MediaView peut être défini dans une mise en page XML ou construit de manière dynamique. Il doit être placé dans la hiérarchie des vues d'un NativeAdView, comme n'importe quelle autre vue d'éléments. Les applications qui utilisent un MediaView doivent l'enregistrer auprès du NativeAdView:

    Java

     // Populate and register the media asset view.
 nativeAdView.setMediaView(nativeAdBinding.adMedia);

    Kotlin

     // Populate and register the media asset view.
 nativeAdView.mediaView = nativeAdBinding.adMedia

    ImageScaleType

    La classe MediaView possède une propriété ImageScaleType lors de l'affichage d'images. Si vous souhaitez modifier la mise à l'échelle d'une image dans le MediaView, définissez le ImageView.ScaleType correspondant à l'aide de la méthode setImageScaleType() du MediaView:

    Java

    mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);

    Kotlin

    mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP

    MediaContent

    La classe MediaContent contient les données liées au contenu multimédia de l'annonce native, qui est affichée à l'aide de la classe MediaView. Lorsque la propriété mediaContent MediaView est définie avec une instance MediaContent:

    • Si un élément vidéo est disponible, il est mis en mémoire tampon et commence à être lu dans MediaView. Pour savoir si un élément vidéo est disponible, vérifiez hasVideoContent().

    • Si l'annonce ne contient pas d'asset vidéo, l'asset mainImage est téléchargé et placé dans le MediaView à la place.

    Par défaut, mainImage est le premier composant Image téléchargé. Si setReturnUrlsForImageAssets(true) est utilisé, mainImage est null et vous devez définir la propriété mainImage sur l'image téléchargée manuellement. Notez que cette image n'est utilisée que lorsqu'aucun élément vidéo n'est disponible.

  5. Enregistrer l'objet d'annonce native

    Cette dernière étape enregistre l'objet d'annonce native auprès de la vue chargée de l'afficher.

    Java

    adView.setNativeAd(ad);

    Kotlin

    adView.setNativeAd(ad)

Supprimer l'annonce

Lorsque vous avez terminé de diffuser votre annonce native, vous devez la détruire pour qu'elle soit correctement collectée.

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()

Tester le code des annonces natives

Annonces vendues directement

Si vous souhaitez tester les annonces natives vendues directement, vous pouvez utiliser cet ID de bloc d'annonces Ad Manager:

/21775744923/example/native

Il est configuré pour diffuser des exemples d'annonces incitant à installer une application et d'annonces de contenu, ainsi qu'un format d'annonce native personnalisé avec les composants suivants:

  • Titre (texte)
  • MainImage (image)
  • Caption (text) (Légende, texte)

L'ID de modèle du format d'annonce native personnalisé est 10063170.

Annonces natives de remplissage

Le remplissage par Ad Exchange est limité à un groupe restreint d'éditeurs. Pour tester le comportement des annonces natives de remplissage, utilisez ce bloc d'annonces Ad Manager:

/21775744923/example/native-backfill

Il diffuse des exemples d'annonces incitant à installer une application et d'annonces de contenu qui incluent la superposition AdChoices.

N'oubliez pas de modifier votre code pour qu'il fasse référence à votre bloc d'annonces et à vos ID de modèle réels avant de le mettre en ligne.

Exemples sur GitHub

Exemple d'implémentation complète d'annonces natives:

Java Kotlin

Étapes suivantes

Consultez les sujets suivants: