Cette page a été traduite par l'API Cloud Translation.

Format natif avancé

Afficher une annonce native

Lors du chargement d'une annonce native, le SDK Google Mobile Ads appelle l'écouteur de l'événement 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 le format NativeAdView . Ce cours est un ViewGroup que les éditeurs doivent utiliser comme racine pour NativeAd. A NativeAdView correspond à une seule annonce native. Chaque vue utilisée pour afficher les composants de cette annonce (l'ImageView qui affiche les un asset capture d'écran, par exemple) doit être un enfant de NativeAdView. .

Hiérarchie des vues d'une annonce native qui utilise un LinearLayout pour afficher les vues de ses composants, par exemple:

<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 une 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 ê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. Cet enregistrement des vues permet au SDK de gérer automatiquement les tâches par exemple:

Enregistrement des clics
Enregistrement des impressions lorsque le premier pixel est visible à l'écran
Afficher la superposition "Choisir sa pub" pour les annonces de remplissage natives créations (actuellement réservé à 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 des annonces de remplissage natives, laissez de l'espace dans l'espace publicitaire d'angle de la vue de votre annonce native pour le logo "Choisir sa pub" inséré automatiquement. Il est également 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 la superposition et leur fonction, consultez l'article Mettre en œuvre des annonces natives programmatiques consignes.

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 notre Règlement consignes.

Exemple de code

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

Créez une instance de la classe NativeAdView.
Pour chaque composant d'annonce à afficher:
1. Renseignez la vue du composant avec celui-ci dans l'objet d'annonce.
2. Enregistrez la vue d'élément avec la classe ViewGroup.
Enregistrez le MediaView si la mise en page de votre annonce native comprend un asset multimédia de grande taille.
Enregistrez l'objet d'annonce avec la classe ViewGroup.

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 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 tâches à effectuer:

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 afin d'afficher une annonce native l'annonce, puis 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.

Renseigner et enregistrer les vues de l'élément

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 avec la classe Ad view doit être répétée pour chacun des éléments fournis par l'objet d'annonce natif que l'application affichera.

Gérer les clics

N'implémentez pas de gestionnaires de clics personnalisés sur des vues au-dessus ou dans le le visionnage de l'annonce native. Pour observer vous-même les événements de clic, utilisez l'annonce écouteur.

Les clics sur les éléments de visionnage d'annonce sont gérés par le SDK, à condition que vous pour remplir et enregistrer les vues de l'élément, comme indiqué dans la section précédente.

Voici un exemple d'utilisation d'une annonce l'écouteur d'observer événements de clic:

Java

AdLoader adLoader = new AdLoader.Builder(context, "/21775744923/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, "/21775744923/example/native")
    ...
    .withAdListener(object : AdListener() {
        override fun onAdFailedToLoad(adError: LoadAdError) {
            // Handle the failure by logging, altering the UI, and so on.
        }
    })
    .build()

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'asset multimédia principal, une vidéo ou 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 élément NativeAdView, comme n'importe quelle d'une autre vue d'éléments. Les applications qui utilisent un MediaView doivent l'enregistrer auprès du 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() afin de récupérer le contenu multimédia pouvant être transmis à un MediaView. Voici un extrait de code définissant le contenu multimédia vue:
Java
```
mediaView.setMediaContent(nativeAd.getMediaContent());
```
Kotlin
```
mediaView.mediaContent = nativeAd.mediaContent
```
ImageScaleType

La classe MediaView comporte une propriété ImageScaleType lors de l'affichage images. Si vous souhaitez modifier la mise à l'échelle d'une image dans MediaView, définissez le ImageView.ScaleType correspondant à l'aide de 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'objet annonce native, qui s'affiche à l'aide de la classe MediaView. Lorsque La propriété mediaContent MediaView 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 MediaView Pour savoir si un asset vidéo est disponible, consultez hasVideoContent()
- Si l'annonce ne contient aucun asset vidéo, l'asset mainImage est téléchargé et placé dans 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éfinissez la propriété mainImage sur l'image téléchargée manuellement. Notez que cette l'image ne sera utilisée que si aucun asset vidéo n'est disponible.
Enregistrer l'objet d'annonce native

Cette dernière étape enregistre l'objet d'annonce native avec 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 d'annonce natif

Annonces vendues directement

Pour découvrir à quoi ressemblent les annonces natives vendues directement, 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 de contenu, format personnalisé d'annonce native avec les éléments suivants:

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

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

Annonces natives de remplissage

Pour le moment, les annonces de remplissage Ad Exchange sont limitées à un groupe restreint d'éditeurs. À pour tester le comportement des annonces de remplissage natives, utilisez ce bloc d'annonces Ad Manager:

/21775744923/example/native-backfill

Il permet de diffuser des exemples d'annonces incitant à installer une application et d'annonces de contenu qui incluent la section "Choisir sa pub". superposition.

N'oubliez pas de mettre à jour votre code afin qu'il fasse référence à vos véritables ID de bloc d'annonces et de modèle. avant de passer au direct.

Exemples sur GitHub

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

Java Kotlin

Étapes suivantes

Explorez les sujets suivants:

Format natif avancé

Afficher une annonce native

Classe NativeAdView

Java

Kotlin

Superposition "Choisir sa pub"

Attribution des annonces pour les annonces natives programmatiques

Exemple de code

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

ImageScaleType

Java

Kotlin

MediaContent

Java

Kotlin

Supprimer l'annonce

Java

Kotlin

Tester le code d'annonce natif

Annonces vendues directement

Annonces natives de remplissage

Exemples sur GitHub

Étapes suivantes

Classe `NativeAdView`