GoogleAdMobの申請①(申請はすんなり、実装は・・・)
しばらくリアルタイムでGoogleAdMobの登録を書き込み中です。
変更した表題の通り、申請はすんなりですが、アプリへの実装はまだまだうまく行きません。
アプリのIARC(The International Age Rating Coalition)からの審査終了および、同タイミングのGooglePlayでの公開開始を受けて、GoogleAdMobにもアプリの登録申請を出しました。
こちらは半日かからず申請通過。
いよいよ広告を載せるところまで来たかと、資料等を見ていったのですが、これまた面倒。
プログラム的にはやってみないと判らないですが、広告ターゲット向けの諸々を考慮の必要があるようです。
(ファミリー向けのアプリで登録です)
アプリ作りは、プログラム的より周辺の考慮が難しい印象です。
すぐに理解できると思えないので、とりあえず、GoogleAdMobの利用開始の流れを咀嚼を試みつつ、記載していきます。
(アプリ開発始めたころの私ならとりあえずやってみて色々ハマったのは間違いないと思います。ここでハマらないとも限りませんけど)
まず、こういうWeb広告の設定的なことの経験は全くないので、アプリ審査完了メールでご覧くださいと書いて有った『AdMob に関する YouTube 動画』を見ました。
各国語の字幕から日本語の字幕で見ましたが、技術的あるいは注意点等ではなく、アプリ審査が通った相手に見せるような内容でもない気が…
とは言え、久しぶりにYoutube見たので、今後引っかかりそうなキーワード（tag_for_under_age_of_consent、tagForChildDirectedTreatment）でHowTo的動画があるのを知ったのは収穫でした。
(SNS等、全く利用していないものですから)
次に、承認メールの末尾の『AdMob でアプリを確認 』をクリックすると、AdMobの登録アプリのページに飛びます。
『次のステップ: 広告ユニットを作成しましょう。』の下の『広告ユニットを追加』を押下します。
次のページでは、広告ユニットを選択する画面です。
(普段Webページに出ている広告にここまで種類があるとは思わなかったです。)
一番シンプルで初心者お勧めらしいバナー広告を選択
色々設定する画面が出てきます。
・広告のフォーマット：バナー
・広告ユニットの名前：(自分で決めます)
下に詳細設定表示のリンクがあるので開くと、
・広告の種類(下の2種類)
テキスト、イメージ、リッチメディア
動画
・自動更新
広告の更新頻度です。
Googleにお任せ、自分で設定(30～150秒)、無効から選択
・eCPM Floor(よく判らないので説明をそのままコピーペーストしました)
広告を配信するために AdMob ネットワークで上回る必要のある最低 eCPM のことです。eCPM Floor を設定するには、次の 2 つの方法があります。
収益全体を最大化するには、Google により最適化された eCPM Floor を使用することをおすすめします。ユーザーの地域、広告ユニットのトラフィック、過去のデータに基づいて、Google がお客様の eCPM Floor を動的に設定します。
注: eCPM Floor を高く設定すると、全体的な掲載率の低下を招く可能性があります。
よく判らないなりに以下のように設定
種類：動画を外す
自動更新：無効
eCPM Floor：Googleによる最適化
作成すると、次のページに移動。下の方に『手順をメールで送信』とあるのでこれを押下して、「終了」ボタンを押します。
『完了』と『別の広告ユニットを作成』があるので完了を押下。
最初の広告ユニット追加の画面に戻り、さらに『広告ユニット』を追加も出来るようですが、いったん終了して送られたメールに目を通します。
---------------------------------------------------------------
お客様
「***@****.***」さんから以下の情報が共有されました。
アプリ内に広告ユニットを配置するには、こちらの手順を行ってください。
このアプリ ID を使用して、Google Mobile Ads SDK ガイドの手順を完了してください。
『アプリの名称』
**-***-***-****************
バナー導入ガイド(リンク)に沿って SDK を組み込んでください。広告の種類、サイズ、プレースメントは、この広告ユニット ID を使用してコードを設定する際に指定します。
初めての広告(そう言う名前にしました)
**-***-***-************************
AdMob のポリシー(リンク)をご確認のうえで、これに沿って導入してください。
AdMob SDK の統合に関するご質問については、Google Mobile Ads SDK の技術フォーラムをご覧ください。AdMob サービスに関するご質問については、AdMob ヘルプセンターをご覧ください。
今後とも AdMob をどうぞよろしくお願いいたします。
AdMob チーム
---------------------------------------------------------------
メール記載のリンクを各々見ていきます。
Google Mobile Ads SDK ガイドの手順
アプリを設定するようです。
https://developers.google.com/admob/android/quick-start?hl=ja#import_the_mobile_ads_sdk
"android\build.gradle"に3か所追加。
"AndroidManifest.xml"を修正
なのですが、"AndroidManifest.xml"はWindowsExploreによると13ファイル存在しています。
予想では、AndroidStudioからなら間違いなく探しやすいと踏んで(通常のファイル構造じゃない形のエクスプローラになっています)見ると、
"app" > "manifests" > "AndroidManifest.xml"
とあるので、これの事でしょう。
（ちなみに相対パスは、"\android\app\src\main\AndroidManifest.xml"）
その下には、『Google Mobile Ads SDK を初期化する』の項目が続き、サンプルコードが出ているのですが、Javaをいじるようになると何のためにionicで開発しているのか？と言う話になりますので、一旦、作業を(まだしていませんが)やめて、ionicとGoogleAdMob関係の情報を探してみます。
なお、このページの関連リンクには『テスト広告を有効にしています』と言う記事があり、本当の広告をクリックしたりせずにテストする方法が記載されていますので、これは助かりますね。
以下のリンクが参考になりそうなので試してみます。
復旧用に、プロジェクト直下の”src”と"android"フォルダーをコピーして保存して作業します。
Ionic + capacitor + AdmobPlus で広告を表示
https://nukomabo.work/post-890/
ここでリンクされた公式サイトも役に立ちそうです。
https://admob-plus.github.io/docs/capacitor
一通り見ましたが、下の公式サイトの方が(英文ですが)良さそうに思えますので、その指示に従い、『AdmobPlus ライブラリインストール』を行います。
コマンドプロンプトでカレントディレクトリをプロジェクトフォルダにして
------------------------------------------
npm install @admob-plus/capacitor
npx cap sync
------------------------------------------
無事成功。
なおCapacitor 3以上が必要のようです。
Capacitor 3 is required, here is the upgrade guide.
なお、この段階では、"\android\app\src\main\AndroidManifest.xml"およびプロジェクトレベルの "build.gradle"に変更は加わっていない事を確認しました。
次に、指示に従って"\android\app\src\main\AndroidManifest.xml"に２つの<meta-data />の項目を追加します。
(AndroidｙとiOSでは別々の実装になるようです)
---------------------------------------------------------------
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-xxx~yyy" />
<meta-data
android:name="com.google.android.gms.ads.DELAY_APP_MEASUREMENT_INIT"
android:value="true" />
---------------------------------------------------------------
保存します。
次のページのBannerの設定を見ます。
ここからは試行錯誤になりそうですが、まずimport部分に
------------------------------------------
//GoogleAdMob start
import { AdMobPlus, BannerAd } from '@admob-plus/capacitor';
//GoogleAdMob end
------------------------------------------
※"//GoogleAdMob start"と"//GoogleAdMob end"は、筆者が付加(以下同じ)
を追加
次に
constructor内に、次のコードをコピーして追加
------------------------------------------
//GoogleAdMob start
(async () => {
const banner = new BannerAd({
adUnitId: 'ca-app-pub-3940256099942544/6300978111',
})
await banner.show()
AdMobPlus.addListener('banner.impression', async () => {
await banner.hide()
})
})()
//GoogleAdMob end
------------------------------------------
adUnitId: 'ca-app-pub-3940256099942544/6300978111'ですが、これはバナー広告のテスト用IDとの事。
テスト広告を有効にする
https://developers.google.com/admob/unity/test-ads?hl=ja
この時点でエラーは無いようですので"ionic serve"で試します。
起動は問題ないようですが、バナーも出ない模様。
次はビルドとシンクロして実機で試してみます。
※ビルドとシンクロ時点では、プロジェクトレベルの "build.gradle"に変更は加わっていない事を確認
BuildVariantsをDebugにして実機にインストールしたところ、なかなか興味深い現象。
立ち上がるけど、即最小化します。
BuildVariantsをReleaseにして、GooglePlayの内部テストをして見ます。
・バージョンを上げて
・App Bundleファイル作成して
・内部テスト用のリリースを作ります
多分、このやり方の方が実機でテストより早いようです。
そして、広告っぽいのもうまく行っていますが、説明が難しい・・・
まず出てきたのは、Sony Game enhancerの設定画面のようです。
表示位置は上でアイコンのタイプも変えられるようです。
とりあえず、成功？
ただ、せめてバナーサイズや位置くらいは決められないと、と言う感じですね。
少し調べましたが、どうも違うような気がしますので、GoogleAdmobのご利用開始の方を参考にして、もう一度内部テストと行きます。
(一応コードは保存しておきます)
で、調査をしていったのですが、とんでもないものを見つけてしまった！
(いや、本当に）
以下は、プロジェクト直下の"android\build.gradle"なんですが
---------------------------------------------------------------
google()
jcenter()
---------------------------------------------------------------
と言う記述があります。
で、これを
---------------------------------------------------------------
google()
mavenCentral()
---------------------------------------------------------------
に直すのが、次のミッションなんですが、"jcenter()"とは何ぞや？ですよね？
どうも、どちらもjavaの公開ライブラリーを参照するためのコマンドのようですが、jcenter()は停止して、『2021/05/01現在読み取り専用として無期限に公開され続けることが発表されています。』との事。
JCenterが閉鎖されますが影響はありますか？
https://developers.karte.io/docs/app-faq-sunset-jcenter
別な記事では『Androidエンジニア界隈はこの話題で持ちきりだった』そうですが、この手の技術の(移り変わりと言う)裏舞台を見れたようで面白いかもしれませんね。
さて、対応としては以下のように二つとも追加するようでよいようです。
(上のリンク参照)
---------------------------------------------------------------
google()
mavenCentral()
jcenter()
---------------------------------------------------------------
引き続き、GoogleAdmobのご利用開始を参考に進めます。
次は、通常は"android\app\build.gradle"の変更です。
(ファイル名が同じなのが間違いそう)
dependenciesの部分に追加
---------------------------------------------------------------
//for GoogleAdMob start
implementation 'com.google.android.gms:play-services-ads:20.6.0'
//for GoogleAdMob end
---------------------------------------------------------------
そしてAndroidManifest.xmlへの追加。
とりあえず、ここまで保存
さて、次なんですがJavaのコード修正が例に出ています。
(ある意味当然ですが)
なるべく手を出したくないので、『ionic Google Mobile Ads SDK』で検索をかけて、期間1年以内の記事を検索しました。(3年前のが使えるか、ちょっと試す気にはならなかったです)
う～ん、あまり良い予感のしない記事ばかりです。
そこでバナー用のバナー広告のテスト用IDを変えてテストします。
(一部変更した項目もありますが、それはそのままで）
ビルド時にエラー発生。
Dependency関係でエラー(つまり今回変更した部分)ですので、そこら辺も戻します。
(先のgameenhanceが出たバージョン、シンクロのコマンドを間違えた気もしますので、そこも含めて見直します。)
とりあえず"Dependency"記述を外してApp Bundleファイルが出来るかを試すと・・・
ビルド成功。
今回は広告フォーマットを"アプリ起動"で試します。
https://developers.google.com/admob/android/test-ads#demo_ad_units
GooglePlayの内部テストに
アップロード → 保存 → リリースのレビュー → 内部テストとしての公開
(さすがになれましたね、この流れは)
テストすると、どうも繰り返し停止している模様。
もう一度、広告フォーマットを”バナー”に戻して再挑戦。
なんですが、ビルド中にソースコードを見て原因判った気がします。
IDは確かにバナーのものでしたが、それに続くコードもバナーのためのものでした。
とりあえず、バナーで再度試します。
エラーが出ないと数分でビルド出来ますので助かりますね。
これも繰り返し閉じます。
次は"mavenCentral()"を外して試します。
その次は、"android\app\src\main\AndroidManifest.xml"のmetaデータの部分の入れ替えです。
(多分、これが本命)
まず、"mavenCentral()"削除
(versionCode:8, versionName:"1.7")
これも繰り返し閉じます。
これは元に戻しても良いと思いますが、その前に本命の修正行きます。
(versionCode:9, versionName:"1.8")
奇々怪々な事が起きました。
まず、バナーについてはSony Game enhancer表示でプレイも出来ます。
ただし、現在の内部テスト用のバージョンではなく、最初の製品版のバージョンです。
謎が深まりましたが、続きは明日という事で！
おはようございます。
さて夜が明けて、いくつか可能性が思い浮かびました。
まず、そもそも『Sony Game enhancer』とバナーは全く無関係で、開始直後に『繰り返し停止』しているアプリは内部テストの公開を停止されているのでは？という事です。
(実機はSonyでGame enhancerとか言うのは最初からインストールされています）
色々見て見ると、どうも、その考えで正しい模様。
幾つかのバージョンは、リリース前テストでクラッシュ起こしています。
そのため製品版のインストールにつながった可能性があります。
ちょっと慎重に作業を進めたいと思います。
発見：
App Bundle エクスプローラからそのバージョンのテストが出来るようです。
ただ、スマートフォンのGoogleアカウントはGoogleデベロッパーのアカウントが無いので、ちょっと試せないですが。
順に試します。
まず、最後にアップしたバージョンを"ionic serve"でローカルホストで起動するとタスクマネージャーのCPUがスゴイ事に！
最低ここは確認してからアップするべきですね。
しばし悩みましたが、現バージョンのフォルダ名を変更して凍結、新規にionicプロジェクト作成して、保存してあるソースコードから広告なしの最新版まで状態を戻します。
手順としては
・新規プロジェクト作成(ひな形はblankテンプレート）
・最新の"src"フォルダーコピー
・"ionic serve"で確認
・"ionic build --prod"
・"npm install @capacitor/android@latest"
・"ionic cap add android"
・"npx cap sync android"
・"android"フォルダコピー
・ionic cap open android
そして実機で起動まで行います。
さて、作業しましたが、"ionic serve"でいきなり落ちました。
---------------------------------------------------------------
Content Security Policy: ページの設定により次のリソースの読み込みをブロックしました: http://localhost:8100/favicon.ico (“default-src”)
---------------------------------------------------------------
エクスプローラで見ると、"src"フォルダが読み込み専用になっているので、これをサブフォルダも含めて解除。再度試すと・・・
これもダメ。
念のため、最初のアプリのバージョンを試すと、こちらはOK。
このアプリ、別PCで作成したのでその関係で環境が異なるのが原因の気がします。
(細かいバージョンの違いあるいはユーザーの違い）
とりあえずプロジェクト全体を読み取り可能に変更します。
ファイル数が半端なく多いので10分くらいかかる模様。
今度こそと思うも、異なるエラー。
これは一瞬で理由が判りました。
プロジェクト直下の"tsconfig.json"を入れ替えてなかったので、各種JSONファイルの読み込み失敗です。
入れ替えて、問題なく最終バージョンに戻りました（AndroidStudio用の作業はまだですが）
これで気づいて、上の作業内容に追加です。
・AndorodStudioを立ち上げる前("npx cap sync android"の直前)にプロジェクト直下の"capacitor.config.ts"もコピーする
作業しますが、書き込みの続きは午後ですね。
お昼後、確認すると"capacitor.config.ts"のコピーのタイミングが遅かった事が判明。
(まあ、以前に実験していたのに、あわよくばと考えたのが甘い)
プロジェクトフォルダから、"android"フォルダを削除して(これは一瞬)、保存バージョンの"android"フォルダをコピーします。
(理解している理屈の上ではこれで行けると思う)
読み取り専用のプロパティを外して、開くと割と短時間で開きます。
次の点を確認
・appNameとappId
・アイコン関係
・App Bundleファイル作成時のパスワードを覚えているか
・BuildVariantsをデバッグにして実機のテスト
アイコンのBackGround設定だけ覚えていませんが、後は問題なし
一応、アイコンは再作成しておきます。
実機の方もアイコン含め問題なくテスト出来たので、appNameとappIdだけ一番大きなものにして、しばらくは別プロジェクトで、見て見ます。
(versionCode:10, versionName:"1.9")
流石に長くなったので、分けます。
