Nativo avanzato

Visualizza un annuncio nativo

Quando un annuncio nativo viene caricato, l'SDK Google Mobile Ads richiama il listener per il formato dell'annuncio corrispondente. La tua app è quindi responsabile della visualizzazione dell'annuncio, anche se non deve necessariamente farlo immediatamente. Per semplificare la visualizzazione dei formati di annunci definiti dal sistema, l'SDK offre alcune risorse utili, come descritto di seguito.

Punto chiave: Consulta le norme e le linee guida sugli annunci nativi per indicazioni su come eseguire il rendering degli annunci nativi.

NativeAdView corso

Per il formato NativeAd, esiste la classe NativeAdView corrispondente. Questa classe è una ViewGroup che gli editori devono utilizzare come radice per NativeAd. Un singolo NativeAdView corrisponde a un singolo annuncio nativo. Ogni visualizzazione utilizzata per mostrare gli asset di quell'annuncio (ad esempio, l'ImageView che mostra l'asset screenshot) deve essere una visualizzazione secondaria dell'oggetto NativeAdView.

La gerarchia delle visualizzazioni per un annuncio nativo che utilizza un elemento 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>


         // Other assets such as image or media view, call to action, etc follow.
         ...
    </LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>

Ecco un esempio che crea un NativeAdView e lo compila con un NativeAd:

Java

