如何在Ionic 5使用AdMob 中實現Google廣告

 在本教程中，看到如何在AdMob Ionic 5中實現Google廣告，以便能夠利用廣告賺錢。

介紹如何添加三種類型的廣告：

橫幅廣告

插頁廣告

視頻廣告

創建一個新的Ionic 5/ Angular項目

讓我們通過使用Ionic CLI 5基於空白模板從頭開始創建一個新的Ionic 5/Angular項目(可選)來開始本教程:

ionic start AdmobAdsExample blank  

接下來，在Ionic 5項目文件夾中導航：

cd  AdmobAdsExample

接下來，安裝Cordova Admob插件及它Ionic Native 5包裝器，如下所示：

ionic cordova plugin add --save cordova-plugin-admob-free 

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

接下來，打開src/app/app.module.ts文件，並導入AdMobFree，然後將它添加到提供程序列表中：

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

在Ionic 5應用程序中顯示橫幅廣告

接下來，打開src/app/app.component.ts文件，並添加以下代碼：

import { Component } from '@angular/core';

import { Platform } from 'ionic-angular';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

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

import { HomePage } from '../pages/home/home';

@Component({

templateUrl: 'app.html'

})

export class MyApp {

rootPage:any = HomePage;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen , private admobFree : AdMobFree ) {

 platform.ready().then(() => {

 // Okay, so the platform is ready and our plugins are available.

 // Here you can do any higher level native things you might need.

 statusBar.styleDefault();

 splashScreen.hide();

 this.showAdmobBannerAds();

 });

}

showAdmobBannerAds(){

 const bannerConfig: AdMobFreeBannerConfig = {

 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)); 

 } 

我們注入了AdMobFree，並創建了showAdmobBannerAds()方法，以便在Cordova準備好時顯示橫幅廣告。

我們傳遞了兩個配置選項：

isTesting：true，它告訴Admob plugin只使用測試廣告，這是你仍然開發應用程序以避免意外時的推薦選項，

autoShow：true，在創建標題廣告之後，立即顯示標題廣告，而不使用show()方法，

開發完Ionic 5應用後，您需要製作真實的廣告，請轉到AdMob門戶，單擊"通過新應用獲利"按鈕以創建新的廣告單元。

接下來獲取你的廣告pubisher id並將它添加到配置選項中，如下所示：

 const bannerConfig: AdMobFreeBannerConfig = {

id: 'ca-app-pub-xxx/xxx', 

isTesting: false,

autoShow: true

 };

如果將autoShow設置為false，就在準備標題後需要調用show()方法：

  this.admobFree.banner.prepare()

 .then(() => {

 this.admobFree.banner.show()

 })

 .catch(e => console.log(e)); 

 } 

你還可以使用：

this.admobFree.banner.hide()

或者你可以使用：

    this.admobFree.banner.remove() 

在您的Ionic 5應用中顯示插頁式廣告

showInterstitialAds(){

 const bannerConfig: AdMobFreeBannerConfig = {

 id: 'ca-app-pub-xxx/xxx',

 isTesting: false,

 autoShow: false

 };

 this.admobFree.interstitial.config(bannerConfig);

 this.admobFree.interstitial.prepare()

 .then(() => {

 this.admobFree.interstitial.show()

 })

 .catch(e => console.log(e)); 

} 

在Ionic 5應用程序中顯示視頻廣告

showRewardVideoAds(){

 const bannerConfig: AdMobFreeBannerConfig = {

 id: 'ca-app-pub-xxx/xxx',

 isTesting: false,

 autoShow: false

 };

 this.admobFree.rewardvideo.config(bannerConfig);

 this.admobFree.rewardvideo.prepare()

 .then(() => {

 this.admobFree.rewardvideo.show()

 })

 .catch(e => console.log(e)); 

 }