Definire lo stile dei layout degli annunci con i modelli nativi

Seleziona la piattaforma: iOS Flutter Android (legacy)

Scarica i modelli nativi

Nota importante: prima di continuare, scopri come caricare un annuncio nativo.

Utilizzando gli annunci nativi, puoi personalizzare i tuoi annunci per offrire un'esperienza utente migliore. Esperienze utente migliori possono aumentare il coinvolgimento e migliorare il rendimento complessivo.

Per ottenere il massimo dagli annunci nativi, è importante applicare uno stile ai 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 con codice completo per i tuoi annunci nativi, progettate per un'implementazione rapida e una modifica semplice. Con i modelli nativi, puoi implementare il tuo primo annuncio nativo in pochi minuti e personalizzarne rapidamente l'aspetto senza scrivere molto codice. Puoi posizionare questi modelli dove preferisci, ad esempio in una visualizzazione riciclatore utilizzata in un feed di notizie, in una finestra di dialogo o in qualsiasi altro punto della tua app.

Nota: se ti interessa progettare i tuoi layout nativi da zero, torna alla documentazione relativa agli annunci nativi avanzati.

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: piccolo e medio. Entrambi utilizzano la classe TemplateView e hanno proporzioni fisse. Verranno ridimensionati per riempire la larghezza delle visualizzazioni principali.

Modello piccolo

@layout/gnt_small_template_view

Il modello piccolo è ideale per le visualizzazioni di riciclo o ogni volta che hai bisogno di una visualizzazione di annuncio rettangolare lunga. Ad esempio, potresti utilizzarlo per gli annunci in-feed.

Modello medio

@layout/gnt_medium_template_view

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

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

Installazione dei 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')
           ...
   }
   

Utilizzo dei 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 nel 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. Successivamente, devi fornire al modello l'annuncio nativo 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 applicare uno stile al modello: utilizzando l'XML di layout tradizionale e utilizzando il nostro 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 builder disponibili. Il builder restituisce un oggetto NativeTemplateStyle che esegue l'override di 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.

Metodi di creazione per lo stile del modello nativo
withCallToActionTextTypeface	Typeface callToActionTextTypeface Il carattere tipografico della call to action.
withCallToActionTextSize	float callToActionTextSize Le dimensioni del testo della call to action.
withCallToActionTypefaceColor	int callToActionTypefaceColor Il colore del testo della call to action.
withCallToActionBackgroundColor	ColorDrawable callToActionBackgroundColor Il colore di sfondo della call to action.
withPrimaryTextTypeface	Typeface primaryTextTypeface Il carattere tipografico della prima riga di testo.
withPrimaryTextSize	float primaryTextSize Le dimensioni della prima riga di testo.
withPrimaryTextTypefaceColor	int primaryTextTypefaceColor Il colore della prima riga di testo.
withPrimaryTextBackgroundColor	ColorDrawable primaryTextBackgroundColor Il colore di sfondo della prima riga di testo.
withSecondaryTextTypeface	Typeface secondaryTextTypeface Il carattere tipografico della seconda riga di testo.
withSecondaryTextSize	float secondaryTextSize Le dimensioni della seconda riga di testo.
withSecondaryTextTypefaceColor	int secondaryTextTypefaceColor Il colore del testo della seconda riga di testo.
withSecondaryTextBackgroundColor	ColorDrawable secondaryTextBackgroundColor Il colore di sfondo della seconda riga di testo.
withTertiaryTextTypeface	Typeface tertiaryTextTypeface Il carattere tipografico della terza riga di testo.
withTertiaryTextSize	float tertiaryTextSize Le dimensioni della terza riga di testo.
withTertiaryTextTypefaceColor	int tertiaryTextTypefaceColor Il colore del testo della terza riga di testo.
withTertiaryTextBackgroundColor	ColorDrawable tertiaryTextBackgroundColor Il colore di sfondo della terza riga di testo.
withMainBackgroundColor	ColorDrawable mainBackgroundColor Il colore di sfondo principale.

Contribuisci

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