IonicでAdmobを使用する

Ionicを使用してクロスプラットフォームのアプリを開発したし、折角なので、収益化をしたいという方のための記事です。(私はAngularベースで開発をしていますので、他のVue等では異なる可能性がございます。)

色々なドキュメントで書かれていることが違い、時間を消費してしまったので、まとめてみます。
もしかすると、不要な記述もあるかもしれませんので、コメントなどで、教えていただけると幸いです。

##　手順

1. Admobに登録し、アプリIDを取得する。
   簡単ですので、以下のヘルプを参考に登録してください。
   https://support.google.com/admob/answer/7356219?hl=ja

2. プラグインのインストールをする。
   https://github.com/ratson/cordova-plugin-admob-free
   に従い、Install する。

cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="<YOUR_ANDROID_ADMOB_APP_ID_AS_FOUND_IN_ADMOB>"

また、iPhone用に<platform name="ios">内に

<config-file target="*-Info.plist" parent="GADApplicationIdentifier">
    <string>YOUR_IOS_ADMOB_APP_ID_AS_FOUND_IN_ADMOB</string>
</config-file>

をconfig.xmlに追加します。

3 . Angularの設定を行う。
ProvidersにAdMobFreeを追加

app.module.ts

import { AdMobFree } from "@ionic-native/admob-free/ngx";
...
 providers: [
    ...
    AdMobFree,
  ]

config.xmlのの直前に以下の記述を追加

config.xml

    <plugin name="cordova-plugin-admob-free" spec="^0.27.0">
        <variable name="ADMOB_APP_ID" value="{AdmobAPPID}" />
    </plugin>

4 . 表示したい場所での設定

import { AdMobFree, AdMobFreeBannerConfig } from "@ionic-native/admob-free/ngx";
...
export class AppComponent {
  bannerConfig: AdMobFreeBannerConfig = {
    isTesting: true,
    autoShow: true
  };

  constructor(
    ...
    private platform: Platform,
    private admobFree: AdMobFree
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.admobFree.banner.config(this.bannerConfig);
      this.admobFree.banner
        .prepare()
        .then(() => {
        })
        .catch(e => console.log(e));
    });
  }

注意点としてはthis.admobFree.banner.prepare()はthis.platform.ready().then()の中で呼ばないと、エラーとなってしまいます。
onInit()の間で呼ぶことも試しましたが、駄目なようです。

まとめ

Ionicの公式ドキュメントはかなり初心者には難しい部分がある気がします。。。
HTMLやCSS, Javascriptの知識だけで、クロスプラットフォーム開発ができるIonic素晴らしいです！