Afficher une annonce native
Lorsqu'une annonce native se charge, le SDK Google Mobile Ads appelle l'écouteur pour le format d'annonce correspondant. Votre application se charge ensuite de diffuser l'annonce, mais ce n'est pas forcément nécessaire. Pour que l'affichage les formats d'annonces définis par le système, le SDK propose des ressources utiles, décrites 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
. 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>
// 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 composants d'une annonce native donnée doivent être affichés dans la mise en page NativeAdView
. Le SDK Google Mobile Ads tente de consigner un avertissement lorsque :
les éléments natifs s'affichent 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
- Enregistrer les impressions lorsque le premier pixel est visible à l'écran
- Afficher la superposition "Choisir sa pub"
Superposition "Choisir sa pub"
Le SDK ajoute une superposition "Choisir sa pub" à chaque visionnage d'annonce. Laissez un espace dans l'angle de votre choix de l'affichage de votre annonce native pour le logo "Choisir sa pub" inséré automatiquement. De plus, c'est pour que la superposition "Choisir sa pub" soit bien visible, choisissez les couleurs d'arrière-plan. et les images de manière appropriée. Pour en savoir plus sur l'apparence et le fonctionnement de la superposition, consultez les Descriptions des champs des annonces natives.
Attribution d'annonce
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 :
- Renseignez la vue du composant avec celui-ci dans l'objet d'annonce.
- Enregistrez la vue de l'é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 unNativeAdView
existant s'il en existe un dans votre fragment ou votre activité ; ou et 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 et définit son texte à l'aide de l'élément de chaîne fourni par l'objet "annonce", puis l'enregistre avec 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, "ca-app-pub-3940256099942544/2247696110") ... .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, "ca-app-pub-3940256099942544/2247696110") ... .withAdListener(object : AdListener() { override fun onAdFailedToLoad(adError: LoadAdError) { // Handle the failure by logging, altering the UI, and so on. } }) .build()
Enregistrer l'élément MediaView
Vous devez utiliser la
MediaView
au lieu de l'élémentImageView
si vous souhaitez inclure un élément image principal dans la mise en page de votre annonce native annonce.MediaView
est unView
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 élémentNativeAdView
, comme n'importe quelle d'une autre vue d'éléments. Les applications qui utilisent unMediaView
doivent l'enregistrer auprès deNativeAdView
: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 à unMediaView
. 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
possède une propriétéImageScaleType
lors de l'affichage d'images. Si vous souhaitez modifier la mise à l'échelle d'une image dansMediaView
, définissez leImageView.ScaleType
correspondant à l'aide desetImageScaleType()
. deMediaView
: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 classeMediaView
. Lorsque La propriétémediaContent
MediaView
est définie avec une instanceMediaContent
:Si un asset vidéo est disponible, il est mis en mémoire tampon et sa lecture commence
MediaView
Pour savoir si un élément vidéo est disponible, vérifiezhasVideoContent()
.Si l'annonce ne contient aucun asset vidéo, l'asset
mainImage
est téléchargé et placé dansMediaView
à la place.
Par défaut,
mainImage
est le premier composant Image téléchargé. SisetReturnUrlsForImageAssets(true)
est utilisé,mainImage
estnull
et vous devez définir 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 est correctement récupérée.
Java
nativeAd.destroy();
Kotlin
nativeAd.destroy()
Exemples sur GitHub
Exemple d'implémentation complète d'annonces natives:
Étapes suivantes
Consultez les sujets suivants :
- Confidentialité des données des utilisateurs
- Optimisation du chargement des annonces et de l'initialisation du SDK (bêta)