Mengintegrasikan Google AdMob dengan Ionic

Mari Belajar Coding    7/19/2019    ionic   

Selamat datang di blog mari belajar coding. Pada tutorial kali ini kita akan belalar mengintegerasikan Google AdMob dengan framework Ionic. Google AdMob merupakan platform periklanan milik Google yang populer. Platform periklanan milik Google  ini memungkinkan kita untuk mengimplementasi iklan tanpa perlu terhubung dengan pengiklan secara langsung. Dengan memasang Google AdMob pada aplikasi kita bisa menghasilkan uang lebih dari aplikasi yang kita buat.

Mengintegrasikan Google AdMob dengan Ionic

Pertama-tama pastikan teman-teman sudah mempunyai akun Google AdMob. Silahkan login kemudian tambahkan aplikasi baru. Pilih tidak jika aplikasi belum di publikasikan di Google Play.

Selanjutnya isi nama aplikasi dan platform yang akan di gunakan.

Simpan Id Aplikasi yang telah berhasil di buat. Id aplikasi ini yang akan kita gunakan saat menginstal plugin AdMob.

Buat app Ionic 3 baru melalui command line atau terminal. 

ionic start latihan-admob blank --type=ionic-angular --cordova

Install plugin AdMob Free melalui terminal.

ionic cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="ca-app-pub-10631XXXX~XXXX50487"

npm install --save @ionic-native/admob-free@4

Silahkan ganti variable admob_app_id dengan id aplikasi  teman-teman.

Setelah plugin AdMob Free berhasil di instal, tambahkan import module pada file app.module.ts.

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 { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { AdMobFree } from '@ionic-native/admob-free';

@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 {}

Google AdMob memiliki 3 jenis iklan, yaitu iklan Banner, Interstisial, dan Iklan Reward. Iklan banner merupakan Iklan persegi panjang yang menempati sebagian tata letak aplikasi. Iklan Interstisial merupakan format iklan halaman penuh yang muncul pada jeda dan transisi natural. Iklan reward merupakan format iklan yang memberikan reward kepada pengguna karena telah menonton iklan.

Pertama kita akan membuat iklan banner dan menampilkannya. Buka file home.ts, kemudian tambahkan module admob free seperti di bawah ini.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,
    private admobFree: AdMobFree
    ) {}

    showBanner() {
      const bannerConfig: AdMobFreeBannerConfig = {
        // add your config here
        // for the sake of this example we will just use the test config
       // id:'ca-app-pub-10631xxxxx/xxxxx1635',
        isTesting: true,
        autoShow: true
       };
       this.admobFree.banner.config(bannerConfig);       
       this.admobFree.banner.prepare()
         .then(() => {
           // banner Ad is ready
           // if we set autoShow to false, then we will need to call the show method here
         })
         .catch(e => console.log(e));
    }
}

Teman-teman bisa mengubah konfigurasi iklan banner di dalam bannerConfig. Ubah isTesting menjadi false dan isikan id iklan banner jika aplikasi akan di build release untuk di publikasikan di Google Play. Lihat dokumentasi configurasi admob free disini https://ionicframework.com/docs/v3/native/admob-free. 

Buka file home.html, buat sebuah button untuk mengeksekusi fungsi showBanner dan menampilkan iklan banner.

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Mari Belajar Coding
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="showBanner()">Show Banner</button>
</ion-content>

Tambahkan plugin cordova-plugin-admob-free di dalam widget config.xml seperti dibawah ini. Ganti variabel value dengan id aplikasi kamu.

<plugin name="cordova-plugin-admob-free" spec="0.27.0">
        <variable name="ADMOB_APP_ID" value="ca-app-pub-106318883xxxxx~xxxx0487" />
    </plugin>

Jalankan aplikasi dengan emulator atau device untuk mencoba menampilkan iklan banner.

Selanjutnya kita akan membuat format iklan Interstisial, dan Iklan Reward.
Buka home.ts, kemudian edit seperti dibawah ini.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AdMobFree, AdMobFreeBannerConfig, AdMobFreeInterstitialConfig, AdMobFreeRewardVideoConfig } from '@ionic-native/admob-free';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,
    private admobFree: AdMobFree
    ) {    }

    showBanner() {
      //iklan banner
      const bannerConfig: AdMobFreeBannerConfig = {
        // id:'ca-app-pub-10631xxxxx/xxxxxxx',
         isTesting: true,
         autoShow: true
        };
        this.admobFree.banner.config(bannerConfig);       
        this.admobFree.banner.prepare().then(() => {
          // banner Ad is ready
        })
        .catch(e => console.log(e));
    }


    showInterstitial() {
      //iklan Interstitial
      const interstitialConfig: AdMobFreeInterstitialConfig = {
        // id:'ca-app-pub-10631xxxxx/xxxxxxx',
         isTesting: true,
         autoShow: true
        };
        this.admobFree.interstitial.config(interstitialConfig);       
        this.admobFree.interstitial.prepare().then(() => {
          // banner Ad is ready
        }).catch(e => console.log(e));
    }


    showRewardVideo() {
       //iklan RewardVideo
       const RewardVideoConfig: AdMobFreeRewardVideoConfig = {
        // id:'ca-app-pub-10631xxxxx/xxxxxxx',
         isTesting: true,
         autoShow: true
        };
        this.admobFree.rewardVideo.config(RewardVideoConfig);       
        this.admobFree.rewardVideo.prepare().then(() => {
          // banner Ad is ready
        }).catch(e => console.log(e));
    }
}

Edit juga file home.html.

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Mari Belajar Coding
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="showBanner()">Show Banner</button>
  <button ion-button (click)="showInterstitial()">Show Interstitial</button>
  <button ion-button (click)="showRewardVideo()">Show Reward Video</button>
</ion-content>

Teman-teman bisa mengganti id unit iklan yang didapat dari Google Admob jika aplikasi siap di publikasikan.  Untuk membuat unit iklan silahkan pilih tambahkan unit iklan. 

Ganti Id unit iklan pada konfigurasi setiap iklan, set value isTesting menjadi false, build release aplikasi, kemudian sign in aplikasi sebelum di publikasikan di Google Play.

Baca juga Build Release Ionic dengan Keystore 

Tutorial mengintegrasikan Google Admob dengan Ionic sampai disini. Sekian, semoga bermanfaat.



Related Search:
Mengintegrasikan Google AdMob dengan Ionic
Menampilkan Iklan AdMob di Ionic
How to add AdMob to Ionic