Nativo avanzato

Seleziona la piattaforma:Android iOS

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 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, "/21775744923/example/native")
    .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.
            displayNativeAd(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

Kotlin

val builder = AdLoader.Builder(this, "/21775744923/example/native")
    .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.
        displayNativeAd(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 AdChoices per le creatività di backfill nativo, attualmente limitata a un gruppo selezionato di publisher

Visualizzare l'annuncio nativo

Il seguente esempio mostra come visualizzare un annuncio nativo:

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 you use a MediaView, call theNativeAdView.setMediaView() method
  // before calling the NativeAdView.setNativeAd() method.
  MediaView mediaView = (MediaView) adView.findViewById(R.id.ad_media);
  adView.setMediaView(mediaView);

  // Register the native ad with its ad view.
  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

Overlay Scegli Tu!

Un overlay Scegli Tu! viene aggiunto come visualizzazione annuncio dall'SDK quando viene restituito un annuncio di backfill. Se la tua app utilizza il backfill degli annunci nativi, lascia spazio nell'angolo preferito della visualizzazione dell'annuncio nativo per il logo AdChoices inserito automaticamente. Inoltre, è importante che la sovrapposizione AdChoices sia 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 linee guida per l'implementazione degli annunci nativi programmatici.

Attribuzione degli annunci per gli annunci nativi programmatici

Quando vengono visualizzati annunci nativi programmatici, 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:

Java

AdLoader adLoader = new AdLoader.Builder(context, "/21775744923/example/native")
    // ...
    .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, "/21775744923/example/native")
    // ...
    .withAdListener(object : AdListener() {
        override fun onAdFailedToLoad(adError: LoadAdError) {
            // Handle the failure.
        }
        override fun onAdClicked() {
            // Log the click event or other custom behavior.
        }
    })
    .build()

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.

∂## Distruggi un annuncio

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

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()

Testare il codice dell'annuncio nativo

Annunci venduti direttamente

Se vuoi provare gli annunci nativi venduti direttamente, puoi utilizzare questo ID unità pubblicitaria di Ad Manager:

/21775744923/example/native

È configurato per pubblicare annunci per l'installazione di app e annunci di contenuti di esempio, nonché un formato di annuncio nativo personalizzato con i seguenti asset:

  • Titolo (testo)
  • MainImage (immagine)
  • Caption (text)

L'ID modello per il formato dell'annuncio nativo personalizzato è 10063170.

Annunci di backfill nativi

Il backfill di Ad Exchange è limitato a un gruppo selezionato di publisher. Per testare il comportamento degli annunci di backfill nativi, utilizza questa unità pubblicitaria di Ad Manager:

/21775744923/example/native-backfill

Pubblica annunci di esempio per l'installazione di app e annunci di contenuti che includono l'overlay Scegli Tu!.

Prima di pubblicare il codice, ricordati di aggiornarlo in modo che faccia riferimento agli ID effettivi dell'unità pubblicitaria e del modello.

Esempi su GitHub

Esempio di implementazione completa degli annunci nativi:

Java Kotlin JetpackCompose

Passaggi successivi

Esplora i seguenti argomenti: