Per discutere e fornire feedback sui nostri prodotti, unisciti al canale Discord ufficiale di AdMob nel server della community di Google Advertising and Measurement.

Questa pagina è stata tradotta dall'API Cloud Translation.

Nativo avanzato

Seleziona la piattaforma:Android iOS

Visualizzare un annuncio nativo

Quando viene caricato un annuncio nativo, l'SDK Google Mobile Ads 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 degli annunci nativi, 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.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>

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 aggiungila alla gerarchia delle visualizzazioni:

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)
    }

Jetpack Compose

@Composable
/** Load and display a native ad. */
fun NativeScreen() {
  var nativeAd by remember { mutableStateOf<NativeAd?>(null) }
  val context = LocalContext.current
  var isDisposed by remember { mutableStateOf(false) }

  DisposableEffect(Unit) {
    // Load the native ad when we launch this screen
    loadNativeAd(
      context = context,
      onAdLoaded = { ad ->
        // Handle the native ad being loaded.
        if (!isDisposed) {
          nativeAd = ad
        } else {
          // Destroy the native ad if loaded after the screen is disposed.
          ad.destroy()
        }
      },
    )
    // Destroy the native ad to prevent memory leaks when we dispose of this screen.
    onDispose {
      isDisposed = true
      nativeAd?.destroy()
      nativeAd = null
    }
  }

  // Display the native ad view with a user defined template.
  nativeAd?.let { adValue -> DisplayNativeAdView(adValue) }
}

fun loadNativeAd(context: Context, onAdLoaded: (NativeAd) -> Unit) {
  val adLoader =
    AdLoader.Builder(context, NATIVE_AD_UNIT_ID)
      .forNativeAd { nativeAd -> onAdLoaded(nativeAd) }
      .withAdListener(
        object : AdListener() {
          override fun onAdFailedToLoad(error: LoadAdError) {
            Log.e(TAG, "Native ad failed to load: ${error.message}")
          }

          override fun onAdLoaded() {
            Log.d(TAG, "Native ad was loaded.")
          }

          override fun onAdImpression() {
            Log.d(TAG, "Native ad recorded an impression.")
          }

          override fun onAdClicked() {
            Log.d(TAG, "Native ad was clicked.")
          }
        }
      )
      .build()
  adLoader.loadAd(AdRequest.Builder().build())
}
NativeScreen.kt

Tieni presente che tutti gli asset per un determinato annuncio nativo devono essere visualizzati all'interno del layout NativeAdView. L'SDK Google Mobile Ads 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!

Overlay Scegli Tu!

Un overlay Scegli Tu! viene aggiunto a ogni visualizzazione dell'annuncio dall'SDK. Lascia spazio nell'angolo preferito 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 è una pubblicità. Scopri di più nelle nostre linee guida relative alle norme.

Codice di esempio

Di seguito sono riportati i passaggi per visualizzare un annuncio nativo:

Crea un'istanza della classe NativeAdView.
Per ogni asset annuncio da visualizzare:
1. Compila la visualizzazione dell'asset con l'asset nell'oggetto annuncio.
2. Registra la visualizzazione dell'asset con la classe NativeAdView.
Registra MediaView se il layout dell'annuncio nativo include un asset multimediale di grandi dimensioni.
Registra l'oggetto annuncio con la classe NativeAdView.

Ecco una funzione di esempio 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)
}

Jetpack Compose

