Menampilkan Iklan AdMob di Aplikasi Ionic

Iklan, meskipun tidak selalu menjadi opsi terbaik untuk melakukan monetisasi, adalah salah satu cara termudah mendapatkan uang dari aplikasi atau website. Platform periklanan milik Google memungkinkan kita untuk mengimplementasi iklan tanpa perlu terhubung dengan pengiklan secara langsung. Kita cukup menampilkan iklan Google untuk mendapatkan persenan biaya iklan tersebut.

Google memiliki layanan yang khusus dibangun untuk aplikasi mobile bernama AdMob. Di tutorial ini, kita akan membahas bagiamana menambah Google AdMob di sebuah aplikasi Ionic.

Sebelum Memulai

Di-update untuk Ionic 3.1.0

Sebelum mengikuti tutorial ini, pembaca harus sudah memiliki pemahaman dasar tentang konsep-konsep Ionic. Setidaknya pembaca pernah membuat sebuah aplikasi Ionic sederhana.

Jika belum familiar dengan Ionic, penulis menyarankan pembaca untuk mengikuti tutorial ini atau ini atau dengan mengikuti tutorial Ionic di Codepolitan. Penulis asli tutorial ini juga memiliki buku berbayar yang bisa dilihat di sini.

1. Buat Aplikasi Ionic Baru

Kita akan mulai dengan membuka aplikasi Ionic baru, cukup jalankan perintah berikut:

ionic start ionic-admob blank

Setelah selesai, masuk ke folder yang baru dibuat:

cd ionic-admob

2. Integrate AdMob Plugin

Agar bisa memakai Google AdMob, kita perlu memakai plugin Cordova. Ada beberapa plugin yang tersedia diantaranya adalah AdMob Free. Sesuai namanya, plugin ini gratis untuk dipakai oleh komunitas.

Jalankan perintah berikut untuk memasang plugin AdMob Free

cordova plugin add cordova-plugin-admob-free --save
npm install @ionic-native/admob-free --save

Perintah di atas akan memasang plugin Cordova dan paket Ionic Native yang akan membantu kita memakai plugin tersebut. Kita juga perlu mengatur agar plugin ini bisa dipakai di aplikasi.

Ubah file src/app/app.module.ts menjadi:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { AdMobFree } from '@ionic-native/admob-free';
 
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
 
@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AdMobFree,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Kita telah menambahkan AdMobFree sebagai sebuah provider dan sekarang kita bisa meng-inject provider tersebut di mana saja di di tempat yang kita butuhkan.

3. Buat Akun Google AdMob Baru

Agar bisa menampilkan iklan di aplikasi, kita perlu membuat akun Google AdMob (langkah ini bisa dilewati jika hanya ingin melakukan pengujian biasa jika mau).

Untuk membuat akun, silahkan klik disini dan daftar. Setelah login, kita perlu membuat iklan baru dengan tombol berikut:

Dari sini, kita bisa membuat ad unit baru yang akan dipasang di aplikasi:

kemudian buat iklan yang ingin dipakai:

Setelahnya kita akan mendapat Ad Unit ID yang berguna untuk menampilkan iklan nantinya.

4. Buat Iklan Banner

pertama, mari kita buat iklan banner. Menggunakan plugin ini sebetulnya cukup sederhana, kita hanya perlu mengubah sedikit konfigurasi dan memanggil fungsi prepare().

Ubah src/pages/home/home.ts menjadi:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AdMobFree, AdMobFreeBannerConfig, AdMobFreeInterstitialConfig } from '@ionic-native/admob-free';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 
    constructor(public navCtrl: NavController, public admob: AdMobFree) {
 
    }
 
    showBanner() {
 
        let bannerConfig: AdMobFreeBannerConfig = {
            isTesting: true, // Remove in production
            autoShow: true
            //id: Your Ad Unit ID goes here
        };
 
        this.admob.banner.config(bannerConfig);
 
        this.admob.banner.prepare().then(() => {
            // success
        }).catch(e => console.log(e));
 
    }
 
}

Kita membuat sebuah configuration object untuk iklan banner dimana kita mengatur isTesting menjadi true (untuk menampilkan test ads) dan autoShow menjadi true (yang akan menampilkan iklan langsung setelah siap ditampilkan). Saat akan menampilkan iklan asli silahkan buang bagian isTesting dan kirimkan Ad Unit ID dengan properti id.

Kita mengaktifkan konfigurasi ini dengan memanggil fungsi config dan setelahnya kit apanggil fungsi prepare(). Sebagai contoh, kita tinggal memanggil kode-kode tersebut dari klik di button.

Ubah file src/pages/home.html menjadi:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
    <button ion-button (click)="showBanner()">Show Banner</button>
</ion-content>

Hasilnya akan terlihat sebagai berikut:

5. Membuat Iklan Interstitial

Membuat iklan interstitial (yang menutupi layar) sebetulnya hampir sama. Mari kita lihat kode-kodenya.

Modifikasi file src/pages/home/home.ts menjadi:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AdMobFree, AdMobFreeBannerConfig, AdMobFreeInterstitialConfig } from '@ionic-native/admob-free';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 
    constructor(public navCtrl: NavController, public admob: AdMobFree) {
 
    }
 
    showBanner() {
 
        let bannerConfig: AdMobFreeBannerConfig = {
            isTesting: true, // Remove in production
            autoShow: true
            //id: Your Ad Unit ID goes here
        };
 
        this.admob.banner.config(bannerConfig);
 
        this.admob.banner.prepare().then(() => {
            // success
        }).catch(e => console.log(e));
 
    }
 
    launchInterstitial() {
 
        let interstitialConfig: AdMobFreeInterstitialConfig = {
            isTesting: true, // Remove in production
            autoShow: true
            //id: Your Ad Unit ID goes here
        };
 
        this.admob.interstitial.config(interstitialConfig);
 
        this.admob.interstitial.prepare().then(() => {
            // success
        });
 
    }
 
}

Perbedaannya hanyalah kita memanggil fungsi interstitial bukannya banner seperti sebelumnya. Kita juga akan mengaktifkannya melalui sebuah button.

Ubah isi src/pages/home/home.html menjadi:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
    <button ion-button (click)="showBanner()">Show Banner</button>
    <button ion-button (click)="launchInterstitial()">Show Interstitial</button>
</ion-content>

Hasilnya akan terlihat sebagai berikut:

Penutup

Mendapat banyak uang dari iklan di aplikasi mobile mungkin cukup sulit, dan iklan-iklan tersebut juga bisa mengganggu user. Tapi ada celah dimana kita bisa melakukannya dengan benar dan dalam situasi yang tepat, Google AdMob bisa menjadi solusi terbaik untuk melakukan monetisasi aplikasi dengan iklan.

Diterjemahkan dari Integrating Google AdMob Advertisements in Ionic karya Josh Morony.