ionicで本気でAdMob② 広告表示テスト成功！ソースコードと手順
2022年5月27日14時04分：
今日新規で作ったプロジェクトで広告が出ませんでした。
原因は、・appID appNameの変更("capacitor.config.ts")をしたのですが、このIDはGoogleAdMobに登録済みのIDで、それに基づいたGoogleAdMob管理のIDと"android\app\src\main\AndroidManifest.xml"に記載した値が異なったためのようです。
(テスト用のアプリIDを使用していました)
GoogleAdMob：このアプリのID は登録されているが、それに対して発行したIDと異なるぞ？
と言う感じのようです。
アプリIDをGoogleAdMobから割り当てられたIDに変更する事で無事に広告表示しました。
既存のアプリIDを使用するときはご注意を！
広告表示に成功しました。
いじったソースコードとコマンド一覧(手順)を記載しますね。
インデントは、いつものように半角スペース2つを全角スペースに変換しています。
また"src\app\tab1\tab1.page.ts"については、以下のサイトからのまるごとコピーです。
capacitorでadmobでアプリ広告をAndroidで表示する
https://blog.np-sys.com/capacitor-admob-on-android/
まず手順から
（C:\MyTestに"addTab"と言う名前のプロジェクトを作りました)
コマンドプロンプトから
・cd c:\MyTest
・ionic start addTab tabs --type=angular
作成後
・cd c:\MyTest\addTab
・ionic serve で一応確認
・ctrl+Cでionic serveを終了
・appID appNameの変更("capacitor.config.ts")
・npm install @capacitor/android@latest
・npm install --save @capacitor-community/admob
・ionic build --prod
・ionic cap add android
・npx cap sync android
・SDK関係の設定とtab1.page.tsの修正
(VisualStudioCodeで行った。変更内容は、まとめて後述)
・ionic build --prod
・npx cap sync android
・ionic cap open android (AndorodStudioの起動)
かなり時間がかかるが、読み込み完了後、実機をPCに接続してテスト
これまた時間がかかるが広告付きアプリの表示成功！！
以下、変更したソースコードです。
(今回修正した部分は"for admob start"と"for admob end"で囲みました。)
"android\app\build.gradle"(32行から43行の表示)
---------------------------------------------------------------
dependencies {
implementation fileTree(include: ['*.jar'], dir: 'libs')
implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
implementation project(':capacitor-android')
testImplementation "junit:junit:$junitVersion"
androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
implementation project(':capacitor-cordova-android-plugins')
//for admob start
implementation 'com.google.android.gms:play-services-ads:20.6.0'
//for admob end
}
---------------------------------------------------------------
"android\app\src\main\AndroidManifest.xml"(5行から18行表示)
---------------------------------------------------------------
<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">
<!--for admob start-->
<!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 -->
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-3940256099942544~3347511713"/>
<!--for admob end-->
<activity
---------------------------------------------------------------
"android\variables.gradle"(すべて表示)
---------------------------------------------------------------
ext {
minSdkVersion = 21
//for admob start
compileSdkVersion = 31
// compileSdkVersion = 30
//for admob end
targetSdkVersion = 30
androidxActivityVersion = '1.2.0'
androidxAppCompatVersion = '1.2.0'
androidxCoordinatorLayoutVersion = '1.1.0'
androidxCoreVersion = '1.3.2'
androidxFragmentVersion = '1.3.0'
junitVersion = '4.13.1'
androidxJunitVersion = '1.1.2'
androidxEspressoCoreVersion = '3.3.0'
cordovaAndroidVersion = '7.0.0'
}
---------------------------------------------------------------
"src\app\tab1\tab1.page.ts"(すべて表示)
---------------------------------------------------------------
import { Component } from '@angular/core';
import { AdMob, BannerAdOptions, BannerAdSize, BannerAdPosition, BannerAdPluginEvents, AdMobBannerSize } from '@capacitor-community/admob';
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
constructor() {
AdMob.initialize({
requestTrackingAuthorization: true,
//testingDevices: ['2077ef9a63d2b398840261c8221a0c9b'],
//initializeForTesting: true,
});
}
ionViewDidEnter(){
AdMob.addListener(BannerAdPluginEvents.Loaded, () => {
// Subscribe Banner Event Listener
console.log('loaded');
});
AdMob.addListener(BannerAdPluginEvents.SizeChanged, (size: AdMobBannerSize) => {
// Subscribe Change Banner Size
console.log('size changed');
});
const options: BannerAdOptions = {
adId: 'ca-app-pub-3940256099942544/15453xxxxxx',//test
adSize: BannerAdSize.BANNER,
position: BannerAdPosition.BOTTOM_CENTER,
margin: 100,
isTesting: true
// npa: true
};
AdMob.showBanner(options);
}
}
---------------------------------------------------------------
ionic info
Ionic:
Ionic CLI : 6.19.0 (C:\Users\*****\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 6.1.7
@angular-devkit/build-angular : 13.2.6
@angular-devkit/schematics : 13.2.6
@angular/cli : 13.2.6
@ionic/angular-toolkit : 6.1.0
Capacitor:
Capacitor CLI : 3.5.1
@capacitor/android : 3.5.1
@capacitor/core : 3.5.1
@capacitor/ios : not installed
Utility:
cordova-res : 0.15.4
native-run : 1.6.0
System:
NodeJS : v16.14.0 (C:\Program Files\nodejs\node.exe)
npm : 8.3.1
OS : Windows 10
