【Ionic】AdMob Freeのインストール

Ionic(Cordova)で「AdMob Free版」のプラグインをインストールして使う方法について紹介します。

【AdMob】アカウント登録、広告ユニットの作成

AdMobの登録を行います。

② AdMobのトップページを開きます。

③「新しいアプリを収益化」をクリックします。

④アプリの状況によって以下の操作を行います。

状況 操作
アプリ公開済の場合 キーワードを入力してアプリを検索します。
アプリ未公開の場合 「アプリを手動で追加」でアプリ名を入力しプラットフォーム」は「Android」を選択して「アプリを追加」をクリックします。

⑤「バナー」もしくは「インタースティンシャル」を選択します。(広告タイプなどを設定)

⑥「保存」をクリックします。

⑦「完了」をクリックします。

⑧下記のような広告ユニットのIDをコピーします。

ca-app-pub-xxxxxxxxxxxxxxx/xxxxxxxxxx

【AdMob Free】インストール

①コマンドプロンプトを開きます。

②プロジェクトフォルダに移動します。

③以下のコマンドを順に実行してプラグインを追加します。

$ ionic cordova plugin add cordova-promise-polyfill
$ ionic cordova plugin add cordova-admob-sdk
$ ionic cordova plugin add cordova-plugin-admob-free
$ npm install --save @ionic-native/admob-free

補足1

※「$ ionic cordova plugin add cordova-plugin-admob-free」を実行した場合に
エラーメッセージ「Error: Variable(s) missing: ADMOB_APP_ID」が出た場合は以下のコマンドを試してみてください。

$ ionic cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="<YOUR_ADMOB_APP_ID_AS_FOUND_IN_ADMOB>"

補足2

以下のエラーが出た場合

Error: Version of installed plugin: "cordova-admob-sdk@0.21.0" does not satisfy dependency plugin requirement "cordova-admob-sdk@~0.20.0". Try --force to use installed plugin as dependency.

ここからv2.0.0のSDKをダウンロードします。

②ダウンロードしたzipファイルをプロジェクト直下に解凍します。

③以下のコマンドでSDKをインストールします。

$ ionic cordova plugin add cordova-admob-sdk-v0.20.0

④以下のコマンドでadmob freeをインストールします。

$ ionic cordova plugin add cordova-plugin-admob-free@0.20.0

AdMob Free版の使い方

① 広告を表示したいページのtsファイルに以下のコードを追加します。

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

:

  constructor(private admob: AdMobFree) {
      this.showBanner();
  }

:

  showBanner() {
    let bannerConfig: AdMobFreeBannerConfig = {
        id: 'ca-app-pub-xxxxxxxxxxxxxxx/xxxxxxxxxx',  // ここに広告IDを挿入
        isTesting: false, // テスト用を表示するならTrue
        autoShow: true,
    };

    this.admob.banner.config(bannerConfig);

    this.admob.banner.prepare().then(() => {
    }).catch(e => console.log(e));

}

② src/app/app.module.tsに以下のコードを追加します。

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

:

  providers: [
    :
    AdMobFree,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
関連記事
1 【Ionic入門】Android・iOS・Windowsアプリ開発編
2 Javascript入門 サンプル集
3 Java入門
4 Node.js入門
関連記事