@Composable
/** Display a native ad with a user defined template. */
fun DisplayNativeAdView(nativeAd: NativeAd) {
  val context = LocalContext.current
  Box(modifier = Modifier.padding(8.dp).wrapContentHeight(Alignment.Top)) {
    // Call the NativeAdView composable to display the native ad.
    NativeAdView {
      // Inside the NativeAdView composable, display the native ad assets.
      Column(Modifier.align(Alignment.TopStart).wrapContentHeight(Alignment.Top)) {
        // Display the ad attribution.
        NativeAdAttribution(text = context.getString(R.string.attribution))
        Row {
          // If available, display the icon asset.
          nativeAd.icon?.let { icon ->
            NativeAdIconView(Modifier.padding(5.dp)) {
              icon.drawable?.toBitmap()?.let { bitmap ->
                Image(bitmap = bitmap.asImageBitmap(), "Icon")
              }
            }
          }
          Column {
            // If available, display the headline asset.
            nativeAd.headline?.let {
              NativeAdHeadlineView {
                Text(text = it, style = MaterialTheme.typography.headlineLarge)
              }
            }
            // If available, display the star rating asset.
            nativeAd.starRating?.let {
              NativeAdStarRatingView {
                Text(text = "Rated $it", style = MaterialTheme.typography.labelMedium)
              }
            }
          }
        }

        // If available, display the body asset.
        nativeAd.body?.let { NativeAdBodyView { Text(text = it) } }
        // Display the media asset.
        NativeAdMediaView(Modifier.fillMaxWidth().height(500.dp).fillMaxHeight())

        Row(Modifier.align(Alignment.End).padding(5.dp)) {
          // If available, display the price asset.
          nativeAd.price?.let {
            NativeAdPriceView(Modifier.padding(5.dp).align(Alignment.CenterVertically)) {
              Text(text = it)
            }
          }
          // If available, display the store asset.
          nativeAd.store?.let {
            NativeAdStoreView(Modifier.padding(5.dp).align(Alignment.CenterVertically)) {
              Text(text = it)
            }
          }
          // If available, display the call to action asset.
          // Note: The Jetpack Compose button implements a click handler which overrides the native
          // ad click handler, causing issues. Use the NativeAdButton which does not implement a
          // click handler. To handle native ad clicks, use the NativeAd AdListener onAdClicked
          // callback.
          nativeAd.callToAction?.let { callToAction ->
            NativeAdCallToActionView(Modifier.padding(5.dp)) { NativeAdButton(text = callToAction) }
          }
        }
      }
    }
  }
}
NativeScreen.kt

Ecco le attività individuali:

Gonfiare il 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 gonfia un layout XML che contiene le visualizzazioni per la visualizzazione di un annuncio nativo e quindi individua un riferimento a NativeAdView. Tieni presente che puoi anche riutilizzare un NativeAdView esistente se ne è presente uno nel fragment o nell'attività oppure creare un'istanza in modo dinamico senza utilizzare un file di layout.

Compilare e registrare le visualizzazioni degli asset

Questo codice campione individua la visualizzazione utilizzata per mostrare il titolo, imposta il testo utilizzando l'asset stringa fornito dall'oggetto annuncio e lo registra 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 individuazione della visualizzazione, impostazione del relativo valore e registrazione con la classe di visualizzazione annuncio deve essere ripetuta per ciascuno degli asset forniti dall'oggetto annuncio nativo che l'app visualizzerà.

Clic sugli handle

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, come descritto nella sezione precedente.

Per rilevare i clic, implementa il callback dei clic 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 invece dell'asset ImageView se vuoi includere un asset immagine principale nel layout del tuo annuncio nativo.

MediaView è uno speciale View progettato per visualizzare l'asset multimediale principale, video o immagine.

MediaView può essere definito in un layout XML o costruito in modo dinamico. Deve essere posizionata all'interno della gerarchia di visualizzazione di un NativeAdView, proprio come qualsiasi altra visualizzazione di asset. Le app che utilizzano un MediaView devono registrarlo con NativeAdView:
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 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:
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 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 controllando hasVideoContent().
- Se l'annuncio non contiene un asset video, viene scaricato l'asset mainImage e inserito all'interno di MediaView.
Per impostazione predefinita, mainImage è il primo asset immagine scaricato. Se viene utilizzato setReturnUrlsForImageAssets(true), mainImage è null e devi impostare la proprietà mainImage sull'immagine scaricata manualmente. Tieni presente che questa immagine verrà utilizzata solo quando non è disponibile una risorsa video.
Registrare 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)
```

Distruggere un annuncio

Dopo aver mostrato un annuncio nativo, distruggilo. L'esempio seguente elimina un annuncio nativo:

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()

Esempi su GitHub

Esempio di implementazione completa degli annunci nativi:

Java Kotlin JetpackCompose

Passaggi successivi

Esplora i seguenti argomenti:

Privacy degli utenti

Inizializzazione e caricamento degli annunci ottimizzati dell'SDK (beta)

Nativo avanzato Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Visualizzare un annuncio nativo

Definisci la classe NativeAdView

Layout XML

Jetpack Compose

Gestire l'annuncio nativo caricato

Java

Kotlin

Jetpack Compose

Overlay Scegli Tu!

Attribuzione dell'annuncio

Codice di esempio

Java

Kotlin

Jetpack Compose

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

ImageScaleType

Java

Kotlin

MediaContent

Java

Kotlin

Distruggere un annuncio

Java

Kotlin

Esempi su GitHub

Passaggi successivi

Nativo avanzato

Definisci la classe `NativeAdView`