Mostrare un NativeAd
Quando viene caricato un annuncio nativo, l'SDK Google Mobile Ads richiama l'ascoltatore per il formato dell'annuncio corrispondente. La tua app è quindi responsabile della visualizzazione dell'annuncio, anche se non è obbligato a farlo immediatamente. Per semplificare la visualizzazione dei formati di annunci definiti dal sistema, l'SDK offre alcune risorse utili, come descritto di seguito.
Classe NativeAdView
Per il formato NativeAd
, esiste la corrispondente
NativeAdView
classe. Questa classe è un
ViewGroup
che i publisher devono utilizzare come radice per il NativeAd
. Un singolo NativeAdView
corrisponde a un singolo annuncio nativo.
Ogni vista utilizzata per visualizzare gli asset di quell'annuncio (ad esempio ImageView
che mostra
l'asset screenshot) deve essere un elemento secondario dell'oggetto
NativeAdView
.
La gerarchia delle visualizzazioni per un annuncio nativo che utilizza un
LinearLayout
per visualizzare le visualizzazioni degli asset potrebbe avere il seguente aspetto:
<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>
Ecco un esempio che crea un elemento NativeAdView
e
lo compila con un NativeAd
:
Java
AdLoader.Builder builder = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
.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, "ca-app-pub-3940256099942544/2247696110")
.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)
}
Tieni presente che tutti gli asset di un determinato annuncio nativo devono essere visualizzati all'interno del layoutNativeAdView
. L'SDK Google Mobile Ads tenta di registrare un avviso quando gli asset nativi vengono visualizzati al di fuori del layout di una visualizzazione dell'annuncio nativo.
Le classi di visualizzazione dell'annuncio forniscono anche metodi utilizzati per registrare la visualizzazione utilizzata per ogni singolo asset e uno per registrare l'oggetto NativeAd
stesso.
La registrazione delle visualizzazioni in questo modo consente all'SDK di gestire automaticamente attività come:
- Registrazione dei clic
- Registrazione delle impressioni quando il primo pixel è visibile sullo schermo
- Visualizzazione dell'overlay Scegli Tu!
Overlay Scegli Tu!
L'SDK aggiunge un overlay Scegli Tu! a ogni visualizzazione dell'annuncio. Lascia uno spazio nell'angolo che preferisci della visualizzazione dell'annuncio nativo per il logo Scegli Tu! inserito automaticamente. Inoltre, è importante che l'overlay Scegli Tu! sia facilmente visibile, quindi scegli le immagini e i colori di sfondo in modo appropriato. Per ulteriori informazioni sull'aspetto e sulla funzione dell'overlay, consulta le descrizioni dei campi degli annunci nativi.
Attribuzione dell'annuncio
Devi mostrare un'attribuzione dell'annuncio per indicare che la visualizzazione è un annuncio. Scopri di più nelle nostre linee guida sulle norme.
Esempio di codice
Di seguito sono riportati i passaggi per la visualizzazione di un annuncio nativo:
- Crea un'istanza della classe
NativeAdView
. Per ogni asset annuncio da visualizzare:
- Compila la visualizzazione dell'asset con l'asset nell'oggetto annuncio.
- Registra la visualizzazione della risorsa con la classe
NativeAdView
.
Registra
MediaView
se il layout degli annunci nativi include un asset multimediale di grandi dimensioni.Registra l'oggetto annuncio con la classe
NativeAdView
.
Ecco un esempio di funzione che mostra 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)
}
Di seguito sono riportate le singole attività:
Eseguire l'inflazione del layout
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
Questo codice esegue l'inflazione di un layout XML contenente visualizzazioni per la visualizzazione di un annuncio nativo e poi individua un riferimento a
NativeAdView
. Tieni presente che puoi anche riutilizzare unNativeAdView
esistente se è presente nel frammento o nell'attività oppure creare un'istanza dinamicamente senza utilizzare un file di layout.Compila e registra le visualizzazioni delle risorse
Questo codice di esempio consente di individuare la visualizzazione utilizzata per mostrare il titolo, impostarne il testo utilizzando l'asset stringa fornito dall'oggetto ad e registrarla con l'oggetto
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
Questa procedura di ricerca della visualizzazione, impostazione del relativo valore e registrazione con la classe della visualizzazione dell'annuncio deve essere ripetuta per ciascuno degli asset forniti dall'oggetto annuncio nativo che l'app mostrerà.
Gestire i clic
Non implementare gestori dei clic personalizzati nelle visualizzazioni sopra o all'interno della visualizzazione dell'annuncio nativo. I clic sugli asset delle visualizzazioni annunci vengono gestiti dall'SDK a condizione che le visualizzazioni asset siano compilate e registrate correttamente, come descritto nella sezione precedente.
Per rilevare i clic, implementa il callback dell'SDK Google Mobile Ads:
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. } @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. } override fun onAdClicked() { // Log the click event or other custom behavior. } }) .build()
Registrare MediaView
Devi utilizzare l'asset
MediaView
anziché l'assetImageView
se vuoi includere un asset immagine principale nel layout per l'annuncio nativo.MediaView
è unView
speciale progettato per visualizzare l'asset multimediale principale, che può essere un video o un'immagine.MediaView
può essere definito in un layout XML o costruito in modo dinamico. Dovrebbe essere posizionato all'interno della gerarchia di visualizzazione di unNativeAdView
, proprio come qualsiasi altra visualizzazione degli asset. Le app che utilizzano unMediaView
devono registrarlo con ilNativeAdView
: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
ha una proprietàImageScaleType
quando mostra le immagini. Se vuoi modificare la modalità di ridimensionamento di un'immagine nelMediaView
, imposta ilImageView.ScaleType
corrispondente utilizzando il metodosetImageScaleType()
delMediaView
:Java
mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
Kotlin
mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
MediaContent
La classe
MediaContent
contiene i dati relativi ai contenuti multimediali dell'annuncio nativo, che vengono visualizzati utilizzando la classeMediaView
. Quando la proprietàMediaView
mediaContent
è impostata con un'istanzaMediaContent
:Se un asset video è disponibile, viene inserito nel buffer e viene avviata la riproduzione all'interno di
MediaView
. Per capire se un asset video è disponibile, controllahasVideoContent()
.Se l'annuncio non contiene un asset video, l'asset
mainImage
viene scaricato e inserito nell'MediaView
.
Per impostazione predefinita,
mainImage
è il primo asset immagine scaricato. Se viene utilizzatosetReturnUrlsForImageAssets(true)
,mainImage
ènull
e devi impostare la proprietàmainImage
sull'immagine scaricata manualmente. Tieni presente che questa immagine verrà utilizzata solo quando non sono disponibili asset video.Registra l'oggetto dell'annuncio nativo
Questo passaggio finale registra l'oggetto annuncio nativo con la visualizzazione responsabile della sua visualizzazione.
Java
adView.setNativeAd(ad);
Kotlin
adView.setNativeAd(ad)
Eliminare l'annuncio
Al termine della visualizzazione dell'annuncio nativo, devi distruggerlo in modo che venga raccolto correttamente come spazzatura.
Java
nativeAd.destroy();
Kotlin
nativeAd.destroy()
Esempi su GitHub
Esempio di implementazione completa degli annunci nativi:
Passaggi successivi
Esplora i seguenti argomenti: