Nativo avanzato

Visualizza un annuncio nativo

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 è obbligatorio farlo immediatamente. Per rendere la visualizzazione formati di annunci definiti dal sistema, l'SDK offre alcune risorse utili, descritti di seguito.

Classe NativeAdView

Per il formato NativeAd, c'è il corrispondente NativeAdView . Questo corso è un ViewGroup che i publisher devono usare come radice per NativeAd. Un singolo NativeAdView corrisponde a un singolo annuncio nativo. Ogni visualizzazione utilizzata per visualizzare gli asset dell'annuncio (ad esempio, il 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 avere il seguente aspetto:

<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'istanza NativeAdView lo compila con 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 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 visualizzazione di un annuncio nativo.

Le classi di visualizzazione dell'annuncio forniscono anche metodi utilizzati per registrare la visualizzazione utilizzata per ogni singolo asset e uno per registrare l'oggetto NativeAd stesso. La registrazione delle viste in questo modo consente all'SDK di gestire automaticamente le attività quali:

  • Registrazione dei clic
  • Registrazione di impressioni quando il primo pixel è visibile sullo schermo.
  • Visualizzazione dell'overlay AdChoices per le creatività di backfill native, attualmente limitata a un gruppo selezionato di publisher

Overlay Scegli Tu!

Un overlay Scegli Tu! viene aggiunto come visualizzazione dell'annuncio dall'SDK quando viene restituito un annuncio di backfill. Se la tua app utilizza il backfill degli annunci nativi, lascia spazio nella angolo della visualizzazione dell'annuncio nativo per il logo Scegli Tu! inserito automaticamente. Inoltre, è importante che l'overlay Scegli Tu! sia facilmente visibile, quindi scegli uno sfondo i colori e le immagini in modo appropriato. Per ulteriori informazioni sull'overlay aspetto e funzione, fai riferimento all'implementazione degli annunci nativi programmatici linee guida.

Attribuzione degli annunci nativi programmatici

Quando mostri annunci nativi programmatici, devi mostrare l'attribuzione dell'annuncio a indicano che la visualizzazione è una pubblicità. Scopri di più nelle nostre norme linee guida.

Esempio di codice

Di seguito sono riportati i passaggi per mostrare 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 ViewGroup.
  3. Registra il MediaView se il layout degli annunci nativi include un asset multimediale di grandi dimensioni.
  4. Registra l'oggetto annuncio con la classe ViewGroup.

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

Di seguito sono riportate 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 gonfia un layout XML che contiene visualizzazioni per la visualizzazione di un dell'annuncio e di individuare un riferimento all'NativeAdView. Tieni presente che puoi anche riutilizza 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. Compila e registra le visualizzazioni delle risorse

    Questo codice di esempio consente di individuare la vista utilizzata per mostrare il titolo e di impostarne il testo utilizzando l'asset stringa fornito dall'oggetto ad e lo registra con 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 di localizzazione, impostazione del valore e registrazione della vista la classe di visualizzazione dell'annuncio deve essere ripetuta per ogni asset fornito dal che l'app mostrerà.

  3. Gestire i clic

    Non implementare gestori dei clic personalizzati nelle visualizzazioni all'interno o all'interno del visualizzazione annuncio nativo. Per osservare autonomamente gli eventi di clic, utilizza l'annuncio listener.

    L'SDK gestisce i clic sugli asset visualizzazione dell'annuncio a condizione che tu compilare e registrare le visualizzazioni degli asset, come spiegato nella sezione precedente.

    Ecco un esempio in cui viene utilizzato un annuncio listener per osservare eventi di clic:

    Java

    AdLoader adLoader = new AdLoader.Builder(context, "/21775744923/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, "/21775744923/example/native")
        ...
        .withAdListener(object : AdListener() {
            override fun onAdFailedToLoad(adError: LoadAdError) {
                // Handle the failure by logging, altering the UI, and so on.
            }
        })
        .build()
    
  4. Registra MediaView

    Devi utilizzare MediaView anziché l'asset ImageView se vuoi includere un asset immagine principale nel layout per il tuo annuncio nativo annuncio.

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

    MediaView può essere definito in un layout XML o creato in modo dinamico. it deve essere posizionato all'interno della gerarchia di visualizzazione di un NativeAdView, proprio come qualsiasi un'altra visualizzazione delle risorse. 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 propri contenuti compilati. Per farlo, usa getMediaContent() per recuperare i contenuti multimediali che possono essere trasmessi a un MediaView, Ecco uno snippet di codice che imposta i contenuti multimediali visualizza:

    Java

    mediaView.setMediaContent(nativeAd.getMediaContent());
    

    Kotlin

    mediaView.mediaContent = nativeAd.mediaContent
    

    ImageScaleType

    La classe MediaView ha una proprietà ImageScaleType quando viene visualizzata in formato Docker. Se vuoi cambiare la modalità di ridimensionamento di un'immagine in MediaView, imposta il ImageView.ScaleType corrispondente utilizzando 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à mediaContent MediaView è impostata con un'istanza MediaContent:

    • Se un asset video è disponibile, viene inserito nel buffer e viene avviata la riproduzione all'interno MediaView. Per capire se un asset video è disponibile, controlla hasVideoContent().

    • Se l'annuncio non contiene un asset video, viene scaricato l'asset mainImage. e collocato all'interno del MediaView.

    Per impostazione predefinita, mainImage è il primo asset immagine scaricato. Se setReturnUrlsForImageAssets(true) è utilizzato, mainImage è null e devi imposta la proprietà mainImage sull'immagine scaricata manualmente. Tieni presente che L'immagine verrà utilizzata solo quando non sono disponibili asset video.

  5. Registrare l'oggetto dell'annuncio nativo

    Questo passaggio finale registra l'oggetto dell'annuncio nativo con la vista responsabile della sua visualizzazione:

    Java

    adView.setNativeAd(ad);
    

    Kotlin

    adView.setNativeAd(ad)
    

Elimina annuncio

Al termine della visualizzazione dell'annuncio nativo, devi distruggerlo in modo che venga raccolto correttamente come spazzatura.

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()

Testare il codice dell'annuncio nativo

Annunci venduti direttamente

Se vuoi vedere come sono gli annunci nativi venduti direttamente, puoi utilizzo di questo ID unità pubblicitaria Ad Manager:

/21775744923/example/native

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

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

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

Annunci di backfill nativi

Al momento, il backfill di Ad Exchange è limitato a un gruppo selezionato di publisher. A verifica il comportamento degli annunci nativi di backfill, utilizza questa unità pubblicitaria Ad Manager:

/21775744923/example/native-backfill

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

Ricorda di aggiornare il codice in modo che faccia riferimento agli ID effettivi delle unità pubblicitarie e dei modelli. prima della pubblicazione.

Esempi su GitHub

Esempio di implementazione completa degli annunci nativi:

Java Kotlin

Passaggi successivi

Esplora i seguenti argomenti: