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入門 |
コメント