Nativo avanzato

Mostrare un NativeAd

Quando viene caricato un annuncio nativo, l'SDK Google Mobile Ads richiama l'ascoltatore per il formato dell'annuncio corrispondente. L'app è quindi responsabile della visualizzazione dell'annuncio, anche se non deve necessariamente farlo immediatamente. Per semplificare la visualizzazione di formati degli 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 è una ViewGroup che i publisher devono utilizzare come radice per NativeAd. Un singolo NativeAdView corrisponde a un singolo annuncio nativo. Ogni visualizzazione utilizzata per visualizzare gli asset dell'annuncio (ad esempio, la ImageView che mostra l'asset screenshot) deve essere un elemento secondario dell'oggetto NativeAdView.

La gerarchia di visualizzazione di un annuncio nativo che utilizza una LinearLayout per mostrare le visualizzazioni degli asset potrebbe essere la seguente:

<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 inoltre metodi 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 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:

  1. Crea un'istanza della classe NativeAdView.

  2. Per ogni asset annuncio da visualizzare:

    1. Compila la visualizzazione dell'asset con l'asset nell'oggetto annuncio.
    2. Registra la visualizzazione della risorsa con la classe NativeAdView.

  3. Registra MediaView se il layout degli annunci nativi include un asset multimediale di grandi dimensioni.

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

Ecco le singole attività:

  1. 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 un elemento NativeAdView esistente se ne esiste uno nel frammento o nell'attività o anche creare un'istanza in modo dinamico senza utilizzare un file di layout.

  2. Compila e registra le visualizzazioni delle risorse

    Questo codice di esempio individua la visualizzazione utilizzata per visualizzare il titolo, imposta il relativo 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

    La procedura per individuare la vista, impostarne il valore e registrarla nella classe di visualizzazione dell'annuncio deve essere ripetuta per ognuno degli asset forniti dall'oggetto annuncio nativo che l'app mostrerà.

  3. Gestire i clic

    Non implementare gestori dei clic personalizzati in nessuna visualizzazione 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 ascoltare 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()

  4. Registra MediaView

    Devi utilizzare l'asset MediaView instead of the ImageView se vuoi includere un asset immagine principale nel layout del tuo annuncio nativo.

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

    MediaView può essere definito in un layout XML o creato in modo dinamico. Dovrebbe essere posizionato all'interno della gerarchia di visualizzazione di un NativeAdView, proprio come qualsiasi altra visualizzazione degli asset. Le app che utilizzano un MediaView devono registrarlo con il 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 per la visualizzazione delle immagini. Se vuoi modificare la modalità di ridimensionamento di un'immagine nel MediaView, imposta il ImageView.ScaleType corrispondente utilizzando il metodo setImageScaleType() del 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 nella cache e inizia a essere riprodotto all'interno di MediaView. Puoi capire se una risorsa video è disponibile controllando hasVideoContent().

    • Se l'annuncio non contiene un asset video, l'asset mainImage viene scaricato e inserito all'interno dell'elemento 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.

  5. 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:

Java Kotlin

Passaggi successivi

Esplora i seguenti argomenti: