AdMob: Tingkatkan Penghasilan Dengan Native Express
Assalamualaikum Warahmatullahi Wabarakatuh. Pada Postingan sebelumnya, saya sudah menjalaskan mengendai Apa itu Native Ads?. Pada tutorial kalian ini kita akan belajar cara menggunakan iklan jenis native express untuk monetisasi aplikasi, iklan jenis ini sangat unik, karena tampilannya bisa kita edit sesuai keinginan, seperti warna font, background, judul, dll, secara langsung atau menggunakan CSS.
Iklan Jenis ini mirip dengan Iklan Spanduk/Banner Ads karena iklan persegi empat ini dapat kita pasang ke tata letak dan ukuran yang kita inginkan. Perbedaan utamanya adalah kita dapat mengontrol tampilan/style iklan tersebut, seperti ukuran gambar, font, warna, dan lain-lain dengan menggunakan CSS. AdMob menggabungkan template ini dengan aset pengiklan, seperti ikon, gambar, dan teks, sehingga iklan yang ditampilkan menjadi lebih bagus.
Tingkatkan Penghasilan Dengan Native Express
3) Pilih jenis format iklan Native.
4) Berinama pada Unit iklan tersebut, pilih ukuran yang ingin kita gunakan, pada tutorial ini, kita akan menggunakan ukuran kecil, lalu klik gambar tersebut:
5) Disini kalian bisa memilih jenis kerangka apa yang ingin digunakan, pilihlah sesuai dengan selera kalian.
6) Pada bagian ini, kalian bisa mendesign gaya/tampilan pada unit iklan tersebut yang akan ditampilkan pada aplikasi, kalian bisa mendesignnya secara langsung atau menggunakan CSS.
7) Jangan lupa untuk mencatat ID Unit Iklan tersebut, untuk kita gunakan pada project aplikasi.
9) Buka file build.gradle(App-level) lalu masukan library berikut ini, didalam dependencies dan akan terdownload secara otomatis.
10) Kita akan menggunakan widget/komponen NativeExpressAdView dan menggunakan RelativeLayout sebagai containernya.
Kalian edit file.xmlnya seperti berikut ini:
Berikut ini merupakan atribut-atribut yang perlu dipasang:
Pada activity kalian, masukan source code berikut ini:
Jalankan project tersebut, maka hasilnya akan seperti ini:
Sekian dari saya, mohon maaf bila ada kesalahan, dan jangan lupa untuk follow fansPage WILDAN TECHNO ART untuk mendaptkan update terbaru dari blog ini, jika ada yang ingin kalian tanyakan, silakan isi komentar dibawah. Wassalamualaikum Warahmatullahi Wabarakatuh.
Iklan Jenis ini mirip dengan Iklan Spanduk/Banner Ads karena iklan persegi empat ini dapat kita pasang ke tata letak dan ukuran yang kita inginkan. Perbedaan utamanya adalah kita dapat mengontrol tampilan/style iklan tersebut, seperti ukuran gambar, font, warna, dan lain-lain dengan menggunakan CSS. AdMob menggabungkan template ini dengan aset pengiklan, seperti ikon, gambar, dan teks, sehingga iklan yang ditampilkan menjadi lebih bagus.
Tingkatkan Penghasilan Dengan Native Express
1) Kunjungi situs AdMob, dan login dengan akun Gmail kalian https://www.google.co.id/admob/
2) Pada menu beranda, klik Tambahkan Aplikasi, lalu msukan nama aplikasi, maka akan terlihat ID Aplikasi tersebut, seperti gambar dibawah ini, setelah itu klik BUAT UNIT IKLAN.
2) Pada menu beranda, klik Tambahkan Aplikasi, lalu msukan nama aplikasi, maka akan terlihat ID Aplikasi tersebut, seperti gambar dibawah ini, setelah itu klik BUAT UNIT IKLAN.
Menambahkan Aplikasi ke AdMob |
3) Pilih jenis format iklan Native.
Memilih Jenis Format Iklan |
4) Berinama pada Unit iklan tersebut, pilih ukuran yang ingin kita gunakan, pada tutorial ini, kita akan menggunakan ukuran kecil, lalu klik gambar tersebut:
Memilih dan Menentukan Ukuran Iklan |
5) Disini kalian bisa memilih jenis kerangka apa yang ingin digunakan, pilihlah sesuai dengan selera kalian.
Memilih kerangka kecil yang ingin digunakan |
6) Pada bagian ini, kalian bisa mendesign gaya/tampilan pada unit iklan tersebut yang akan ditampilkan pada aplikasi, kalian bisa mendesignnya secara langsung atau menggunakan CSS.
Menyesuaikan Kerangka |
7) Jangan lupa untuk mencatat ID Unit Iklan tersebut, untuk kita gunakan pada project aplikasi.
Petunjuk Penerapan |
8) Pada project yang kalian buat, buka file AndroidManifest.xml, lalu masukan uses-permisson berikut ini, untuk mengizinkan aplikasi membuka soket jaringan:
<uses-permission android:name="android.permission.INTERNET"/>
uses-permission INTERNET |
9) Buka file build.gradle(App-level) lalu masukan library berikut ini, didalam dependencies dan akan terdownload secara otomatis.
compile 'com.google.android.gms:play-services-ads:11.2.0'
10) Kita akan menggunakan widget/komponen NativeExpressAdView dan menggunakan RelativeLayout sebagai containernya.
NativeExpress Ads Example |
Kalian edit file.xmlnya seperti berikut ini:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
tools:context="cianjur.developer.net.admobexample.AdMob_By_Google">
<com.google.android.gms.ads.NativeExpressAdView
android:id="@+id/nativeExpress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
ads:adSize="FULL_WIDTHx80"
ads:adUnitId="ca-app-pub-xxxxxx"/>
</com.google.android.gms.ads.NativeExpressAdView>
</RelativeLayout>
Berikut ini merupakan atribut-atribut yang perlu dipasang:
- android:layout_width & android layout_height: keduanya harus kita atur ke wrap_content
- ads:adSize: Digunakan untuk mengatur ukuran iklan, untuk lebar pada iklan tersebut, saya menggunakan FULL_WIDTH, artinya lebar pada iklan akan menyesuaikan layar ponsel.
- ads:dUnitId: Masukan ID Unit Iklan kalian disini.
Jenis iklan ini mempunyai berbagai macam ukuran, yaitu:
Size | Min Width | Max width | Min height | Max height |
---|---|---|---|---|
Small | 280 | 1200 | 80 | 612 |
Medium | 280 | 1200 | 132 | 1200 |
Large | 280 | 1200 | 250 | 1200 |
package cianjur.developer.net.admobexample;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;
import com.google.android.gms.ads.AdListener;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.NativeExpressAdView;
public class AdMob_By_Google extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_admob_by_google);
//Memuat Iklan NativeExpress Ads
NativeExpressAdView nativeExpressAdView = findViewById(R.id.nativeExpress);
nativeExpressAdView.loadAd(new AdRequest.Builder().build());
//Membuat Event/Kejadian Pada Siklus Hidup Interstitial Ads
nativeExpressAdView.setAdListener(new AdListener(){
@Override
public void onAdFailedToLoad(int i) {
super.onAdFailedToLoad(i);
//Kode disini akan di eksekusi saat Iklan Gagal Dimuat
Toast.makeText(getApplicationContext(), "Iklan Gagal Dimuat", Toast.LENGTH_SHORT).show();
}
@Override
public void onAdLoaded() {
super.onAdLoaded();
//Kode disini akan di eksekusi saat Iklan Selesai Dimuat
Toast.makeText(getApplicationContext(), "Iklan Selesai Dimuat", Toast.LENGTH_SHORT).show();
}
});
}
}
Jalankan project tersebut, maka hasilnya akan seperti ini:
NativeExpress Ads Example |
Sekian dari saya, mohon maaf bila ada kesalahan, dan jangan lupa untuk follow fansPage WILDAN TECHNO ART untuk mendaptkan update terbaru dari blog ini, jika ada yang ingin kalian tanyakan, silakan isi komentar dibawah. Wassalamualaikum Warahmatullahi Wabarakatuh.