技術っぽいことを書いてみるブログ

PythonとかVue.jsとか技術的なことについて書いていきます。

Android用のハイブリッドアプリを構築してみる。。。～バナー広告をいれる～

はじめに

Android用のハイブリッドアプリを構築しているので、
せっかくなのでアプリ内に広告を入れたいと思います。
広告の種類としては、いろいろありますが、アプリの利用を妨げないバナー広告にしたいと思います。 バナー広告は、GoogleのAdmobを使います。

構築してみた

GoogleのAdmobへのアカウント登録

Google Admobで登録を行います。
手順は、こちらを参照ください。

Cordovaプロジェクトにcordova-plugin-admob-freeプラグインを追加

下記のコマンドでプラグインを追加

cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="<アプリID>"

Google Admobにアカウントを登録すると、アプリID／広告ユニットIDが付与されますが、 ここでは、アプリIDを指定します。

Cordovaプロジェクトで広告を表示する実装を行う

  admob.banner.config({
    //id: 'ca-app-pub-xxxxxxxxxxxxxxx/yyyyyyyyyy',
    id: 'ca-app-pub-3940256099942544/6300978111',   // サンプル広告ユニット ID
    isTesting: true, //テスト時はtrueにする
    autoShow: true,
  });

  //読み込み
  admob.banner.prepare().then(() => {
    // 表示
    admob.banner.show();
 });

admob.banner.configでIDを指定するのですが、こちらは広告ユニットIDになります。
今回は、テスト用に確認したいので、アカウント登録した広告ユニットIDではなく、 Googole Admobにて示されているテスト広告ユニットIDを使います。

テストするときにアカウント登録した広告ユニットIDを使用していたのですが、広告が表示されませんでした。
おそらくですが、まだアプリ自体を公開していないためだと思います。

実行してみた

f:id:where-is-wally:20200621103051p:plain
画面の下部にテスト用のバナー広告が表示されました。

はまったところ１

Admobでアカウント登録した広告ユニットIDを使用して、テストしてもなかなか広告が表示されず、はまっておりましたが、
テスト用の広告ユニットIDを指定することと、テスト用のバナー広告が表示されました。

はまったところ２（2020/09/06追記）

本番用の広告ユニットIDに変更して、構築したアプリをPlayStoreで公開すれば、バナー広告が表示されず、
解消方法を探しておりました。
が、ようやく解消方法が判明しました。 本番用の広告ユニットIDで広告を表示するためには、Google Admobで、以下の２点を実施する必要があります。

  • 支払いの住所情報の入力
    f:id:where-is-wally:20200906211630p:plain

  • メディエーションの設定
    f:id:where-is-wally:20200906211750p:plain
    このメティデーションが何を指すのか、よく分かりませんが、だいたいで入力する。

この２点を設定することで、数時間後にGoogle Admobから
「お客様のアカウントが承認されました」メールが来ます。
その後、アプリを確認すると、画面下部に広告が表示されていました。

f:id:where-is-wally:20200906212809p:plain

いろいろ検索して調査しましたが、同じ現象で困っている方はまぁまぁいるんじゃないかと思いました。
stackoverflow.com こちらで記載されいてる内容がヒントになりました。

最後に・・・

アプリを公開すると、ちゃんと表示されるかは確認したいと思います。
今回、簡易な備忘録のアプリを構築していますが、あと少しで機能開発は完了となり、
公開のステップに移行できるかなと思います。