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.

Cara Meningkatkan Penghasilan Publisher Dengan Menggunakan Native Ads Express, Google AdMob, NativeExpress AdView, AdRequest, LoadAds, Android Studio, Java Progrmming. Dari WILDAN TECHO ART.

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.
WildanTechnoArt-Menambahkan Aplikasi baru Pada AdMob
Menambahkan Aplikasi ke AdMob

3) Pilih jenis format iklan Native.
WildanTechnoArt-Memilih Jenis Format Iklan
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:
WildanTechnoArt-AdMob Memilih Jenis Ukuran Untuk Unit Iklan Netive Express
Memilih dan Menentukan Ukuran Iklan

5) Disini kalian bisa memilih jenis kerangka apa yang ingin digunakan, pilihlah sesuai dengan selera kalian.
WildanTechnoArt-AdMob Memilih Kerangka Kecil Untuk Unit Iklan Netive Express
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.
WildanTechnoArt-AdMob Menyesuaikan kerangka Netive Express
Menyesuaikan Kerangka

7) Jangan lupa untuk mencatat ID Unit Iklan tersebut, untuk kita gunakan pada project aplikasi.
WildanTechnoArt-AdMob Petunjuk Penerapan Iklan
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"/>
WildanTechnoArt-Uses-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.
WildanTechnoArt-AdMob NativeExpress Ads Example
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
Pada activity kalian, masukan source code berikut ini:

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:
WildanTechnoArt-Screenshot_NativeExpress Ads Example
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.

Wildan M Athoillah
Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.