Quando viene caricato un annuncio nativo, l'SDK Google Mobile Ads (beta) richiama il listener per il formato dell'annuncio corrispondente. L'app è quindi responsabile della visualizzazione dell'annuncio, anche se non è necessario che lo faccia immediatamente. Per semplificare la visualizzazione dei formati degli annunci definiti dal sistema, l'SDK offre alcune risorse utili, come descritto di seguito.
Definisci la classe NativeAdView
Definisci una classe NativeAdView
. Questa classe è una classe
ViewGroup
ed è il contenitore di primo livello per una classe NativeAdView
. Ogni visualizzazione di annuncio nativo contiene asset annuncio nativo, ad esempio l'elemento di visualizzazione MediaView
o l'elemento di visualizzazione Title
, che deve essere un elemento secondario dell'oggetto NativeAdView
.
Layout XML
Aggiungi un file XML NativeAdView
al tuo progetto:
<com.google.android.libraries.ads.mobile.sdk.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.libraries.ads.mobile.sdk.nativead.NativeAdView>
Jetpack Compose
Includi il modulo JetpackComposeDemo/compose-util
che include helper per comporre NativeAdView
e i relativi asset.
Utilizzando il modulo compose-util
, componi un NativeAdView
:
import com.google.android.gms.compose_util.NativeAdAttribution
import com.google.android.gms.compose_util.NativeAdView
@Composable
/** Display a native ad with a user defined template. */
fun DisplayNativeAdView(nativeAd: NativeAd) {
NativeAdView {
// Display the ad attribution.
NativeAdAttribution(text = context.getString("Ad"))
// Add remaining assets such as the image and media view.
}
}
Gestire l'annuncio nativo caricato
Quando viene caricato un annuncio nativo, gestisci l'evento di callback, espandi la visualizzazione dell'annuncio nativo e aggiungilo alla gerarchia delle visualizzazioni:
Kotlin
// Build an ad request with native ad options to customize the ad.
val adTypes = listOf(NativeAd.NativeAdType.NATIVE)
val adRequest = NativeAdRequest
.Builder("ca-app-pub-3940256099942544/2247696110", adTypes)
.build()
val adCallback =
object : NativeAdLoaderCallback {
override fun onNativeAdLoaded(nativeAd: NativeAd) {
activity?.runOnUiThread {
val nativeAdBinding = NativeAdBinding.inflate(layoutInflater)
val adView = nativeAdBinding.root
val frameLayout = myActivityLayout.nativeAdPlaceholder
// Populate and register the native ad asset views.
displayNativeAd(nativeAd, nativeAdBinding)
// Remove all old ad views and add the new native ad
// view to the view hierarchy.
frameLayout.removeAllViews()
frameLayout.addView(adView)
}
}
}
// Load the native ad with our request and callback.
NativeAdLoader.load(adRequest, adCallback)
Java
// Build an ad request with native ad options to customize the ad.
List<NativeAd.NativeAdType> adTypes = Arrays.asList(NativeAd.NativeAdType.NATIVE);
NativeAdRequest adRequest = new NativeAdRequest
.Builder("ca-app-pub-3940256099942544/2247696110", adTypes)
.build();
NativeAdLoaderCallback adCallback = new NativeAdLoaderCallback() {
@Override
public void onNativeAdLoaded(NativeAd nativeAd) {
if (getActivity() != null) {
getActivity()
.runOnUiThread(() -> {
// Inflate the native ad view and add it to the view hierarchy.
NativeAdBinding nativeAdBinding = NativeAdBinding.inflate(getLayoutInflater());
NativeAdView adView = (NativeAdView) nativeAdBinding.getRoot();
FrameLayout frameLayout = myActivityLayout.nativeAdPlaceholder;
// Populate and register the native ad asset views.
displayNativeAd(nativeAd, nativeAdBinding);
// Remove all old ad views and add the new native ad
// view to the view hierarchy.
frameLayout.removeAllViews();
frameLayout.addView(adView);
});
}
}
};
// Load the native ad with our request and callback.
NativeAdLoader.load(adRequest, adCallback);
Tieni presente che tutti gli asset per un determinato annuncio nativo devono essere visualizzati all'interno del layout NativeAdView
. L'SDK Google Mobile Ads (beta) tenta di registrare un avviso quando
gli asset nativi vengono visualizzati al di fuori di un layout di visualizzazione dell'annuncio nativo.
Le classi di visualizzazione degli annunci 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!
Visualizzare l'annuncio nativo
Il seguente esempio mostra come visualizzare un annuncio nativo:
Kotlin
private fun displayNativeAd(nativeAd: NativeAd, nativeAdBinding : NativeAdBinding) {
// Set the native ad view elements.
val nativeAdView = nativeAdBinding.root
nativeAdView.advertiserView = nativeAdBinding.adAdvertiser
nativeAdView.bodyView = nativeAdBinding.adBody
nativeAdView.callToActionView = nativeAdBinding.adCallToAction
nativeAdView.headlineView = nativeAdBinding.adHeadline
nativeAdView.iconView = nativeAdBinding.adAppIcon
nativeAdView.priceView = nativeAdBinding.adPrice
nativeAdView.starRatingView = nativeAdBinding.adStars
nativeAdView.storeView = nativeAdBinding.adStore
// Set the view element with the native ad assets.
nativeAdBinding.adAdvertiser.text = nativeAd.advertiser
nativeAdBinding.adBody.text = nativeAd.body
nativeAdBinding.adCallToAction.text = nativeAd.callToAction
nativeAdBinding.adHeadline.text = nativeAd.headline
nativeAdBinding.adAppIcon.setImageDrawable(nativeAd.icon?.drawable)
nativeAdBinding.adPrice.text = nativeAd.price
nativeAd.starRating?.toFloat().let { value ->
nativeAdBinding.adStars.rating = value
}
nativeAdBinding.adStore.text = nativeAd.store
// Hide views for assets that don't have data.
nativeAdBinding.adAdvertiser.visibility = getAssetViewVisibility(nativeAd.advertiser)
nativeAdBinding.adBody.visibility = getAssetViewVisibility(nativeAd.body)
nativeAdBinding.adCallToAction.visibility = getAssetViewVisibility(nativeAd.callToAction)
nativeAdBinding.adHeadline.visibility = getAssetViewVisibility(nativeAd.headline)
nativeAdBinding.adAppIcon.visibility = getAssetViewVisibility(nativeAd.icon)
nativeAdBinding.adPrice.visibility = getAssetViewVisibility(nativeAd.price)
nativeAdBinding.adStars.visibility = getAssetViewVisibility(nativeAd.starRating)
nativeAdBinding.adStore.visibility = getAssetViewVisibility(nativeAd.store)
// Inform Google Mobile Ads SDK (beta) that you have finished populating
// the native ad views with this native ad.
nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia)
}
/**
* Determines the visibility of an asset view based on the presence of its asset.
*
* @param asset The native ad asset to check for nullability.
* @return [View.VISIBLE] if the asset is not null, [View.INVISIBLE] otherwise.
*/
private fun getAssetViewVisibility(asset: Any?): Int {
return if (asset == null) View.INVISIBLE else View.VISIBLE
}
Java
private void displayNativeAd(ad: NativeAd, nativeAdBinding : NativeAdBinding) {
// Set the native ad view elements.
NativeAdView nativeAdView = nativeAdBinding.getRoot();
nativeAdView.setAdvertiserView(nativeAdBinding.adAdvertiser);
nativeAdView.setBodyView(nativeAdBinding.adBody);
nativeAdView.setCallToActionView(nativeAdBinding.adCallToAction);
nativeAdView.setHeadlineView(nativeAdBinding.adHeadline);
nativeAdView.setIconView(nativeAdBinding.adAppIcon);
nativeAdView.setPriceView(nativeAdBinding.adPrice);
nativeAdView.setStarRatingView(nativeAdBinding.adStars);
nativeAdView.setStoreView(nativeAdBinding.adStore);
// Set the view element with the native ad assets.
nativeAdBinding.adAdvertiser.setText(nativeAd.getAdvertiser());
nativeAdBinding.adBody.setText(nativeAd.getBody());
nativeAdBinding.adCallToAction.setText(nativeAd.getCallToAction());
nativeAdBinding.adHeadline.setText(nativeAd.getHeadline());
if (nativeAd.getIcon() != null) {
nativeAdBinding.adAppIcon.setImageDrawable(nativeAd.getIcon().getDrawable());
}
nativeAdBinding.adPrice.setText(nativeAd.getPrice());
if (nativeAd.getStarRating() != null) {
nativeAdBinding.adStars.setRating(nativeAd.getStarRating().floatValue());
}
nativeAdBinding.adStore.setText(nativeAd.getStore());
// Hide views for assets that don't have data.
nativeAdBinding.adAdvertiser.setVisibility(getAssetViewVisibility(nativeAd.getAdvertiser()));
nativeAdBinding.adBody.setVisibility(getAssetViewVisibility(nativeAd.getBody()));
nativeAdBinding.adCallToAction.setVisibility(getAssetViewVisibility(nativeAd.getCallToAction()));
nativeAdBinding.adHeadline.setVisibility(getAssetViewVisibility(nativeAd.getHeadline()));
nativeAdBinding.adAppIcon.setVisibility(getAssetViewVisibility(nativeAd.getIcon()));
nativeAdBinding.adPrice.setVisibility(getAssetViewVisibility(nativeAd.getPrice()));
nativeAdBinding.adStars.setVisibility(getAssetViewVisibility(nativeAd.getStarRating()));
nativeAdBinding.adStore.setVisibility(getAssetViewVisibility(nativeAd.getStore()));
// Inform Google Mobile Ads SDK (beta) that you have finished populating
// the native ad views with this native ad.
nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia);
}
/**
* Determines the visibility of an asset view based on the presence of its asset.
*
* @param asset The native ad asset to check for nullability.
* @return {@link View#VISIBLE} if the asset is not null, {@link View#INVISIBLE} otherwise.
*/
private int getAssetViewVisibility(Object asset) {
return (asset == null) ? View.INVISIBLE : View.VISIBLE;
}
Overlay Scegli Tu!
L'SDK aggiunge un overlay Scegli Tu! a ogni visualizzazione dell'annuncio. Lascia 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 saperne di più 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 è una pubblicità. Scopri di più nelle nostre linee guida relative alle norme.
Gestire i clic
Non implementare gestori di clic personalizzati in nessuna visualizzazione sopra o all'interno della visualizzazione dell'annuncio nativo. I clic sugli asset di visualizzazione dell'annuncio vengono gestiti dall'SDK a condizione che tu compili e registri correttamente le visualizzazioni degli asset.
Per rilevare i clic, implementa il callback dei clic dell'SDK Google Mobile Ads (beta):
Kotlin
private fun setEventCallback(nativeAd: NativeAd) {
nativeAd.adEventCallback =
object : NativeAdEventCallback {
override fun onAdClicked() {
Log.d(Constant.TAG, "Native ad recorded a click.")
}
}
}
Java
private void setEventCallback(NativeAd nativeAd) {
nativeAd.setAdEventCallback(new NativeAdEventCallback() {
@Override
public void onAdClicked() {
Log.d(Constant.TAG, "Native ad recorded a click.");
}
});
}
ImageScaleType
La classe MediaView
ha una proprietà ImageScaleType
quando vengono visualizzate
le immagini. Se vuoi modificare il modo in cui un'immagine viene scalata in MediaView
, imposta
il valore ImageView.ScaleType
corrispondente utilizzando il metodo setImageScaleType()
di MediaView
:
Kotlin
nativeAdViewBinding.mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
Java
nativeAdViewBinding.mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
MediaContent
La classe MediaContent
contiene i dati relativi ai contenuti multimediali dell'annuncio nativo, che vengono visualizzati utilizzando la classe MediaView
. Quando la proprietà
MediaView
mediaContent
è impostata con un'istanza MediaContent
:
Se è disponibile un asset video, viene memorizzato nel buffer e inizia la riproduzione all'interno di
MediaView
. Puoi sapere se una risorsa video è disponibile controllandohasVideoContent()
.Se l'annuncio non contiene un asset video, viene scaricato l'asset
mainImage
e inserito all'interno diMediaView
.
Distruggere un annuncio
Dopo aver mostrato un annuncio nativo, distruggilo. L'esempio seguente elimina un annuncio nativo:
Kotlin
nativeAd.destroy()
Java
nativeAd.destroy();
Passaggi successivi
Esplora i seguenti argomenti:
Esempio
Scarica ed esegui l'app di esempio che mostra l'utilizzo dell'SDK Google Mobile Ads (beta).