Ionic 4/3 | How to Integrate Google AdMob Advertisements

Bây giờ chúng ta đã có phiên bản Ionic 4 beta, được cập nhật và nổi bật với phiên bản Angular 7 ổn định mới nhất. Angular 7 đang có nhiều bản cập nhật bao gồm phiên bản mới của Angular Material, cập nhật công cụ CLI, hỗ trợ xây dựng thư viện mới, v.v.
Trong Ionic 4 chúng ta cũng sẽ có nhiều thay đổi mới như thành phần mới, điều hướng, tải lười biếng, v.v., bạn có thể đọc thêm về các bản cập nhật Ionic 4 trên blog chính thức tại đây.

Vì vậy, ở đây sẽ chỉ thảo luận về các tùy chọn kiếm tiền được yêu thích nhất của Google AdMob dành cho các nhà phát triển ứng dụng di động. Google AdMob cung cấp một nguồn tốt để kiếm tiền từ một ứng dụng miễn phí và nó cũng rất dễ thực hiện trong ứng dụng Ionic mới hoặc hiện tại của bạn.

Bước 1) Tạo một ứng dụng Ionic 4 mới.

npm install -g ionic
ionic start AdMobDemoIonic4 blank

Sau khi tạo thành công ứng dụng, hãy chuyển đến thư mục gốc của ứng dụng

cd AdMobDemoIonic4

Bước 2) Cài đặt Plugin AdMob

Để sử dụng Google AdMob trong ứng dụng Ionic 4, chúng ta cần sử dụng plugin Cordova. Ở đây chúng tôi sẽ sử dụng plugin AdMob Free. Plugin này miễn phí sử dụng, chúng tôi sẽ sử dụng phiên bản beta của plugin này vì phiên bản ổn định cuối cùng không được hỗ trợ trong Ionic 4.

Chạy các lệnh sau để cài đặt plugin AdMob Free trong ứng dụng của bạn.

ionic cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="ca-app-pub-2387490687776151~80XXXXXXX9"
npm install @ionic-native/admob-free@beta

Có thể bạn bị ở đây khi cài đặt nhưng yên tâm nhé, hãy cài đặt chương trình sau nữa nhé.

npm install --save rxjs-compat

Bây giờ chúng tôi sẽ thực hiện thay đổi trong tệp ứng dụng để làm cho nó hoạt động.

Nhập AdMob miễn phí và thêm làm nhà cung cấp trong"src / app / app.module.ts", sau đó chúng tôi sẽ có thể sử dụng nó trong ứng dụng của chúng tôi.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy, Routes } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

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

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    AdMobFree,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Bước 3) Tạo Google AdMob thành ID đơn vị quảng cáo

Dưới đây là các bước nhanh để tạo một ứng dụng mới và nhận ID đơn vị quảng cáo thực của bạn từ Google AdMob Sau khi đăng nhập hoặc đăng ký AdMob, nhấp vào Ứng dụng -> Thêm mới

1. Nếu bạn đã có app trên google play thì bạn chỉ cần tìm kiếm và thêm vào là ok.
2. Nếu chưa có hoặc bạn muốn tạo mới thì ở bước này bạn hãy chọn Android hoặc IOS
3. Lựa chọn các loại hình quảng cáo gồm có  Banner, interstitial , video ...
4. Coppy ID của bạn vào để sử dụng nhé.

Bước 4) Thời gian chiếu: Hiển thị quảng cáo bằng các phương pháp đơn giản.

Nhập phần đơn giản nhất, ở đây chúng tôi sẽ Quảng cáo các phương pháp đơn giản để hiển thị Biểu ngữ, Quảng cáo xen kẽ & Quảng cáo được thưởng theo cấu hình tương ứng nơi chúng tôi thêm ID đơn vị quảng cáo hoặc cờ cho chế độ thử nghiệm.

Trong chế độ xem HTML, Wikipedia " src / app / home / home.page.html". Thêm ba nút sau đây để hiển thị ba loại Quảng cáo được đề cập ở trên.

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  Ionic4 Freaky Admob Example
  <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs">docs</a> will be your guide.</p>
  <ion-button shape="round" color="primary" fill="outline" (click)="showBannerAd()">Show Banner Ad</ion-button>
  <ion-button shape="round" color="primary" fill="outline" (click)="showInterstitialAds()">Show Interstitial Ads</ion-button>

  <ion-button shape="round" color="primary" fill="outline" (click)="showRewardVideoAds()">Show Reward Video Ads</ion-button>

</ion-content>

Thêm các phương thức trong tập tin thành phần ở file component "src / app / home / home.page.ts" Banner Ads

showBannerAd() {
        let bannerConfig: AdMobFreeBannerConfig = {
            isTesting: true, // Remove in production
            autoShow: true//,
            //id: "ca-app-pub-3940256099942544/6300978111"
        };
        this.admobFree.banner.config(bannerConfig);

        this.admobFree.banner.prepare().then(() => {
            // success
        }).catch(e => alert(e));
    }

Interstitial Ads

showInterstitialAds(){
        let interstitialConfig: AdMobFreeInterstitialConfig = {
            isTesting: true, // Remove in production
            autoShow: true//,
            //id: "ca-app-pub-3940256099942544/6300978111"
        };
        this.admobFree.interstitial.config(interstitialConfig);
        this.admobFree.interstitial.prepare().then(() => {
        }).catch(e => alert(e));
    }

Rewarded Ads

showRewardVideoAds(){
        let RewardVideoConfig: AdMobFreeRewardVideoConfig = {
            isTesting: true, // Remove in production
            autoShow: true//,
            //id: "ca-app-pub-3940256099942544/6300978111"
        };
        this.admobFree.rewardVideo.config(RewardVideoConfig);
        this.admobFree.rewardVideo.prepare().then(() => {
        }).catch(e => alert(e));
    }

Toàn bộ code trong file "coponent home.page.ts"

import { Component } from '@angular/core';
import { AdMobFree, AdMobFreeBannerConfig,AdMobFreeInterstitialConfig,AdMobFreeRewardVideoConfig } from '@ionic-native/admob-free/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private admobFree: AdMobFree
  ) {
  }


    showBannerAd() {
        let bannerConfig: AdMobFreeBannerConfig = {
            isTesting: true, // Remove in production
            autoShow: true//,
            //id: "ca-app-pub-3940256099942544/6300978111"
        };
        this.admobFree.banner.config(bannerConfig);

        this.admobFree.banner.prepare().then(() => {
            // success
        }).catch(e => alert(e));
    }



    showInterstitialAds(){
        let interstitialConfig: AdMobFreeInterstitialConfig = {
            isTesting: true, // Remove in production
            autoShow: true//,
            //id: "ca-app-pub-3940256099942544/6300978111"
        };
        this.admobFree.interstitial.config(interstitialConfig);
        this.admobFree.interstitial.prepare().then(() => {
        }).catch(e => alert(e));
    }

    showRewardVideoAds(){
        let RewardVideoConfig: AdMobFreeRewardVideoConfig = {
            isTesting: true, // Remove in production
            autoShow: true//,
            //id: "ca-app-pub-3940256099942544/6300978111"
        };
        this.admobFree.rewardVideo.config(RewardVideoConfig);
        this.admobFree.rewardVideo.prepare().then(() => {
        }).catch(e => alert(e));
    }
}

 Bạn có thể xem demo trên github.