Natif avancé

Afficher une annonce native

Lors du chargement d'une annonce native, le SDK Google Mobile Ads appelle l'écouteur pour le format d'annonce correspondant. Votre application se charge ensuite d'afficher l'annonce, même si elle ne doit pas nécessairement 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écrites 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 de NativeAd. Un seul élément NativeAdView correspond à une seule annonce native. Chaque vue utilisée pour afficher les éléments de cette annonce (l'ImageView qui affiche l'élément 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 élément LinearLayout pour afficher les vues d'éléments 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>


         // Other assets such as image or media view, call to action, etc follow.
         ...
    </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, "AD_UNIT_ID")
    .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 text, images and the native ad, etc into the ad
            // view.
            populateNativeAdView(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

Kotlin

val builder = AdLoader.Builder(this, "AD_UNIT_ID")
    .forNativeAd { nativeAd ->
        // 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 text, images and the native ad, etc into the ad
        // view.
        populateNativeAdView(nativeAd, adView)
        // Assumes you have a placeholder FrameLayout in your View layout
        // (with id ad_frame) where the ad is to be placed.
        ad_frame.removeAllViews()
        ad_frame.addView(adView)
    }

Notez que tous les éléments d'une annonce native donnée doivent s'afficher dans la mise en page NativeAdView. Le SDK Google Mobile Ads tente de générer un avertissement lorsque les assets natifs sont affichés en dehors d'une mise en page d'une vue d'annonce native.

Les classes de vues d'annonces fournissent également des méthodes permettant d'enregistrer la vue utilisée pour chaque élément individuel et une autre permettant d'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:

  • Enregistrement des clics
  • Enregistrer des impressions lorsque le premier pixel est visible à l'écran
  • Afficher la superposition "Choisir sa pub" pour les annonces de remplissage natives (actuellement limitée à un groupe restreint d'éditeurs)

Superposition "Choisir sa pub"

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

Attribution d'annonces pour les annonces natives programmatiques

Lorsque vous affichez 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 relatives à notre règlement.

Exemple de code

Pour afficher 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 de l'élément avec l'élément dans l'objet d'annonce.
    2. Enregistrez la vue de l'élément avec la classe ViewGroup.
  3. Enregistrez le MediaView si la mise en page de votre annonce native inclut un asset média volumineux.
  4. Enregistrez l'objet d'annonce avec la classe ViewGroup.

Voici un exemple de fonction qui affiche un élément 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 above 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 above 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 différentes tâches à effectuer:

  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 pour afficher une annonce native, puis localise une référence à NativeAdView. Notez que vous pouvez également réutiliser un NativeAdView existant si votre fragment ou votre activité en contient un, 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 d'éléments

    Cet exemple de code localise la vue utilisée pour afficher le titre, définit son texte à l'aide de l'élément de chaîne fourni par l'objet d'annonce, puis 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 consistant à localiser la vue, à définir sa valeur et à l'enregistrer avec la classe d'affichage de l'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 aucun gestionnaire de clics personnalisé sur des vues au-dessus ou dans l'affichage de l'annonce native. Pour observer vous-même les événements de clic, utilisez l'écouteur d'annonces.

    Les clics sur les éléments de vue d'annonce sont gérés par le SDK, à condition que vous remplissiez et enregistrez correctement les vues d'éléments, comme indiqué dans la section précédente.

    Voici un exemple qui utilise un écouteur d'annonces pour observer les événements de clic:

    Java

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

    Kotlin

    val adLoader = AdLoader.Builder(this, "/6499/example/native")
    ...
    .withAdListener(object : AdListener() {
        override fun onAdFailedToLoad(adError: LoadAdError) {
            // Handle the failure by logging, altering the UI, and so on.
        }
    })
    .build()

  4. Enregistrer la MediaView

    Vous devez utiliser l'élément MediaView au lieu de l'élément ImageView si vous souhaitez inclure un composant Image principal dans la mise en page de votre annonce native.

    MediaView est un View spécial conçu pour afficher l'asset 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ément. Les applications qui utilisent un MediaView doivent l'enregistrer auprès de NativeAdView:

    Java

    MediaView mediaView = adView.findViewById(R.id.ad_media);
adView.setMediaView(mediaView);

    Kotlin

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

    Comme pour toutes les vues d'éléments, le contenu de la vue multimédia doit être renseigné. Pour ce faire, utilisez la méthode getMediaContent() pour récupérer le contenu multimédia pouvant être transmis à un MediaView. Voici un extrait de code définissant le contenu multimédia pour la vue multimédia:

    Java

    mediaView.setMediaContent(nativeAd.getMediaContent());

    Kotlin

    mediaView.mediaContent = nativeAd.mediaContent

    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 MediaView, définissez le ImageView.ScaleType correspondant à l'aide de la méthode setImageScaleType() de 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 s'affiche à l'aide de la classe MediaView. Lorsque la propriété MediaView mediaContent est définie avec une instance MediaContent:

    • Si un asset vidéo est disponible, il est mis en mémoire tampon et sa lecture commence dans MediaView. Pour savoir si un asset 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 MediaView.

    Par défaut, mainImage est le premier composant Image téléchargé. Si setReturnUrlsForImageAssets(true) est utilisé, mainImage est défini sur 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 asset vidéo n'est disponible.

  5. Enregistrer l'objet d'annonce native

    Cette dernière étape enregistre l'objet d'annonce native dans la vue chargée de l'afficher:

    Java

    adView.setNativeAd(ad);

    Kotlin

    adView.setNativeAd(ad)

Détruire l'annonce

Lorsque vous avez terminé de diffuser votre annonce native, vous devez la détruire pour que la corbeille soit correctement récupérée.

Java

nativeAd.destroy();
        .inflate(R.layout.ad_layout_file, parent);

Kotlin

nativeAd.destroy()

Tester le code d'annonce natif

Annonces vendues directement

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

/6499/example/native

Elle est configurée 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 éléments suivants:

  • Titre (texte)
  • MainImage (image)
  • Légende (texte)

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

Annonces de remplissage natives

Les annonces de remplissage Ad Exchange sont actuellement réservées à un groupe restreint d'éditeurs. Pour tester le comportement des annonces de remplissage natives, utilisez ce bloc d'annonces Ad Manager:

/6499/example/native-backfill

Elle diffuse des exemples d'annonces incitant à installer une application et d'annonces de contenu qui incluent la superposition "Choisir sa pub".

Avant de le mettre en ligne, n'oubliez pas de mettre à jour votre code pour qu'il fasse référence aux ID de modèle et de bloc d'annonces réels.

Exemples sur GitHub

Exemple d'intégration complète d'annonces natives:

Java Kotlin

Étapes suivantes

Explorez les sujets suivants: