Ionic + capacitor Admobの広告を出してみた（iOS）

はじめに

ionic + capacitorアプリでAdmobのバナー広告を出す方法です。

Admobのアカウント作成をアプリの登録方法についてはこちらを参考に。

※追記！！
capacitorを使っているならcapacitor-admobを使った方が良いかと思う。
ionic capacitorのAdMobプラグインを使う（capacitor-admob）

プラグインを入れる

プラグインはcordovaですが使えます。

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

こちらに書いてあるように

npx cap sync

を忘れずにしておきましょう。でないと広告はうまく出ません。。

info.plistを編集

xcodeを開いてinfo.plistに以下の要素を追加

GADApplicationIdentifier = App Id GADIsAdManagerApp = Yes

AがApp Idとなる
Bは後記するadmob.service.tsで使う

AdMobFreeを読み込む

app.module.tsにAdMobFreeのimportとprovidersへの追加

app.module.ts

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

広告を表示させてみる

Admobの処理をまとめたadmob.service.tsを作成

ionic g service service/admob

admob.service.ts

import { Injectable } from '@angular/core';
import { AdMobFreeBannerConfig, AdMobFree } from '@ionic-native/admob-free/ngx';
import { Platform } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class AdmobService {
  iosBannerConfig: AdMobFreeBannerConfig = {
    id: 'ca-app-pub-***',// 上記のBである広告ユニットID
    isTesting: true,
    autoShow: true
  };

  androidBannerConfig: AdMobFreeBannerConfig = {
    id: 'ca-app-pub-***',
    isTesting: true,
    autoShow: true
  };

  constructor(
    private admob: AdMobFree,
    private platform: Platform
  ) { }

  showBanner() {
    if (this.platform.is('ios')) {
      this.admob.banner.config(this.iosBannerConfig);
    } else if (this.platform.is('android')) {
      this.admob.banner.config(this.androidBannerConfig);
    }
    this.admob.banner
      .prepare()
      .then(() => {
        console.log('広告の表示成功した');
      })
      .catch(error => {
        console.log(error);
      });
  }
}

使うときはこれを呼び出す。

import { AdmobService } from '../service/admob.service';

constructor (
private admobService: AdmobService
 )

ionViewWillEnter() {
    this.admobService.showBanner();
  }

最後に

Android版のやり方が分かりまセーン。

Support Libraryを代替するAndroid拡張機能であるAndroidXにしてしまったからか、バグりまくってどうしよもない状況。。。