Questa pagina è stata tradotta dall'API Cloud Translation.

Modelli nativi

Con gli annunci nativi puoi personalizzare gli annunci migliorando l'esperienza utente. 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 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 personalizzarne rapidamente l'aspetto senza molto codice. Puoi posizionare questi modelli ovunque tu voglia, ad esempio in una visualizzazione dello strumento di riciclo usato in un feed di notizie, in una finestra di dialogo o in qualsiasi altro punto dell'app.

I nostri modelli nativi vengono forniti come modulo di Android Studio, quindi puoi includerli facilmente nel tuo progetto e utilizzarli come preferisci.

Dimensioni modello

Esistono due modelli: piccolo e medio. Entrambi utilizzano la classe TemplateView ed entrambi hanno proporzioni fisse. che verranno ridimensionate per riempire la larghezza delle viste principali.

Modello piccolo

@layout/gnt_small_template_view

Il modello piccolo è ideale per le visualizzazioni dello strumento 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. È utile per le pagine di destinazione o le pagine iniziali.

Ti invitiamo a fare delle prove con il posizionamento. Naturalmente, puoi anche modificare il codice sorgente e i file XML per adattarli alle tue esigenze.

Installare i modelli di annunci nativi

Per installare i modelli nativi, è sufficiente scaricare il file ZIP (utilizzando l'opzione Clona o download su GitHub) e importare il modulo nel tuo 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')
        ...
}

Utilizzare i modelli di annunci nativi

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

aggiungi modello al layout

L'utilizzo dei modelli prevede 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>

Successivamente, devi assegnare al modello l'annuncio nativo al caricamento:

MobileAds.initialize(this);
AdLoader adLoader = new AdLoader.Builder(this, "/6499/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());

Tasti dizionario degli stili

Esistono due modi per definire lo stile del modello: utilizzando il tradizionale XML di layout e 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 molte altre opzioni. Ecco tutti i metodi dello strumento 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 per lo stile Android che conosci già.

Metodi dello strumento di creazione per lo stile dei modelli nativi
`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` La dimensione 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 della seconda riga di testo.
`withSecondaryTextSize`	`float secondaryTextSize` La dimensione 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 della terza riga di testo.
`withTertiaryTextSize`	`float tertiaryTextSize` La dimensione 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 principale dello sfondo.

Contribuisci

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