「Monaca/admob/admob-plus」の版間の差分
(→インストール方法) |
(→cordova-plugin-consentが含まれないとエラーが出る場合) |
||
(同じ利用者による、間の77版が非表示) | |||
行1: | 行1: | ||
==admob-plusとは== | ==admob-plusとは== | ||
admob-freeの後継 | admob-freeの後継 | ||
+ | |||
+ | admob-freeとadmob-plusは同じ作者(ratsonさん)で、admob-plusでは以下が改善されてる。 | ||
+ | *TypeScriptで記述 | ||
+ | *ファーストクラスのプロミスAPI | ||
+ | *Swiftを使用してiOSパーツを書き換える | ||
+ | *Ionicの公式サポート | ||
+ | *豊富なドキュメント | ||
+ | https://admob-plus.github.io/docs/faq.html | ||
==インストール== | ==インストール== | ||
行10: | 行18: | ||
プレビュー脇のタブから新規ターミナルを作成し、以下を実行 | プレビュー脇のタブから新規ターミナルを作成し、以下を実行 | ||
cordova plugin add cordova-admob-plus --variable APP_ID_ANDROID=ca-app-pub-3940256099942544~3347511713 --variable APP_ID_IOS=ca-app-pub-3940256099942544~1458002511 | cordova plugin add cordova-admob-plus --variable APP_ID_ANDROID=ca-app-pub-3940256099942544~3347511713 --variable APP_ID_IOS=ca-app-pub-3940256099942544~1458002511 | ||
− | + | 上記idはadmob公式のサンプルidです。 | |
cordova plugin add cordova-plugin-androidx | cordova plugin add cordova-plugin-androidx | ||
行18: | 行26: | ||
==サンプル設定== | ==サンプル設定== | ||
− | examples/basicのサンプルをプロジェクト直下にコピーし、example.admob.basicだけ設定したAppId名に変更する | + | #examples/basicのサンプルをプロジェクト直下にコピーし、example.admob.basicだけ設定したAppId名に変更する |
+ | #examples/basicのwww/index.htmlの以下部分をwww/index.htmlへ貼り付ける | ||
<pre> | <pre> | ||
− | |||
− | |||
− | |||
− | |||
cp examples/basic/www/js/index.js www/js/ | cp examples/basic/www/js/index.js www/js/ | ||
− | |||
</pre> | </pre> | ||
行44: | 行48: | ||
onDeviceReady() { | onDeviceReady() { | ||
this.receivedEvent('deviceready') | this.receivedEvent('deviceready') | ||
− | + | this.showAds() | |
− | this.checkIsLoaded().then(() => this.showAds()) | + | // this.checkIsLoaded().then(() => this.showAds()) |
}, | }, | ||
− | + | /* | |
checkIsLoaded() { | checkIsLoaded() { | ||
return admob.interstitial.isLoaded().then(result => { | return admob.interstitial.isLoaded().then(result => { | ||
行54: | 行58: | ||
}) | }) | ||
}, | }, | ||
− | + | */ | |
showAds() { | showAds() { | ||
admob.banner.show({ id: 'test', npa: '1' }).catch(console.log) | admob.banner.show({ id: 'test', npa: '1' }).catch(console.log) | ||
行95: | 行99: | ||
</pre> | </pre> | ||
body内に上記を追加。 | body内に上記を追加。 | ||
+ | |||
+ | <script src="components/loader.js"></script> | ||
+ | がある場合はcordova.jsの読み込みは不要�。 | ||
==admobが無いエラー== | ==admobが無いエラー== | ||
行103: | 行110: | ||
monacaデバッガーでのみで、起動してるとこのようなエラーが出る。 | monacaデバッガーでのみで、起動してるとこのようなエラーが出る。 | ||
− | + | Androidで以下確認すれば、このエラーは消える。 | |
− | #ビルド/Androidアプリのビルド/ | + | #ビルド/Androidアプリのビルド/デバッグビルドからビルド開始する |
==バナーサンプル== | ==バナーサンプル== | ||
行121: | 行128: | ||
<link rel="stylesheet" href="components/loader.css"> | <link rel="stylesheet" href="components/loader.css"> | ||
<link rel="stylesheet" href="css/style.css"> | <link rel="stylesheet" href="css/style.css"> | ||
− | |||
− | |||
</head> | </head> | ||
<body> | <body> | ||
− | + | <div class="app"> | |
− | + | <h1>AdMob Plus</h1> | |
− | + | <div id="deviceready" class="blink"> | |
− | + | <p class="event listening">Connecting to Device</p> | |
+ | <p class="event received">Device is Ready</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <script type="text/javascript" src="js/index.js"></script> | ||
+ | </body> | ||
+ | </html> | ||
+ | </pre> | ||
+ | |||
+ | www/js/index.js | ||
+ | <pre> | ||
+ | document.addEventListener('deviceready', () => { | ||
admob.banner.show({ | admob.banner.show({ | ||
id: { | id: { | ||
行145: | 行161: | ||
}) | }) | ||
}, false) | }, false) | ||
− | |||
− | |||
− | |||
</pre> | </pre> | ||
上記ca-app-pub-はadmobの公式サンプルのもの | 上記ca-app-pub-はadmobの公式サンプルのもの | ||
+ | |||
+ | iosは毎回アプリを閉じて開くと再生できた。 | ||
+ | |||
+ | ===バナーサイズや位置変更=== | ||
+ | <pre> | ||
+ | admob.banner.show({ | ||
+ | id: { | ||
+ | android: 'ca-app-pub-3940256099942544/6300978111', | ||
+ | ios: 'ca-app-pub-3940256099942544/2934735716', | ||
+ | }, | ||
+ | position: "top", // "bottom" | ||
+ | size: | ||
+ | { | ||
+ | width: 320, | ||
+ | height: 50 | ||
+ | } | ||
+ | // size: "SMART_BANNER" | ||
+ | } | ||
+ | </pre> | ||
+ | 参考:https://github.com/admob-plus/admob-plus/issues/76 | ||
+ | |||
+ | ====サイズ一覧==== | ||
+ | <pre> | ||
+ | BANNER, | ||
+ | LARGE_BANNER, | ||
+ | MEDIUM_RECTANGLE, | ||
+ | FULL_BANNER, | ||
+ | LEADERBOARD, | ||
+ | SMART_BANNER, | ||
+ | </pre> | ||
+ | |||
+ | 公式:https://admob-plus.github.io/docs/show-banner.html | ||
+ | |||
+ | こちらは、大き変わらなかった・・(20200616時点) | ||
+ | |||
+ | ==インステサンプル== | ||
+ | www/js/index.js | ||
+ | <pre> | ||
+ | document.addEventListener('deviceready', () => { | ||
+ | this.showAds() | ||
+ | // this.checkIsLoaded().then(() => this.showAds()) | ||
+ | }, false) | ||
+ | |||
+ | showAds() { | ||
+ | admob.interstitial.load({ | ||
+ | id: { | ||
+ | // replace with your ad unit IDs | ||
+ | android: 'ca-app-pub-3940256099942544/1033173712', | ||
+ | ios: 'ca-app-pub-3940256099942544/4411468910', | ||
+ | }, | ||
+ | }).then(() => admob.interstitial.show()) | ||
+ | </pre> | ||
+ | 上記ca-app-pub-はadmobの公式サンプルのもの | ||
+ | |||
+ | checkIsLoaded()を使うパターンはかなりの確率で、iosでうまくいかない場合がある。(2020/06/08現在) | ||
+ | |||
+ | ==リワードサンプル== | ||
+ | www/js/index.js | ||
+ | <pre> | ||
+ | document.addEventListener('deviceready', () => { | ||
+ | showAds() | ||
+ | }, false) | ||
+ | |||
+ | showAds() { | ||
+ | admob.rewardVideo.load({ | ||
+ | id: { | ||
+ | // replace with your ad unit IDs | ||
+ | android: 'ca-app-pub-3940256099942544/5224354917', | ||
+ | ios: 'ca-app-pub-3940256099942544/1712485313', | ||
+ | }, | ||
+ | }).then(() => admob.rewardVideo.show()) | ||
+ | } | ||
+ | </pre> | ||
+ | 上記ca-app-pub-はadmobの公式サンプルのもの | ||
+ | |||
+ | ===リワードのisReady関数=== | ||
+ | isReadyは不安定でiosでかなりの確率で、ロードできない事があったので、使わないほうが良いかも。(2020/06/08現在) | ||
+ | <pre> | ||
+ | document.addEventListener('deviceready', () => { | ||
+ | // this.showAds() | ||
+ | this.checkIsLoaded().then(() => this.showAds()) | ||
+ | }, false) | ||
+ | |||
+ | checkIsLoaded() { | ||
+ | return admob.rewardVideo.isReady().then(result => { | ||
+ | alert(result) | ||
+ | return result | ||
+ | }) | ||
+ | }, | ||
+ | </pre> | ||
+ | |||
+ | ==開発モードにする== | ||
+ | admob.setDevMode(true) | ||
+ | 広告の中に"test"が出ていれば成功。 | ||
+ | |||
+ | ==テストデバイスを指定== | ||
+ | 開発モードにするとテストデバイスになるようでその際は不要だが、開発モードにせずにテストデバイスモードにする用途で使用するのかも。 | ||
+ | |||
+ | バナー | ||
+ | <pre> | ||
+ | admob.banner.show({ | ||
+ | testDevices: ['1234567890ABCDEF1234567890ABCDEF'] | ||
+ | } | ||
+ | </pre> | ||
+ | レクタングル | ||
+ | <pre> | ||
+ | admob.interstitial.load({ | ||
+ | testDevices: ['1234567890ABCDEF1234567890ABCDEF'] | ||
+ | } | ||
+ | </pre> | ||
+ | リワード | ||
+ | <pre> | ||
+ | admob.rewardVideo.load({ | ||
+ | testDevices: ['1234567890ABCDEF1234567890ABCDEF'] | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | ==appIdをtestにしてappIdを省略== | ||
+ | appIdをtestとして省略してtestモードにすることができる | ||
+ | ===バナー=== | ||
+ | <pre> | ||
+ | admob.banner.show({ id: 'test', npa: '1' }).catch(console.log) | ||
+ | </pre> | ||
+ | android再生確認。iosは毎回アプリを閉じて開くと再生できた。 | ||
+ | |||
+ | ===インステ=== | ||
+ | <pre> | ||
+ | admob.interstitial | ||
+ | .load({ id: 'test' }) | ||
+ | .then(() => admob.interstitial.show()) | ||
+ | .catch(console.log) | ||
+ | </pre> | ||
+ | android,ios再生確認。 | ||
+ | ===リワード=== | ||
+ | <pre> | ||
+ | admob.rewardVideo | ||
+ | .load({ id: 'test' }) | ||
+ | .then(() => admob.rewardVideo.show()) | ||
+ | .catch(console.log) | ||
+ | </pre> | ||
+ | android,ios再生確認。 | ||
==Androidエラー== | ==Androidエラー== | ||
行176: | 行330: | ||
$ cordova plugin add cordova-plugin-androidx-adapter | $ cordova plugin add cordova-plugin-androidx-adapter | ||
</pre> | </pre> | ||
+ | |||
+ | ===cordova-plugin-consentが含まれないとエラーが出る場合=== | ||
+ | monaca-admobplusのandroidでアプリは、作成されたが、アプリを開いた際に、以下のようにメッセージが出る場合。GDPR(EU一般データ保護規則)のプラグインが無いので入れる。 | ||
+ | cordova-plugin-consent | ||
+ | 直し方 | ||
+ | $ cordova plugin add cordova-plugin-consent | ||
+ | |||
+ | 参考:https://admob-plus.github.io/docs/installation.html | ||
===変更がアプリに反映されないとき=== | ===変更がアプリに反映されないとき=== | ||
アプリがビルド出力された後、monacaのアカウントを別のアカウントで入ってないか確認する。 | アプリがビルド出力された後、monacaのアカウントを別のアカウントで入ってないか確認する。 | ||
+ | |||
+ | ==iOSエラー== | ||
+ | ===AMSBanner.swiftがThe following build commands failedというエラーが出たとき=== | ||
+ | <pre> | ||
+ | ** ARCHIVE FAILED ** | ||
+ | |||
+ | The following build commands failed: | ||
+ | CompileSwift normal armv7 /tmp/download/platforms/ios/admobplus/Plugins/cordova-admob-plus/AMSBanner.swift | ||
+ | CompileSwift normal armv7 /tmp/download/platforms/ios/admobplus/Plugins/cordova-admob-plus/AMSInterstitial.swift | ||
+ | CompileSwift normal armv7 /tmp/download/platforms/ios/admobplus/Plugins/cordova-admob-plus/AMSPlugin.swift | ||
+ | CompileSwift normal armv7 /tmp/download/platforms/ios/admobplus/Plugins/cordova-admob-plus/AMSRewardVideo.swift | ||
+ | CompileSwiftSources normal arm64 com.apple.xcode.tools.swift.compiler | ||
+ | CompileSwift normal arm64 /tmp/download/platforms/ios/admobplus/Plugins/cordova-admob-plus/AMSBanner.swift | ||
+ | (6 failures) | ||
+ | xcodebuild: Command failed with exit code 65 | ||
+ | </pre> | ||
+ | |||
+ | plugins/cordova-admob-plus/src/ios/AMSBanner.swift の中の以下部分を修正する | ||
+ | |||
+ | 修正前 | ||
+ | view.sendSubviewToBack(background) | ||
+ | 修正後 | ||
+ | view.sendSubview(toBack: background) | ||
+ | |||
+ | 一応このエラーは消えた。 | ||
+ | |||
+ | 参考:https://github.com/admob-plus/admob-plus/issues/96 | ||
+ | |||
+ | ===PhaseScriptExecutionエラーが出るとき=== | ||
+ | PhaseScriptExecution [CP]\ Copy\ Pods\ Resources /Users/builder/Library/Developer/Xcode/DerivedData/admobplus-azmnuofsrizxppbftnepxjnvvpwj/Build/Intermediates.noindex/ArchiveIntermediates/admobplus/IntermediateBuildFilesPath/admobplus.build/Debug-iphoneos/admobplus.build/Script-A588BB76815524C1F3DFDB5F.sh | ||
+ | (1 failure) | ||
+ | error: Resource "/Users/builder/Library/Developer/Xcode/DerivedData/admobplus-azmnuofsrizxppbftnepxjnvvpwj/Build/Intermediates.noindex/ArchiveIntermediates/admobplus/BuildProductsPath/Debug-iphoneos/PersonalizedAdConsent/PersonalizedAdConsent.bundle" not found. Run 'pod install' to update the copy resources script. | ||
+ | |||
+ | 以下を実行 | ||
+ | cordova plugin add cordova-plugin-firebasex@8.0.1 | ||
+ | したけど、以下依存エラーになったので、だめかも。 | ||
+ | Version of installed plugin: "cordova-plugin-androidx@2.0.0" does not satisfy dependency plugin requirement "cordova-plugin-androidx@^1.0.2". Try --force to use installed plugin as dependency. | ||
+ | |||
+ | 参考:https://github.com/dpa99c/cordova-plugin-firebasex/issues/326 | ||
+ | |||
+ | 結論:これ出たら最初からやり直してみる、androidx側のプラグインを入れずに、やるとでなくなった。(android側も確認してくとまずいかもだけど・・) | ||
+ | |||
+ | 最終結論:cordova plugin rm cordova-plugin-consent でプラグインを消すとよい。 | ||
+ | |||
+ | ===iOSでビルドがどうしてもできなかったとき=== | ||
+ | ビルドできた手順 | ||
+ | # https://github.com/admob-plus/admob-plus のzipをimport | ||
+ | # cordova plugin add cordova-admob-plus --variable APP_ID_ANDROID=ca-app-pub-3940256099942544~3347511713 --variable APP_ID_IOS=ca-app-pub-3940256099942544~1458002511 | ||
+ | # plugins/cordova-admob-plus/src/ios/AMSBanner.swiftの "view.sendSubviewToBack(background)"部分を "view.sendSubview(toBack: background)"に書き換える | ||
+ | # これでiOSアプリをビルドする(以降ビルドは不要で、htmlやjsの変更はビルドしなくてもデバッグ時は適用される) | ||
+ | # cp examples/basic/www/js/index.js www/js/ をコピーしてくる。 | ||
+ | # 上記www/index.htmlをコピーしてくる。 | ||
+ | バナー、インステ、リワードともに再生できた。 | ||
+ | |||
+ | この後、androidx入れてiosビルドしても、iosビルドに失敗しなかった。 | ||
+ | cordova plugin add cordova-plugin-androidx | ||
+ | cordova plugin add cordova-plugin-androidx-adapter | ||
+ | |||
+ | 以下を入れると・・・ | ||
+ | cordova plugin add cordova-plugin-consent | ||
+ | 以下エラーとなった・・。 | ||
+ | <pre> | ||
+ | The following build commands failed: | ||
+ | PhaseScriptExecution [CP]\ Copy\ Pods\ Resources /Users/builder/Library/Developer/Xcode/DerivedData/admobplus-azmnuofsrizxppbftnepxjnvvpwj/Build/Intermediates.noindex/ArchiveIntermediates/admobplus/IntermediateBuildFilesPath/admobplus.build/Debug- iphoneos/admobplus.build/Script-F5A83C26125D7FDCAA9D8A14.sh | ||
+ | (1 failure) | ||
+ | xcodebuild: Command failed with exit code 65 | ||
+ | </pre> | ||
+ | 以下 コマンドで cordova-plugin-consentを削除すると上記ビルド時のエラーが消えた。(管理画面でcordova-plugin-consentを消してもだめでした) | ||
+ | cordova plugin rm cordova-plugin-consent | ||
+ | |||
+ | ==AppId変更== | ||
+ | package.jsonのadmobの部分を変更 | ||
+ | <pre> | ||
+ | "cordova": { | ||
+ | "plugins": { | ||
+ | "cordova-custom-config": {}, | ||
+ | "cordova-admob-plus": { | ||
+ | "APP_ID_ANDROID": "ca-app-pub-3940256099942544~3347511713", | ||
+ | "APP_ID_IOS": "ca-app-pub-3940256099942544~1458002511" | ||
+ | }, | ||
+ | "cordova-plugin-androidx": {}, | ||
+ | "cordova-plugin-androidx-adapter": {} | ||
+ | } | ||
+ | }, | ||
+ | </pre> | ||
+ | |||
+ | ===iosでjs変更後広告が出ないことがある=== | ||
+ | *ビルドの必要のないhtmlやjsの変更直後だと広告が出ない事がある。 | ||
+ | *一旦アプリを落として、再度開くと出る。(iosのbannerで起こった。フリークエンシーキャップがそういう挙動なのか・・・) | ||
+ | |||
+ | ==AdMobメディエーション== | ||
+ | admob-freeとなってますがadmob-plusでも使えます。 | ||
+ | |||
+ | [[Monaca/admob/admob-free/mediation]] [ショートカット] |
2020年8月20日 (木) 11:53時点における最新版
目次
admob-plusとは
admob-freeの後継
admob-freeとadmob-plusは同じ作者(ratsonさん)で、admob-plusでは以下が改善されてる。
- TypeScriptで記述
- ファーストクラスのプロミスAPI
- Swiftを使用してiOSパーツを書き換える
- Ionicの公式サポート
- 豊富なドキュメント
https://admob-plus.github.io/docs/faq.html
インストール
https://github.com/admob-plus/admob-plus
インストール方法
公式:https://admob-plus.github.io/docs/installation.html
プレビュー脇のタブから新規ターミナルを作成し、以下を実行
cordova plugin add cordova-admob-plus --variable APP_ID_ANDROID=ca-app-pub-3940256099942544~3347511713 --variable APP_ID_IOS=ca-app-pub-3940256099942544~1458002511
上記idはadmob公式のサンプルidです。
cordova plugin add cordova-plugin-androidx cordova plugin add cordova-plugin-androidx-adapter
GDPR(EU一般データ保護規則)対応するために以下をインストール
cordova plugin add cordova-plugin-consent
サンプル設定
- examples/basicのサンプルをプロジェクト直下にコピーし、example.admob.basicだけ設定したAppId名に変更する
- examples/basicのwww/index.htmlの以下部分をwww/index.htmlへ貼り付ける
cp examples/basic/www/js/index.js www/js/
www/js/index.js
'use strict' const app = { initialize() { document.addEventListener( 'deviceready', this.onDeviceReady.bind(this), false, ) }, onDeviceReady() { this.receivedEvent('deviceready') this.showAds() // this.checkIsLoaded().then(() => this.showAds()) }, /* checkIsLoaded() { return admob.interstitial.isLoaded().then(result => { alert(result) return result }) }, */ showAds() { admob.banner.show({ id: 'test', npa: '1' }).catch(console.log) admob.interstitial .load({ id: 'test' }) .then(() => admob.interstitial.show()) .catch(console.log) admob.rewardVideo .load({ id: 'test' }) .then(() => admob.rewardVideo.show()) .catch(console.log) }, receivedEvent(id) { const parentElement = document.getElementById(id) const listeningElement = parentElement.querySelector('.listening') const receivedElement = parentElement.querySelector('.received') listeningElement.setAttribute('style', 'display:none;') receivedElement.setAttribute('style', 'display:block;') console.log(`Received Event: ${id}`) }, } app.initialize()
www/index.html
<div class="app"> <h1>AdMob Plus</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script>
body内に上記を追加。
<script src="components/loader.js"></script>
がある場合はcordova.jsの読み込みは不要�。
admobが無いエラー
Uncaught ReferenceError: admob is not defined www/js/index.js:18
admob.banner.show({ // 18行目はここなので、admobがnullな様子。
monacaデバッガーでのみで、起動してるとこのようなエラーが出る。
Androidで以下確認すれば、このエラーは消える。
- ビルド/Androidアプリのビルド/デバッグビルドからビルド開始する
バナーサンプル
公式バナーの使い方: https://admob-plus.github.io/docs/show-banner.html
www/index.html
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="app"> <h1>AdMob Plus</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> </div> <script type="text/javascript" src="js/index.js"></script> </body> </html>
www/js/index.js
document.addEventListener('deviceready', () => { admob.banner.show({ id: { // replace with your ad unit IDs android: 'ca-app-pub-3940256099942544/6300978111', ios: 'ca-app-pub-3940256099942544/2934735716', }, }).then(() => { setTimeout(() => { admob.banner.hide({ // replace with your ad unit IDs android: 'ca-app-pub-3940256099942544/6300978111', ios: 'ca-app-pub-3940256099942544/2934735716', }) }, 10000) }) }, false)
上記ca-app-pub-はadmobの公式サンプルのもの
iosは毎回アプリを閉じて開くと再生できた。
バナーサイズや位置変更
admob.banner.show({ id: { android: 'ca-app-pub-3940256099942544/6300978111', ios: 'ca-app-pub-3940256099942544/2934735716', }, position: "top", // "bottom" size: { width: 320, height: 50 } // size: "SMART_BANNER" }
参考:https://github.com/admob-plus/admob-plus/issues/76
サイズ一覧
BANNER, LARGE_BANNER, MEDIUM_RECTANGLE, FULL_BANNER, LEADERBOARD, SMART_BANNER,
公式:https://admob-plus.github.io/docs/show-banner.html
こちらは、大き変わらなかった・・(20200616時点)
インステサンプル
www/js/index.js
document.addEventListener('deviceready', () => { this.showAds() // this.checkIsLoaded().then(() => this.showAds()) }, false) showAds() { admob.interstitial.load({ id: { // replace with your ad unit IDs android: 'ca-app-pub-3940256099942544/1033173712', ios: 'ca-app-pub-3940256099942544/4411468910', }, }).then(() => admob.interstitial.show())
上記ca-app-pub-はadmobの公式サンプルのもの
checkIsLoaded()を使うパターンはかなりの確率で、iosでうまくいかない場合がある。(2020/06/08現在)
リワードサンプル
www/js/index.js
document.addEventListener('deviceready', () => { showAds() }, false) showAds() { admob.rewardVideo.load({ id: { // replace with your ad unit IDs android: 'ca-app-pub-3940256099942544/5224354917', ios: 'ca-app-pub-3940256099942544/1712485313', }, }).then(() => admob.rewardVideo.show()) }
上記ca-app-pub-はadmobの公式サンプルのもの
リワードのisReady関数
isReadyは不安定でiosでかなりの確率で、ロードできない事があったので、使わないほうが良いかも。(2020/06/08現在)
document.addEventListener('deviceready', () => { // this.showAds() this.checkIsLoaded().then(() => this.showAds()) }, false) checkIsLoaded() { return admob.rewardVideo.isReady().then(result => { alert(result) return result }) },
開発モードにする
admob.setDevMode(true)
広告の中に"test"が出ていれば成功。
テストデバイスを指定
開発モードにするとテストデバイスになるようでその際は不要だが、開発モードにせずにテストデバイスモードにする用途で使用するのかも。
バナー
admob.banner.show({ testDevices: ['1234567890ABCDEF1234567890ABCDEF'] }
レクタングル
admob.interstitial.load({ testDevices: ['1234567890ABCDEF1234567890ABCDEF'] }
リワード
admob.rewardVideo.load({ testDevices: ['1234567890ABCDEF1234567890ABCDEF'] }
appIdをtestにしてappIdを省略
appIdをtestとして省略してtestモードにすることができる
バナー
admob.banner.show({ id: 'test', npa: '1' }).catch(console.log)
android再生確認。iosは毎回アプリを閉じて開くと再生できた。
インステ
admob.interstitial .load({ id: 'test' }) .then(() => admob.interstitial.show()) .catch(console.log)
android,ios再生確認。
リワード
admob.rewardVideo .load({ id: 'test' }) .then(() => admob.rewardVideo.show()) .catch(console.log)
android,ios再生確認。
Androidエラー
androidx.core:coreエラーが出るとき
> Task :app:processDebugManifest FAILED /tmp/download/platforms/android/app/src/main/AndroidManifest.xml:22:18-91 Error: Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory) from [com.android.support:support-compat:28.0.0] AndroidManifest.xml:22:18-91 is also present at [androidx.core:core:1.0.0] AndroidManifest.xml:22:18-86 value=(androidx.core.app.CoreComponentFactory). Suggestion: add 'tools:replace="android:appComponentFactory"' to <application> element at AndroidManifest.xml:22:5-50:19 to override. See http://g.co/androidstudio/manifest-merger for more information about the manifest merger. FAILURE: Build failed with an exception.
androidxが足らないので入れる。
$ cordova plugin add cordova-plugin-androidx
package android.support.v4.content does not existエラーが出るとき
> Task :app:compileDebugJavaWithJavac FAILED /tmp/download/platforms/android/app/src/main/java/mobi/monaca/plugins/debugger/api/BaseSseConnection.java:5: error: package android.support.v4.content does not exist import android.support.v4.content.LocalBroadcastManager;
androidx-adapterが足らないので入れる。
$ cordova plugin add cordova-plugin-androidx-adapter
cordova-plugin-consentが含まれないとエラーが出る場合
monaca-admobplusのandroidでアプリは、作成されたが、アプリを開いた際に、以下のようにメッセージが出る場合。GDPR(EU一般データ保護規則)のプラグインが無いので入れる。
cordova-plugin-consent
直し方
$ cordova plugin add cordova-plugin-consent
参考:https://admob-plus.github.io/docs/installation.html
変更がアプリに反映されないとき
アプリがビルド出力された後、monacaのアカウントを別のアカウントで入ってないか確認する。
iOSエラー
AMSBanner.swiftがThe following build commands failedというエラーが出たとき
** ARCHIVE FAILED ** The following build commands failed: CompileSwift normal armv7 /tmp/download/platforms/ios/admobplus/Plugins/cordova-admob-plus/AMSBanner.swift CompileSwift normal armv7 /tmp/download/platforms/ios/admobplus/Plugins/cordova-admob-plus/AMSInterstitial.swift CompileSwift normal armv7 /tmp/download/platforms/ios/admobplus/Plugins/cordova-admob-plus/AMSPlugin.swift CompileSwift normal armv7 /tmp/download/platforms/ios/admobplus/Plugins/cordova-admob-plus/AMSRewardVideo.swift CompileSwiftSources normal arm64 com.apple.xcode.tools.swift.compiler CompileSwift normal arm64 /tmp/download/platforms/ios/admobplus/Plugins/cordova-admob-plus/AMSBanner.swift (6 failures) xcodebuild: Command failed with exit code 65
plugins/cordova-admob-plus/src/ios/AMSBanner.swift の中の以下部分を修正する
修正前
view.sendSubviewToBack(background)
修正後
view.sendSubview(toBack: background)
一応このエラーは消えた。
参考:https://github.com/admob-plus/admob-plus/issues/96
PhaseScriptExecutionエラーが出るとき
PhaseScriptExecution [CP]\ Copy\ Pods\ Resources /Users/builder/Library/Developer/Xcode/DerivedData/admobplus-azmnuofsrizxppbftnepxjnvvpwj/Build/Intermediates.noindex/ArchiveIntermediates/admobplus/IntermediateBuildFilesPath/admobplus.build/Debug-iphoneos/admobplus.build/Script-A588BB76815524C1F3DFDB5F.sh (1 failure) error: Resource "/Users/builder/Library/Developer/Xcode/DerivedData/admobplus-azmnuofsrizxppbftnepxjnvvpwj/Build/Intermediates.noindex/ArchiveIntermediates/admobplus/BuildProductsPath/Debug-iphoneos/PersonalizedAdConsent/PersonalizedAdConsent.bundle" not found. Run 'pod install' to update the copy resources script.
以下を実行
cordova plugin add cordova-plugin-firebasex@8.0.1
したけど、以下依存エラーになったので、だめかも。
Version of installed plugin: "cordova-plugin-androidx@2.0.0" does not satisfy dependency plugin requirement "cordova-plugin-androidx@^1.0.2". Try --force to use installed plugin as dependency.
参考:https://github.com/dpa99c/cordova-plugin-firebasex/issues/326
結論:これ出たら最初からやり直してみる、androidx側のプラグインを入れずに、やるとでなくなった。(android側も確認してくとまずいかもだけど・・)
最終結論:cordova plugin rm cordova-plugin-consent でプラグインを消すとよい。
iOSでビルドがどうしてもできなかったとき
ビルドできた手順
- https://github.com/admob-plus/admob-plus のzipをimport
- cordova plugin add cordova-admob-plus --variable APP_ID_ANDROID=ca-app-pub-3940256099942544~3347511713 --variable APP_ID_IOS=ca-app-pub-3940256099942544~1458002511
- plugins/cordova-admob-plus/src/ios/AMSBanner.swiftの "view.sendSubviewToBack(background)"部分を "view.sendSubview(toBack: background)"に書き換える
- これでiOSアプリをビルドする(以降ビルドは不要で、htmlやjsの変更はビルドしなくてもデバッグ時は適用される)
- cp examples/basic/www/js/index.js www/js/ をコピーしてくる。
- 上記www/index.htmlをコピーしてくる。
バナー、インステ、リワードともに再生できた。
この後、androidx入れてiosビルドしても、iosビルドに失敗しなかった。
cordova plugin add cordova-plugin-androidx cordova plugin add cordova-plugin-androidx-adapter
以下を入れると・・・
cordova plugin add cordova-plugin-consent
以下エラーとなった・・。
The following build commands failed: PhaseScriptExecution [CP]\ Copy\ Pods\ Resources /Users/builder/Library/Developer/Xcode/DerivedData/admobplus-azmnuofsrizxppbftnepxjnvvpwj/Build/Intermediates.noindex/ArchiveIntermediates/admobplus/IntermediateBuildFilesPath/admobplus.build/Debug- iphoneos/admobplus.build/Script-F5A83C26125D7FDCAA9D8A14.sh (1 failure) xcodebuild: Command failed with exit code 65
以下 コマンドで cordova-plugin-consentを削除すると上記ビルド時のエラーが消えた。(管理画面でcordova-plugin-consentを消してもだめでした)
cordova plugin rm cordova-plugin-consent
AppId変更
package.jsonのadmobの部分を変更
"cordova": { "plugins": { "cordova-custom-config": {}, "cordova-admob-plus": { "APP_ID_ANDROID": "ca-app-pub-3940256099942544~3347511713", "APP_ID_IOS": "ca-app-pub-3940256099942544~1458002511" }, "cordova-plugin-androidx": {}, "cordova-plugin-androidx-adapter": {} } },
iosでjs変更後広告が出ないことがある
- ビルドの必要のないhtmlやjsの変更直後だと広告が出ない事がある。
- 一旦アプリを落として、再度開くと出る。(iosのbannerで起こった。フリークエンシーキャップがそういう挙動なのか・・・)
AdMobメディエーション
admob-freeとなってますがadmob-plusでも使えます。
Monaca/admob/admob-free/mediation [ショートカット]