Questa pagina è stata tradotta dall'API Cloud Translation.

Modelli nativi

Con gli annunci nativi puoi personalizzare i tuoi annunci, migliorando l'esperienza utente. Esperienze utente migliori possono aumentare il coinvolgimento e migliorare il tuo rendimento complessivo.

Per ottenere il massimo dagli annunci nativi, è importante impostare 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 posizionare questi modelli dove preferisci, ad esempio in una visualizzazione RecyclerView utilizzata in un feed di notizie, in una finestra di dialogo o in qualsiasi altro punto della tua app.

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

Dimensioni dei modelli

Esistono due modelli: piccolo e medio. Entrambi utilizzano la classe TemplateView e hanno proporzioni fisse. Verranno ridimensionate in base alla larghezza delle viste principali.

Modello piccolo

@layout/gnt_small_template_view

Il modello piccolo è ideale per le visualizzazioni del riciclo o ogni volta che hai bisogno di una visualizzazione dell'annuncio rettangolare lunga. Ad esempio, puoi 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.

Non esitare a sperimentare 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.

Scegli File > Nuovo > Importa modulo.
Seleziona la cartella nativetemplates.

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.

Aggiungere un modello al layout

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

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>

A questo punto, devi assegnare il tuo annuncio nativo al modello al momento del caricamento:

MobileAds.initialize(this);
AdLoader adLoader = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    .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 AdRequest.Builder().build());

Chiavi del dizionario di stili

Esistono due modi per applicare uno stile al modello: utilizzando il layout XML tradizionale e utilizzando il nostro oggetto NativeTemplateStyle.Builder. L'esempio di codice riportato sopra dimostra 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 generatore 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.

Metodi di creazione per lo stile del modello nativo
`withCallToActionTextTypeface`	`Typeface callToActionTextTypeface` Il carattere dell'invito all'azione.
`withCallToActionTextSize`	`float callToActionTextSize` Le dimensioni del testo dell'invito all'azione.
`withCallToActionTypefaceColor`	`int callToActionTypefaceColor` Il colore del testo dell'invito all'azione.
`withCallToActionBackgroundColor`	`ColorDrawable callToActionBackgroundColor` Il colore di sfondo dell'invito all'azione.
`withPrimaryTextTypeface`	`Typeface primaryTextTypeface` Il carattere 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 tipo di carattere 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 tipo di carattere 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 modelli di annunci nativi per aiutarti a sviluppare rapidamente annunci nativi. Sarebbe fantastico se potessi contribuire al nostro repo GitHub aggiungendo nuovi modelli o funzionalità. Inviaci una richiesta di pull e daremo un'occhiata.