Questa pagina è stata tradotta dall'API Cloud Translation.

Annunci nativi

Seleziona la piattaforma: Android Android (beta) iOS

Quando viene caricato un annuncio nativo, l'SDK GMA di nuova generazione richiama il listener per il formato dell'annuncio corrispondente. L'app è quindi responsabile della visualizzazione dell'annuncio, anche se non è obbligata a mostrarlo 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 un annuncio nativo contiene gli asset dell'annuncio, ad esempio l'elemento di visualizzazione MediaView o l'elemento di visualizzazione Title, che devono essere figli 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 una classe NativeAdView e i relativi asset.

Utilizzando il modulo compose-util, componi una classe 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.
        }
    }

Gestisci l'annuncio nativo caricato

Quando viene caricato un annuncio nativo, gestisci l'evento di callback, esegui l'inflate della visualizzazione dell'annuncio nativo e aggiungila alla gerarchia di oggetti View:

Kotlin

// Build an ad request with native ad options to customize the ad.
val adTypes = listOf(NativeAd.NativeAdType.NATIVE)
val adRequest = NativeAdRequest
  .Builder("/21775744923/example/native", 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("/21775744923/example/native", 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);

È necessario eseguire il rendering di tutti gli asset di un determinato annuncio nativo all'interno del layout NativeAdView. L'SDK GMA di nuova generazione tenta di registrare un avviso quando il rendering degli asset nativi viene eseguito al di fuori di un layout di visualizzazione dell'annuncio nativo.

Le classi di visualizzazione dell'annuncio forniscono anche metodi utilizzati per registrare la visualizzazione relativa a ogni singolo asset e uno utilizzato per registrare l'oggetto NativeAd stesso. Registrando le visualizzazioni in questo modo, l'SDK è in grado di gestire automaticamente attività come:

Registrazione dei clic
Registrazione delle impressioni quando il primo pixel è visibile sullo schermo
Visualizzazione dell'overlay Scegli Tu! per le creatività di backfill nativo, attualmente limitata a un gruppo selezionato di publisher

Visualizza 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 GMA Next Gen SDK 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 GMA Next Gen SDK 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!

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 Scegli Tu! inserito automaticamente. Inoltre, è importante che l'overlay Scegli Tu! 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 dell'annuncio 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 sulle norme.

Gestisci 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 rimanere in ascolto dei clic, implementa la funzione di callback dei clic dell'SDK GMA di nuova generazione:

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 la modalità di scale in di un'immagine 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 include 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.

Distruggere un annuncio

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

Kotlin

nativeAd.destroy()

Java

nativeAd.destroy();

Testa 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 di esempio per l'installazione di app e per i contenuti, nonché un formato di annuncio nativo personalizzato con i seguenti asset:

Headline (testo)
MainImage (immagine)
Caption (testo)

L'ID template 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 per i 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 template.

Passaggi successivi

Approfondisci i seguenti argomenti:

Privacy degli utenti

Esempio

Scarica ed esegui l'app di esempio che mostra l'utilizzo dell'SDK GMA di nuova generazione.

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

Definisci la classe NativeAdView

Layout XML

Jetpack Compose

Gestisci l'annuncio nativo caricato

Kotlin

Java

Visualizza l'annuncio nativo

Kotlin

Java

Overlay Scegli Tu!

Attribuzione dell'annuncio per gli annunci nativi programmatici

Gestisci i clic

Kotlin

Java

ImageScaleType

Kotlin

Java

MediaContent

Distruggere un annuncio

Kotlin

Java

Testa il codice dell'annuncio nativo

Annunci venduti direttamente

Annunci di backfill nativi

Passaggi successivi

Esempio

Annunci nativi

Definisci la classe `NativeAdView`