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
サンプル設定
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/
config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="example.admob.basic" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>AdmobBasicExample</name>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<preference name="UseSwiftLanguageVersion" value="5" />
</platform>
<plugin name="cordova-plugin-whitelist" spec="1.3.3" />
<plugin name="cordova-admob-plus" spec="../../packages/cordova">
<variable name="APP_ID_ANDROID" value="ca-app-pub-3940256099942544~3347511713" />
<variable name="APP_ID_IOS" value="ca-app-pub-3940256099942544~1458002511" />
</plugin>
<engine name="ios" spec="5.1.1" />
<engine name="android" spec="8.1.0" />
<engine name="browser" spec="6.0.0" />
</widget>
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
<!DOCTYPE html>
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</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="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
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の公式サンプルのもの
