広告アプリ (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

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": []
  }
}

前へFacebook アプリ次へHello World アプリ

最終更新 11 か月前