Definire lo stile dei layout degli annunci con i modelli nativi

Scarica i modelli nativi

Utilizzando gli annunci nativi, puoi personalizzare i tuoi annunci, migliorando l'esperienza utente. Un'esperienza utente migliore può aumentare il coinvolgimento e migliorare il rendimento complessivo.

Per sfruttare al meglio gli annunci nativi, è importante definire lo stile dei layout degli annunci in modo che sembrino un'estensione naturale della tua app. Per aiutarti a iniziare, abbiamo creato i modelli nativi.

I modelli nativi sono visualizzazioni complete di codice per gli annunci nativi, progettate per un'implementazione rapida e una facile modifica. Con i modelli nativi, puoi implementare il tuo primo annuncio nativo in pochi minuti e personalizzare rapidamente l'aspetto senza dover scrivere molto codice. Puoi inserire questi modelli ovunque vuoi, ad esempio in una visualizzazione del riciclatore utilizzata in un feed di notizie, in una finestra di dialogo o in qualsiasi altro punto dell'app.

I nostri modelli nativi sono forniti come modulo di Android Studio, quindi è facile includerli nel tuo progetto e utilizzarli come preferisci.

Dimensioni dei modelli

Esistono due modelli: small e medium. Entrambi utilizzano la classe TemplateView e hanno un formato fisso. Verranno scalati per riempire la larghezza delle visualizzazioni principali.

Modello small

@layout/gnt_small_template_view

Il modello small è ideale per le visualizzazioni del riciclatore o ogni volta che hai bisogno di una visualizzazione di annunci rettangolare lunga. Ad esempio, puoi utilizzarlo per gli annunci in-feed.

Modello medium

@layout/gnt_medium_template_view

Il modello medium è progettato per essere una visualizzazione di pagina da metà a tre quarti, ma può essere utilizzato anche nei feed. È ideale per le pagine di destinazione o le pagine di avvio.

Non esitare a sperimentare con il posizionamento. Naturalmente, puoi anche modificare il codice sorgente e i file XML in base alle tue esigenze.

Installare i modelli di annunci nativi

Per installare i modelli nativi, scarica il file ZIP (utilizzando l' opzione Clona o scarica su GitHub) e importa il modulo nel progetto Android Studio esistente.

1. Scegli File > Nuovo > Importa modulo.

2. Seleziona la cartella nativetemplates.

   

3. Aggiungi la seguente riga al file build.gradle a livello di app:

   dependencies {
           ...
           implementation project(':nativetemplates')
           ...
   }
   

Utilizzare i modelli di annunci nativi

Puoi utilizzare il modello in qualsiasi file XML di layout, come qualsiasi altro gruppo di visualizzazioni.

L'utilizzo dei modelli è una procedura in due passaggi:

1. Innanzitutto, devi includere il modello come parte del layout.

   <LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context=".MainActivity"
      tools:showIn="@layout/activity_main" >
   
   <!--  This is your template view -->
   <com.google.android.ads.nativetemplates.TemplateView
      android:id="@+id/my_template"
      <!-- this attribute determines which template is used. The other option is
       @layout/gnt_medium_template_view -->
      app:gnt_template_type="@layout/gnt_small_template_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
   
   ...
   </LinearLayout>
   

2. Poi, devi fornire l'annuncio nativo al modello quando viene caricato:

   MobileAds.initialize(this);
   AdLoader adLoader = new AdLoader.Builder(this, "/21775744923/example/native")
       .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
           @Override
           public void onNativeAdLoaded(NativeAd nativeAd) {
               NativeTemplateStyle styles = new
                 NativeTemplateStyle.Builder().withMainBackgroundColor(background).build();
               TemplateView template = findViewById(R.id.my_template);
               template.setStyles(styles);
               template.setNativeAd(nativeAd);
           }
        })
        .build();
   
   adLoader.loadAd(new AdManagerAdRequest.Builder().build());
   

Chiavi del dizionario degli stili

Esistono due modi per definire lo stile del modello: utilizzando il tradizionale XML di layout e utilizzando l'oggetto NativeTemplateStyle.Builder. L'esempio di codice riportato sopra mostra come utilizzare l'oggetto NativeTemplateStyle.Builder per impostare il colore di sfondo principale, ma sono disponibili anche altre opzioni. Ecco tutti i metodi di creazione disponibili. Il builder restituisce un oggetto NativeTemplateStyle che sostituisce qualsiasi stile di layout XML. I layout XML gnt_small_template.xml e gnt_medium_template.xml utilizzano gli stessi parametri di stile Android che già conosci.

Contribuisci

Abbiamo creato i modelli nativi per aiutarti a sviluppare rapidamente gli annunci nativi. Ci piacerebbe che contribuissi al nostro GitHub per aggiungere nuovi modelli o funzionalità. Inviaci una richiesta di pull e la esamineremo.