Utilizzando gli annunci nativi puoi personalizzare gli annunci, ottenendo un'esperienza utente migliore. Un'esperienza utente migliore può aumentare il coinvolgimento e migliorare il rendimento complessivo.
Per ottenere il massimo dagli 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 del codice per i tuoi 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 ovunque tu voglia, ad esempio in una visualizzazione di riciclo utilizzata in un feed di notizie, in una finestra di dialogo o in qualsiasi altro punto della tua app.
I nostri modelli nativi vengono forniti come modulo 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. Vengono scalati per riempire la larghezza delle viste principali.
Modello piccolo
@layout/gnt_small_template_view
Il modello piccolo è ideale per le visualizzazioni del riciclatore o ogni volta che hai bisogno di una visualizzazione rettangolare lunga dell'annuncio. Ad esempio, potresti utilizzarlo per gli annunci in-feed.
Modello medio
@layout/gnt_medium_template_view
Il modello medio è pensato 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 introduttive.
Puoi 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 tuo progetto Android Studio esistente.
Scegli File > Nuovo > Modulo di importazione.
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.
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>
Successivamente, devi fornire il tuo annuncio nativo al modello quando viene caricato:
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 degli stili
Esistono due modi per definire lo stile del 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 di 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 del builder 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 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 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 di sfondo principale. |
Contribuisci
Abbiamo creato i modelli nativi per aiutarti a sviluppare rapidamente gli annunci nativi. Ci piacerebbe che contribuissi al nostro repository GitHub per aggiungere nuovi modelli o funzionalità. Inviaci una richiesta di pull e la esamineremo.