AdLoader.Builder builder = new AdLoader.Builder(this, "AD_UNIT_ID")
    .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 text, images and the native ad, etc into the ad
            // view.
            populateNativeAdView(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

Kotlin

val builder = AdLoader.Builder(this, "AD_UNIT_ID")
    .forNativeAd { nativeAd ->
        // 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 text, images and the native ad, etc into the ad
        // view.
        populateNativeAdView(nativeAd, adView)
        // Assumes you have a placeholder FrameLayout in your View layout
        // (with id ad_frame) where the ad is to be placed.
        ad_frame.removeAllViews()
        ad_frame.addView(adView)
    }

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 di annunci nativi.

Le classi di visualizzazione annuncio forniscono anche 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:

• Clic di registrazione
• Registrazione delle impressioni quando il primo pixel è visibile sullo schermo.
• Visualizzazione dell'overlay Scegli Tu! per le creatività di backfill native; attualmente disponibile solo per un gruppo selezionato di publisher.

Overlay Scegli Tu!

Quando un annuncio backfill viene restituito, l'SDK aggiunge un overlay Scegli Tu! come visualizzazione dell'annuncio. Se la tua app utilizza il backfill di 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 facilmente visibile, perciò scegli i colori e le immagini 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.

Nota: Scegli Tu! viene mostrato solo per gli annunci venduti direttamente nello Spazio economico europeo.

Attribuzione degli annunci nativi programmatici

Quando mostri 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.

Esempio di codice

Per visualizzare un annuncio nativo, procedi nel seguente modo:

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

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 above 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 above 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. Aumenta 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 espande un layout XML che contiene visualizzazioni per mostrare un annuncio nativo e quindi individua un riferimento a NativeAdView. Tieni presente che puoi anche riutilizzare un elemento NativeAdView esistente, se presente nel frammento o nell'attività, oppure creare un'istanza in modo dinamico senza utilizzare un file di layout.

2. Compilare e registrare le visualizzazioni delle risorse

   Questo codice di esempio individua la visualizzazione utilizzata per mostrare il titolo, imposta il testo utilizzando l'asset stringa fornito dall'oggetto annuncio e la 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
   

   Questo processo di individuazione della vista, impostazione del relativo valore e registrazione con la classe di visualizzazione annuncio deve essere ripetuto per ciascuno degli asset forniti dall'oggetto annuncio nativo che verrà visualizzato dall'app.

3. Gestire i clic

   Non implementare gestori di clic personalizzati in nessuna visualizzazione all'interno o all'interno della visualizzazione dell'annuncio nativo. Per osservare personalmente gli eventi di clic, utilizza l'apposito elenco.

   I clic sugli asset visualizzazione annuncio vengono gestiti dall'SDK a condizione che tu compili e registri correttamente le visualizzazioni degli asset, come spiegato nella sezione precedente.

   Di seguito è riportato un esempio in cui viene utilizzato un ascoltatore di annunci per osservare gli eventi di clic:

   Java

   AdLoader adLoader = new AdLoader.Builder(context, "/6499/example/native")
       ...
       .withAdListener(new AdListener() {
           @Override
           public void onAdFailedToLoad(LoadAdError adError) {
               // Handle the failure by logging, altering the UI, and so on.
           }
           @Override
           public void onAdClicked() {
               // Log the click event or other custom behavior.
           }
       })
       .build();
   

   Kotlin

   val adLoader = AdLoader.Builder(this, "/6499/example/native")
       ...
       .withAdListener(object : AdListener() {
           override fun onAdFailedToLoad(adError: LoadAdError) {
               // Handle the failure by logging, altering the UI, and so on.
           }
       })
       .build()
   

4. Registrare il file MediaView

   Se vuoi includere un asset immagine principale nel layout del tuo annuncio nativo, devi utilizzare l'asset MediaView anziché l'asset ImageView.

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

   MediaView può essere definito in un layout XML o creato dinamicamente. Deve essere posizionato all'interno della gerarchia di visualizzazione di un elemento NativeAdView, proprio come qualsiasi altra visualizzazione asset. Le app che utilizzano un MediaView devono registrarlo con NativeAdView:

   Java

   MediaView mediaView = adView.findViewById(R.id.ad_media);
   adView.setMediaView(mediaView);
   

   Kotlin

   adView.mediaView = adView.findViewById<MediaView>(R.id.ad_media)
   

   Come per tutte le visualizzazioni degli asset, anche la visualizzazione multimediale deve avere i contenuti completati. Per farlo, utilizza il metodo getMediaContent() per recuperare i contenuti multimediali che possono essere trasmessi a un MediaView. Ecco uno snippet di codice che imposta i contenuti multimediali per la visualizzazione multimediale:

   Java

   mediaView.setMediaContent(nativeAd.getMediaContent());
   

   Kotlin

   mediaView.mediaContent = nativeAd.mediaContent
   

   ImageScaleType

   La classe MediaView ha una proprietà ImageScaleType quando vengono visualizzate le immagini. Se vuoi cambiare il modo in cui un'immagine viene ridimensionata 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 viene visualizzato utilizzando la classe MediaView. Quando la proprietà mediaContent MediaView è impostata con un'istanza MediaContent:

   • Se è disponibile un asset video, viene eseguito il buffering e la riproduzione inizia all'interno dell'MediaView. Per determinare se un asset video è disponibile, controlla 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 saranno disponibili asset video.

5. Registra l'oggetto dell'annuncio nativo

   Questo passaggio finale registra l'oggetto annuncio nativo nella visualizzazione responsabile della sua visualizzazione:

   Java

   adView.setNativeAd(ad);
   

   Kotlin

   adView.setNativeAd(ad)
   

Elimina annuncio

Quando hai finito di mostrare l'annuncio nativo, devi distruggerlo in modo che l'annuncio venga garbage collection correttamente.

Java

nativeAd.destroy();
        .inflate(R.layout.ad_layout_file, parent);

Kotlin

nativeAd.destroy()

Test del codice dell'annuncio nativo

Annunci venduti direttamente

Se vuoi scoprire come sono gli annunci nativi venduti direttamente, puoi utilizzare questo ID unità pubblicitaria Ad Manager:

/6499/example/native

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

• Titolo (testo)
• Immagine principale (immagine)
• Didascalia (testo)

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

Annunci nativi di backfill

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

/6499/example/native-backfill

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

Ricorda di aggiornare il codice per fare riferimento agli ID effettivi delle unità pubblicitarie e dei modelli prima di procedere alla pubblicazione.

Esempi su GitHub

Esempio di implementazione completa degli annunci nativi:

Java Kotlin

Passaggi successivi

Esplora i seguenti argomenti:

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