広告 アプリ (AdMob)

この記事では、MonacaでAdMobを使用してアプリに広告を表示する方法について説明します。

AdMobは、Googleによる広告サービスであり、Googleアカウントがあれば簡単に導入することができます。この記事を読むことで、AdMobを導入し、アプリに広告を表示することができるようになります。

解説するためのサンプルコードは、次のURLに配置しています。

https://github.com/monaca-samples/admob-plus

AdMobへの申請

まず、AdMobのサイトにアクセスし広告を申請します。

この申請時に、アプリのIDが発行されますので、IDをコピーしておきます。 （ID 例：ca-app-pub-3089782807744052~xxxxxxxx）

申請が承認されると、広告IDが発行されます。このIDを表示する際に利用しますので、こちらも控えておきます。

なお、広告が表示されるまでに承認が必要となるため、開発中はGoogleが提供するテスト用広告を利用することをお勧めします。

プラグインのインストール

次のプラグインをインストールしてください。

　admob-plus-cordova

　（URL: https://github.com/admob-plus/admob-plus）

プラグインをインストール後、プラグインの設定画面で「APP_ID_ANDROID」を設定します。 この値は、AdMobで取得したアプリIDを指定します。これはAndroid向けの設定です。

また、iOS向けには、「APP_ID_IOS」の値を設定する必要があります。

アプリ起動時の広告を表示

次のコードはアプリ起動時に表示される広告を実行しています。

show( ) を実行したタイミングで広告が表示されます。

// アプリ起動時に表示される広告を表示
const ad = new admob.AppOpenAd({
  adUnitId: 'ca-app-pub-3940256099942544/5575463023',
})
await ad.load()
await ad.show()

バナー広告を表示

アプリの下にバナー広告を表示するには、次のコードのように「admob.BannerAd」のオブジェクトを生成します。広告は、show( ) にて表示させます。

// バナー広告を表示
const banner = new admob.BannerAd({
　　adUnitId: 'ca-app-pub-3940256099942544/6300978111',
　　position: 'bottom',
})
await banner.show()

開発用のテスト広告

AdMobに申請した直後や、開発中はバナーが表示されません。その場合は、AdMobが用意しているテスト用の広告IDが利用できます。

• デモ広告ユニットID (iOS)

• デモ広告ユニットID (Android)

広告フォーマット	デモ広告ユニットID (iOS)	デモ広告ユニットID (Android)
アプリ起動	ca-app-pub-3940256099942544/5575463023	ca-app-pub-3940256099942544/9257395921
アダプティブ バナー	ca-app-pub-3940256099942544/2435281174	ca-app-pub-3940256099942544/9214589741
固定サイズのバナー	ca-app-pub-3940256099942544/2934735716	ca-app-pub-3940256099942544/6300978111
インタースティシャル	ca-app-pub-3940256099942544/4411468910	ca-app-pub-3940256099942544/1033173712
リワード広告	ca-app-pub-3940256099942544/1712485313	ca-app-pub-3940256099942544/5224354917
リワード インタースティシャル	ca-app-pub-3940256099942544/6978759866	ca-app-pub-3940256099942544/5354046379
ネイティブ	ca-app-pub-3940256099942544/3986624511	ca-app-pub-3940256099942544/2247696110
ネイティブ動画	ca-app-pub-3940256099942544/2521693316	ca-app-pub-3940256099942544/1044960115

2023年12月15日現在、Android端末ではテストIDを利用しても下記のエラーが発生し、バナーが表示されない事象が確認されています。

Uncaught (in promise) {
  "Code": 3,
  "Message": "No fill.",
  "Domain": "com.google.android.gms.ads",
  "Cause": "null",
  "Response Info": {
    "Response ID": "null",
    "Mediation Adapter Class Name": "",
    "Adapter Responses": []
  }
}