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.
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.