Menata tata letak iklan dengan template native

Pilih platform: Android iOS Flutter

Download 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 keseluruhan Anda.

Untuk mendapatkan hasil maksimal dari iklan native, Anda harus menentukan 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 implementasi cepat dan modifikasi yang mudah. Dengan Template Native, Anda dapat menerapkan iklan native pertama dalam beberapa menit saja, dan Anda dapat menyesuaikan tampilan dengan cepat tanpa banyak kode. Anda dapat menempatkan template ini di mana saja, seperti dalam tampilan recycler yang digunakan dalam feed berita, dalam dialog, atau di tempat lain dalam aplikasi Anda.

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

Ukuran template

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

Template kecil

@layout/gnt_small_template_view

Template kecil ideal untuk tampilan recycler, atau kapan saja 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 tampilan halaman setengah hingga tiga perempat, tetapi juga dapat digunakan dalam feed. Template 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 kebutuhan 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.

  1. Pilih File > New > Import Module.

  2. Pilih folder nativetemplates.

    mengimpor template native

  3. Tambahkan baris berikut ke file build.gradle tingkat aplikasi:

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

Menggunakan template iklan native

Anda dapat menggunakan template di file XML tata letak mana pun, seperti grup tampilan lainnya.

menambahkan template ke tata letak

Penggunaan template adalah proses dua langkah:

  1. Pertama, Anda harus 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>
    
  2. Selanjutnya, Anda harus memberikan iklan native ke template saat dimuat:

    MobileAds.initialize(this);
    AdLoader adLoader = new AdLoader.Builder(this, "/21775744923/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());
    

Kunci kamus gaya

Ada dua cara untuk menentukan gaya template: 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 semua metode builder yang tersedia. Builder menampilkan objek NativeTemplateStyle yang mengganti gaya tata letak XML. Tata letak XML gnt_small_template.xml dan gnt_medium_template.xml menggunakan parameter gaya Android yang sama yang sudah Anda kenal.

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 (CTA).

withPrimaryTextTypeface Typeface primaryTextTypeface

Jenis huruf baris teks pertama.

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

withSecondaryTextBackgroundColor ColorDrawable secondaryTextBackgroundColor

Warna latar belakang baris teks kedua.

withTertiaryTextTypeface Typeface tertiaryTextTypeface

Jenis huruf baris teks ketiga.

withTertiaryTextSize float tertiaryTextSize

Ukuran baris teks ketiga.

withTertiaryTextTypefaceColor int tertiaryTextTypefaceColor

Warna teks baris teks ketiga.

withTertiaryTextBackgroundColor ColorDrawable tertiaryTextBackgroundColor

Warna latar belakang baris teks ketiga.

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 ke GitHub GitHub kami untuk menambahkan template atau fitur baru. Kirimkan permintaan pull dan kami akan memeriksanya.