「Monaca/admob/admob-plus」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→サンプル設定) |
(→サンプル設定) |
||
| 行22: | 行22: | ||
cp -R examples/basic/www/css/index.css www/css/ | cp -R examples/basic/www/css/index.css www/css/ | ||
cp -R examples/basic/www/img www/ | cp -R examples/basic/www/img www/ | ||
| − | |||
cp examples/basic/www/js/index.js www/js/ | cp examples/basic/www/js/index.js www/js/ | ||
cp examples/basic/www/index.html www/ | cp examples/basic/www/index.html www/ | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</pre> | </pre> | ||
| 行114: | 行81: | ||
www/index.html | www/index.html | ||
<pre> | <pre> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<div class="app"> | <div class="app"> | ||
<h1>AdMob Plus</h1> | <h1>AdMob Plus</h1> | ||
| 行143: | 行90: | ||
<script type="text/javascript" src="cordova.js"></script> | <script type="text/javascript" src="cordova.js"></script> | ||
<script type="text/javascript" src="js/index.js"></script> | <script type="text/javascript" src="js/index.js"></script> | ||
| − | |||
| − | |||
| − | |||
</pre> | </pre> | ||
| + | body内に上記を追加。 | ||
==admobが無いエラー== | ==admobが無いエラー== | ||
2020年6月3日 (水) 13:17時点における版
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
サンプル設定
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/index.html:18
admob.banner.show({ // 18行目はここなので、admobがnullな様子。
バナーサンプル
公式バナーの使い方： 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の公式サンプルのもの
