Linee guida per il layout delle inserzioni di Audience Network per Android
I dispositivi Android sono disponibili in diverse forme e dimensioni, quindi devi fare attenzione al modo in cui appariranno le tue inserzioni native sui diversi dispositivi. Per garantire che il layout dell'inserzione nativa sia coerente su tutti i dispositivi, il layout deve essere flessibile. Questo significa che, invece di avere dimensioni statiche, il layout dovrebbe essere in grado di adattarsi a diverse dimensioni e orientamenti dello schermo.
La best practice per creare un layout responsive è usare ConstraintLayout, che è disponibile in una libreria API compatibile con Android 2.3 (API level 9) e versioni successive. Inoltre, con l'ultima versione di Android Studio, fornisce l'editor di layout per semplificare il processo di costruzione di ConstraintLayout. Sotto è riportato un tutorial su come creare l'interfaccia utente delle inserzioni native con ConstraintLayout dall'editor di layout.
Prima di proseguire, assicurati di aver consultato le guide Primi passi di Audience Network e Primi passi su Android.
Prerequisiti
- Assicurati di aver completato gli esempi di inserzione nativa e di banner nativo.
- Assicurati di aver letto la Normativa di Facebook per sviluppare un prodotto di qualità.
- Assicurati di aver letto Come sviluppare un'interfaccia utente flessibile con ConstraintLayout.
- Assicurati di aver letto Come sviluppare un'interfaccia utente con l'editor di layout.
Passaggi della creazione del layout per l'inserzione nativa
Passaggio 1: inclusione della libreria ConstraintLayout
Passaggio 2: layout della parte superiore dell'inserzione nativa (compresi icone, titolo ed etichetta)
Passaggio 3: layout di MediaView per l'inserzione nativa
Passaggio 4: layout di contesto social, corpo dell'inserzione e pulsante di call to action dell'inserzione nativa
Esempio: layout di vincolo XML completo
Demo: layout di vincolo in diversi orientamenti e dimensioni dello schermo
Esempio di layout di vincolo XML del banner nativo
Esempio: layout di vincolo XML completo
Demo: layout di vincolo in diversi orientamenti e dimensioni dello schermo
Criteri delle inserzioni native
Esempio non valido per gli elementi cliccabili
Esempio valido per gli elementi cliccabili
Passaggi della creazione del layout per l'inserzione nativa
Passaggio 1: inclusione della libreria ConstraintLayout
Per usare ConstraintLayout nel tuo progetto, procedi come segue:
Aggiungi l'istruzione seguente al build.gradle a livello del modulo (non al progetto!) per usare la versione più recente della libreria ConstraintLayout:
dependencies {
...
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
}In caso di problemi nella risoluzione di Constraint Layout Library, assicurati di aver sincronizzato il file Gradle e prova a riavviare Android Studio.
Una volta completata con successo la sincronizzazione del file Gradle con la libreria ConstraintLayout, dovresti essere in grado di creare un file di layout XML con ConstraintLayout:
Passaggio 2: layout della parte superiore dell'inserzione nativa (compresi icone, titolo ed etichetta)
Innanzitutto, aggiungi Horizontal Guidelines e imposta layout_constraintGuide_begin come 55dp, il quale viene utilizzato per vincolare altre visualizzazioni. Aggiungi un com.facebook.ads.AdIconView, vincolane i lati superiore e sinistro al layout principale e il lato inferiore alla linea guida.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<com.facebook.ads.MediaView
android:id="@+id/native_ad_icon"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="@+id/below_ad_icon_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="55dp" />
...
</android.support.constraint.ConstraintLayout>Successivamente, aggiungi un altro Horizontal Guideline e imposta layout_constraintGuide_begin come 27.5dp, il quale viene utilizzato per separare il testo del nome dell'inserzionista e l'etichetta dello sponsor. Aggiungi native_advertiser_name, native_ad_sponsored_label e ad_choices_container come segue:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
...
<TextView
android:id="@+id/native_advertiser_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/black"
android:textSize="15sp"
android:text="@string/placeholder"
app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />
<android.support.constraint.Guideline
android:id="@+id/separate_advertiser_name_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="27.5dp" />
<TextView
android:id="@+id/native_ad_sponsored_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />
<LinearLayout
android:id="@+id/ad_choices_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
...
</android.support.constraint.ConstraintLayout>Passaggio 3: layout di MediaView per l'inserzione nativa
Aggiungi MediaView e vincolalo attraverso la Horizontal Guideline creata nel passaggio 2 come segue:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
...
<com.facebook.ads.MediaView
android:id="@+id/native_ad_media"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
app:layout_constraintEnd_toEndOf="@+id/ad_choices_container"
app:layout_constraintStart_toStartOf="@+id/native_ad_icon"
app:layout_constraintTop_toTopOf="@+id/below_ad_icon_guideline" />
...
</android.support.constraint.ConstraintLayout>Passaggio 4: layout di contesto social, corpo dell'inserzione e pulsante di call to action dell'inserzione nativa
Aggiungi native_ad_social_context, native_ad_body e native_ad_call_to_action e vincolali sotto a MediaView.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
...
<TextView
android:id="@+id/native_ad_social_context"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginStart="3dp"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_ad_media"
app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />
<TextView
android:id="@+id/native_ad_body"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="2"
android:textColor="@android:color/black"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_ad_social_context"
app:layout_constraintTop_toBottomOf="@+id/native_ad_social_context" />
<Button
android:id="@+id/native_ad_call_to_action"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginTop="15dp"
android:background="#4286F4"
android:textSize="12sp"
android:textColor="@android:color/white"
android:text="@string/placeholder"
android:paddingStart="20dp"
android:paddingEnd="20dp"
app:layout_constraintEnd_toEndOf="@id/native_ad_media"
app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />
...
</android.support.constraint.ConstraintLayout>Esempio: layout di vincolo XML completo
Ecco un esempio di layout di vincolo XML completo per un'inserzione nativa:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<com.facebook.ads.MediaView
android:id="@+id/native_ad_icon"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="@+id/below_ad_icon_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="55dp" />
<TextView
android:id="@+id/native_advertiser_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/black"
android:textSize="15sp"
android:text="@string/placeholder"
app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />
<android.support.constraint.Guideline
android:id="@+id/separate_advertiser_name_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="27.5dp" />
<TextView
android:id="@+id/native_ad_sponsored_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />
<LinearLayout
android:id="@+id/ad_choices_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<com.facebook.ads.MediaView
android:id="@+id/native_ad_media"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
app:layout_constraintEnd_toEndOf="@+id/ad_choices_container"
app:layout_constraintStart_toStartOf="@+id/native_ad_icon"
app:layout_constraintTop_toTopOf="@+id/below_ad_icon_guideline" />
<TextView
android:id="@+id/native_ad_social_context"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginStart="3dp"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_ad_media"
app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />
<TextView
android:id="@+id/native_ad_body"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="2"
android:textColor="@android:color/black"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_ad_social_context"
app:layout_constraintTop_toBottomOf="@+id/native_ad_social_context" />
<Button
android:id="@+id/native_ad_call_to_action"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginTop="15dp"
android:background="#4286F4"
android:textSize="12sp"
android:textColor="@android:color/white"
android:text="@string/placeholder"
android:paddingStart="20dp"
android:paddingEnd="20dp"
app:layout_constraintEnd_toEndOf="@id/native_ad_media"
app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />
</android.support.constraint.ConstraintLayout>Demo: layout di vincolo in diversi orientamenti e dimensioni dello schermo
Hai già creato un ConstraintLayout per la tua inserzione nativa, che consentirà la migliore esperienza utente nei diversi orientamenti e dimensioni dello schermo. Il ConstraintLayout dovrebbe risultare coerente su telefoni e tablet Android. Nota: il layout si trova all'interno di ScrollView; sui telefoni con orientamento Landscape, è scorrevole quando l'inserzione nativa non viene interamente visualizzata.
Esempio di layout di vincolo del banner nativo
I banner nativi sono stati resi disponibili sull'ultimo SDK Audience Network di Meta. I passaggi per la creazione del layout di vincolo per il banner nativo sono simili a Native Ad. Puoi seguire i passaggi precedenti per creare il layout del Native Banner Ad o copiare il seguente codice di layout XML di esempio nel tuo progetto.
Esempio: layout di vincolo XML completo
Ecco un esempio di layout di vincolo XML completo per un banner nativo:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="3dp">
<RelativeLayout
android:id="@+id/ad_choices_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="2dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/native_ad_sponsored_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="Placeholder"
app:layout_constraintStart_toEndOf="@id/ad_choices_container"
app:layout_constraintTop_toTopOf="parent" />
<com.facebook.ads.MediaView
android:id="@+id/native_ad_icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="3dp"
android:gravity="center"
app:layout_constraintStart_toStartOf="@id/ad_choices_container"
app:layout_constraintTop_toBottomOf="@id/ad_choices_container" />
<TextView
android:id="@+id/native_advertiser_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:textColor="@android:color/black"
android:textSize="15sp"
android:textStyle="bold"
android:ellipsize="end"
android:lines="1"
app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />
<android.support.constraint.Guideline
android:id="@+id/separate_advertiser_name_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="43dp" />
<TextView
android:id="@+id/native_ad_social_context"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:ellipsize="end"
android:lines="1"
app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />
<Button
android:id="@+id/native_ad_call_to_action"
android:layout_width="80dp"
android:layout_height="50dp"
android:gravity="center"
android:background="#4286F4"
android:textSize="12sp"
android:textColor="@android:color/white"
android:paddingLeft="3dp"
android:paddingRight="3dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/native_ad_icon" />
</android.support.constraint.ConstraintLayout>Demo: layout di vincolo in diversi orientamenti e dimensioni dello schermo
Conformità ai criteri delle inserzioni native
Per poter creare un prodotto di qualità, gli sviluppatori devono rispettare la Normativa di Audience Network di Meta ogni volta che viene implementato il layout delle inserzioni native o dei banner nativi. Devi sempre dare agli utenti il pieno controllo sul clic. Soprattutto per gli elementi cliccabili nell'inserzione, devi assicurarti che solo i titoli, gli URL, le call to action e le risorse di immagine delle inserzioni siano cliccabili. Inoltre, lo spazio bianco nel testo del titolo o nelle visualizzazioni delle immagini non deve essere cliccabile.
Esempio di configurazione errata degli elementi cliccabili
Quando crei il layout per un'inserzione nativa, non devi utilizzare larghezza e altezza fisse per TextView, AdIcon e MediaView in modo da evitare white space nei titoli delle inserzioni. Sotto è riportato un esempio di quello che non dovresti mai fare:
Ecco come appare un esempio non valido:
Esempio di configurazione corretta degli elementi cliccabili
Per creare un'inserzione nativa di qualità, segui i passaggi precedenti per sviluppare un layout di vincolo per un'inserzione nativa o un banner nativo. Ad esempio, devi sempre applicare "wrap_content" sia alla larghezza sia all'altezza in TextView; puoi assegnare una larghezza fissa o match_parent a un'AdIcon o a MediaView, ma devi usare wrap_content per l'altezza. Sotto puoi vedere come appare il layout se rispetti la Normativa di Audience Network di Meta:
Passaggi successivi
- Segui le nostre guide per integrare i vari formati pubblicitari nella tua app:
Test dell'integrazione delle inserzioni con la tua app
Invio dell'app per l'analisi.
Non appena riceviamo una richiesta per un'inserzione dalla tua app o dal tuo sito web, la sottoporremo ad analisi per verificare che rispetti le normative di Audience Network e gli Standard della community di Facebook. Scopri di più sul nostro processo di analisi.
Ulteriori risorse |
Guida introduttivaGuida tecnica per muovere i primi passi con Audience Network | Riferimento per l'APIRiferimento per l'SDK di Facebook per Android |