「Monaca/admob/admob-plus」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→インストール方法) |
(→package android.support.v4.content does not existエラーが出るとき) |
||
| 行176: | 行176: | ||
$ cordova plugin add cordova-plugin-androidx-adapter | $ cordova plugin add cordova-plugin-androidx-adapter | ||
</pre> | </pre> | ||
| + | |||
| + | ===cordova-plugin-consentが含まれないとエラーが出る場合=== | ||
| + | monaca-admobplusのandoridでアプリは、作成されたが、アプリを開いた際に、以下のようにメッセージが出る場合 | ||
| + | cordova-plugin-consent | ||
| + | 直し方 | ||
| + | $ cordova plugin add cordova-plugin-consent | ||
===変更がアプリに反映されないとき=== | ===変更がアプリに反映されないとき=== | ||
アプリがビルド出力された後、monacaのアカウントを別のアカウントで入ってないか確認する。 | アプリがビルド出力された後、monacaのアカウントを別のアカウントで入ってないか確認する。 | ||
2020年6月3日 (水) 20:06時点における版
目次
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内に上記を追加。
admobが無いエラー
Uncaught ReferenceError: admob is not defined www/js/index.js:18
admob.banner.show({ // 18行目はここなので、admobがnullな様子。
monacaデバッガーでのみで、起動してるとこのようなエラーが出る。
以下確認すれば、このエラーは消える。
- ビルド/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の公式サンプルのもの
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でアプリは、作成されたが、アプリを開いた際に、以下のようにメッセージが出る場合
cordova-plugin-consent
直し方
$ cordova plugin add cordova-plugin-consent
変更がアプリに反映されないとき
アプリがビルド出力された後、monacaのアカウントを別のアカウントで入ってないか確認する。
