Pedoman Tata Letak Iklan Audience Network untuk Android
Perangkat Android tersedia dalam berbagai bentuk dan ukuran, jadi Anda sebaiknya mempertimbangkan tampilan iklan native Anda di perangkat yang berbeda-beda. Untuk menjamin tata letak iklan native Anda konsisten di berbagai perangkat, tata letak harus fleksibel. Dengan kata lain, alih-alih menentukan tata letak dengan dimensi statis, tata letak harus responsif terhadap ukuran dan orientasi layar yang berbeda-beda.
Praktik terbaik untuk membuat tata letak yang responsif adalah menggunakan ConstraintLayout, yang tersedia dalam pustaka API yang kompatibel dengan Android 2.3 (API level 9) dan lebih tinggi. Selain itu, dengan versi terbaru Android Studio, tersedia Layout Editor untuk menyederhanakan proses membuat ConstraintLayout. Di bawah ini tutorial tentang cara membuat UI iklan native dengan ConstraintLayout oleh Layout Editor.
Pastikan Anda sudah membaca tuntas panduan Memulai dan Memulai Android Audience Network sebelum melanjutkan.
Prasyarat
- Pastikan Anda telah menyelesaikan contoh Iklan Native dan Iklan Banner Native.
- Pastikan Anda telah membaca Kebijakan Facebook untuk membuat produk berkualitas.
- Pastikan Anda telah membaca Membuat UI Responsif dengan ConstraintLayout.
- Pastikan Anda telah membaca Membuat UI dengan Layout Editor.
Langkah-Langkah Pembuatan Tata Letak Iklan Native
Langkah 1: Menyertakan Pustaka ConstraintLayout
Langkah 2: Bagian Atas Tata Letak Iklan Native (termasuk ikon, judul, dan label)
Langkah 3: Tampilan Media Tata Letak Iklan Native
Langkah 4: Konteks Sosial, Badan Iklan, dan Tombol Tindakan Tata Letak Iklan Native
Contoh: Tata Letak Batasan XML Lengkap
Demo: Tata Letak Batasan di Berbagai Orientasi dan Ukuran Layar
Contoh Tata Letak XML Batasan Iklan Banner Native
Contoh: Tata Letak Batasan XML Lengkap
Demo: Tata Letak Batasan di Berbagai Orientasi dan Ukuran Layar
Kebijakan Iklan Native
Contoh Buruk untuk Elemen yang Dapat Diklik
Contoh Baik untuk Elemen yang Dapat Diklik
Langkah-Langkah Pembuatan Tata Letak Iklan Native
Langkah 1: Menyertakan Pustaka ConstraintLayout
Untuk menggunakan ConstraintLayout di proyek Anda, lanjutkan sebagai berikut:
Tambahkan pernyataan berikut ke build.gradle level modul Anda (bukan proyek!), untuk menggunakan pustaka ConstraintLayout terbaru:
dependencies {
...
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
}Jika ada isu dalam menyelesaikan Constraint Layout Library, pastikan Anda telah menyinkronkan file Gradle Anda dan mencoba memulai ulang Android Studio.
Setelah Anda berhasil selesai menyinkronkan file Gradle dengan pustaka ConstraintLayout, Anda seharusnya dapat membuat file tata letak XML dengan ConstraintLayout:
Langkah 2: Bagian Atas Tata Letak Iklan Native (termasuk ikon, judul, dan label)
Pertama, tambahkan Horizontal Guidelines dan atur layout_constraintGuide_begin sebagai 55dp, yang digunakan untuk membatasi tampilan lain. Tambahkan com.facebook.ads.MediaView, batasi sisi atas dan kirinya ke tata letak induk, dan batasi sisi bawahnya sesuai pedoman.
<?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>Berikutnya, tambahkan Horizontal Guideline lagi, atur layout_constraintGuide_begin sebagai 27.5dp, yang digunakan untuk memisahkan teks nama pengiklan dan label sponsor. Tambahkan native_advertiser_name dan native_ad_sponsored_label dan ad_choices_container sebagai berikut:
<?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>Langkah 3: Tampilan Media Tata Letak Iklan Native
Tambahkan MediaView dan batasi dengan Horizontal Guideline yang dibuat di Langkah 2 sebagai berikut:
<?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>Langkah 4: Konteks Sosial, Badan Iklan, dan Tombol Tindakan Tata Letak Iklan Native
Tambahkan native_ad_social_context, native_ad_body, dan native_ad_call_to_action serta batasi ketiganya di bawah 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>Contoh: Tata Letak Batasan XML Lengkap
Berikut ini contoh tata letak batasan XML yang lengkap untuk iklan native:
<?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: Tata Letak Batasan di Berbagai Orientasi dan Ukuran Layar
Anda telah membuat ConstraintLayout untuk iklan native, yang akan memiliki pengalaman pengguna terbaik untuk orientasi dan ukuran layar yang berbeda-beda. ConstraintLayout harus terlihat konsisten baik di ponsel maupun tablet Android. Catatan: tata letak ada di dalam ScrollView; dapat digulir dalam orientasi ponsel Landscape saat iklan native tidak ditampilkan secara lengkap.
Contoh Tata Letak Batasan Iklan Banner Native
Iklan Banner Native tersedia di Meta Audience Network SDK terbaru. Langkah-langkah untuk membuat tata letak batasan spanduk native mirip dengan Native Ad. Anda dapat mengikuti langkah-langkah di atas untuk membuat Tata Letak Native Banner Ad, atau menyalin contoh kode tata letak XML berikut ke proyek Anda.
Contoh: Tata Letak Batasan XML Lengkap
Berikut ini contoh lengkap tata letak batasan XML untuk iklan banner native:
<?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: Tata Letak Batasan di Berbagai Orientasi dan Ukuran Layar
Kepatuhan Kebijakan Iklan Native
Untuk membuat produk berkualitas, developer harus mengikuti Kebijakan Meta Audience Network setiap kali Anda menerapkan Tata Letak Iklan Native atau Iklan Banner Native. Anda harus selalu memberikan kontrol penuh atas klik kepada pengguna. Khususnya untuk elemen yang dapat diklik di iklan, Anda harus memastikan hanya judul iklan, URL, Ajakan Bertindak, dan aset gambar yang dapat diklik. Selain itu, ruang putih pada teks judul atau tayangan gambar tidak dapat diklik.
Contoh Buruk untuk Elemen yang Dapat Diklik
Setiap kali membuat tata letak iklan native, Anda tidak boleh menggunakan lebar dan tinggi yang tetap untuk TextView, AdIcon, dan MediaView untuk menghindari white space di judul iklan. Di bawah adalah contoh buruk yang tidak boleh dilakukan:
Berikut ini tampilan contoh yang salah:
Contoh Baik untuk Elemen yang Dapat Diklik
Untuk membuat iklan native berkualitas, ikuti langkah-langkah di atas untuk membuat tata letak terbatas untuk iklan native atau iklan banner native. Contoh: Anda harus selalu menerapkan 'wrap_content' pada lebar dan tinggi di TextView; Anda dapat menentukan lebar atau match_parent yang tetap untuk AdIcon atau MediaView, tetapi Anda sebaiknya menggunakan wrap_content untuk tinggi. Di bawah ini tampilan tata letak jika Anda mengikuti Kebijakan Meta Audience Network:
Langkah Berikutnya
- Ikuti panduan kami untuk mengintegrasikan berbagai Format Iklan ke dalam aplikasi Anda:
Integrasi iklan uji dengan aplikasi Anda
Ajukan aplikasi Anda untuk ditinjau.
Begitu kami menerima permintaan untuk iklan dari aplikasi atau situs web Anda, kami akan meninjaunya untuk memastikan kepatuhan pada kebijakan Audience Network dan standar komunitas Facebook. Pelajari selengkapnya tentang proses peninjauan kami.
Sumber Informasi Lainnya |
Panduan MemulaiPanduan teknis untuk memulai menggunakan Audience Network | Referensi APIReferensi Facebook SDK untuk Android |