Monaca/admob/admob-plus
目次
[非表示]admob-plusとは
admob-freeの後継
インストール
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
上記は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名に変更する
cp -R examples/basic/res/icon res/ cp -R examples/basic/res/screen res/ cp -R examples/basic/www/css/index.css www/css/ cp -R examples/basic/www/img www/ cp examples/basic/www/js/index.js www/js/ cp examples/basic/www/index.html www/
www/js/index.js
'use strict' const app = { initialize() { document.addEventListener( 'deviceready', this.onDeviceReady.bind(this), false, ) }, onDeviceReady() { this.receivedEvent('deviceready') 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"> <script> </script> </head> <body> <br /> This is a template for Monaca app. <script> 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) </script> </body> </html>
上記ca-app-pub-はadmobの公式サンプルのもの
インステサンプル
document.addEventListener('deviceready', () => { 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()) }, false)
上記ca-app-pub-はadmobの公式サンプルのもの
リワードサンプル
document.addEventListener('deviceready', () => { 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()) }, false)
上記ca-app-pub-はadmobの公式サンプルのもの
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のandoridでアプリは、作成されたが、アプリを開いた際に、以下のようにメッセージが出る場合。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側も確認してくとまずいかもだけど・・)
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
- これで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