Menampilkan Iklan AdMob di Aplikasi Ionic
Bagus Aji Santoso 28 Maret 2018
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.