Halaman ini diterjemahkan oleh Cloud Translation API.

Template Native

Dengan iklan native, Anda dapat menyesuaikan iklan sehingga menghasilkan pengalaman pengguna yang lebih baik. Pengalaman pengguna yang lebih baik dapat meningkatkan engagement dan meningkatkan hasil secara keseluruhan.

Untuk memaksimalkan iklan native, Anda harus menata gaya tata letak iklan agar terasa seperti ekstensi alami aplikasi Anda. Untuk membantu Anda memulai, kami telah membuat Template Native.

Template Native adalah tampilan lengkap kode untuk iklan native Anda, yang dirancang untuk penerapan cepat dan modifikasi yang mudah. Dengan Template Native, Anda dapat menerapkan iklan native pertama hanya dalam beberapa menit, dan Anda dapat menyesuaikan tampilan dan nuansa dengan cepat tanpa banyak kode. Anda dapat menempatkan template ini di mana saja yang Anda inginkan, seperti dalam tampilan recycler yang digunakan di feed berita, dalam dialog, atau di tempat lain di aplikasi Anda.

Template native kami disediakan sebagai modul Android Studio, sehingga mudah untuk menyertakannya dalam project dan menggunakannya sesuai keinginan Anda.

Ukuran template

Ada dua template: kecil dan sedang. Keduanya menggunakan class TemplateView dan keduanya memiliki rasio aspek tetap. View ini akan diskalakan untuk mengisi lebar tampilan induknya.

Template kecil

@layout/gnt_small_template_view

Template kecil ideal untuk tampilan recycler, atau setiap kali Anda memerlukan tampilan iklan persegi panjang yang panjang. Misalnya, Anda dapat menggunakannya untuk iklan dalam feed.

Template sedang

@layout/gnt_medium_template_view

Template sedang dimaksudkan untuk menjadi kunjungan halaman setengah hingga tiga perempat, tetapi juga dapat digunakan di feed. Gaya ini cocok untuk halaman landing atau halaman pembuka.

Jangan ragu untuk bereksperimen dengan penempatan. Tentu saja, Anda juga dapat mengubah kode sumber dan file XML agar sesuai dengan persyaratan Anda.

Menginstal template iklan native

Untuk menginstal template native, cukup download file zip (menggunakan opsi Clone or download di GitHub) dan impor modul ke project Android Studio yang ada.

Pilih File > New > Import Module.
Pilih folder nativetemplates.

Tambahkan baris berikut ke file build.gradle level aplikasi Anda:

dependencies {
        ...
        implementation project(':nativetemplates')
        ...
}

Menggunakan template iklan native

Anda dapat menggunakan template dalam file XML tata letak apa pun, seperti grup tampilan lainnya.

menambahkan template ke tata letak

Menggunakan template adalah proses dua langkah:

Pertama, Anda perlu menyertakan template sebagai bagian dari tata letak.

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

Selanjutnya, Anda harus memberikan iklan native ke template saat dimuat:

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());

Kunci kamus gaya

Ada dua cara untuk menata gaya template Anda: menggunakan XML tata letak tradisional dan menggunakan objek NativeTemplateStyle.Builder kami. Contoh kode di atas menunjukkan cara menggunakan objek NativeTemplateStyle.Builder untuk menetapkan warna latar belakang utama, tetapi ada juga berbagai opsi lainnya. Berikut adalah semua metode builder yang tersedia. Builder menampilkan objek NativeTemplateStyle yang mengganti gaya visual tata letak XML. Tata letak XML gnt_small_template.xml dan gnt_medium_template.xml menggunakan parameter gaya Android yang sama dengan yang sudah Anda pahami.

Metode builder untuk gaya template native
`withCallToActionTextTypeface`	`Typeface callToActionTextTypeface` Jenis huruf untuk pesan ajakan (CTA).
`withCallToActionTextSize`	`float callToActionTextSize` Ukuran teks pesan ajakan (CTA).
`withCallToActionTypefaceColor`	`int callToActionTypefaceColor` Warna teks pesan ajakan (CTA).
`withCallToActionBackgroundColor`	`ColorDrawable callToActionBackgroundColor` Warna latar belakang pesan ajakan.
`withPrimaryTextTypeface`	`Typeface primaryTextTypeface` Jenis huruf baris pertama teks.
`withPrimaryTextSize`	`float primaryTextSize` Ukuran baris teks pertama.
`withPrimaryTextTypefaceColor`	`int primaryTextTypefaceColor` Warna baris teks pertama.
`withPrimaryTextBackgroundColor`	`ColorDrawable primaryTextBackgroundColor` Warna latar belakang baris teks pertama.
`withSecondaryTextTypeface`	`Typeface secondaryTextTypeface` Jenis huruf baris teks kedua.
`withSecondaryTextSize`	`float secondaryTextSize` Ukuran baris teks kedua.
`withSecondaryTextTypefaceColor`	`int secondaryTextTypefaceColor` Warna teks baris kedua.
`withSecondaryTextBackgroundColor`	`ColorDrawable secondaryTextBackgroundColor` Warna latar belakang baris kedua teks.
`withTertiaryTextTypeface`	`Typeface tertiaryTextTypeface` Jenis huruf baris ketiga teks.
`withTertiaryTextSize`	`float tertiaryTextSize` Ukuran baris ketiga teks.
`withTertiaryTextTypefaceColor`	`int tertiaryTextTypefaceColor` Warna teks baris ketiga teks.
`withTertiaryTextBackgroundColor`	`ColorDrawable tertiaryTextBackgroundColor` Warna latar belakang baris ketiga teks.
`withMainBackgroundColor`	`ColorDrawable mainBackgroundColor` Warna latar belakang utama.

Kontribusi

Kami telah membuat Template Native untuk membantu Anda mengembangkan iklan native dengan cepat. Kami ingin Anda berkontribusi pada repo GitHub kami untuk menambahkan template atau fitur baru. Kirim permintaan pull kepada kami dan kami akan melihatnya.