facebook twitter hatena line email

「Monaca/admob/admob-plus」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内、 検索
(→‎インストール方法)
(→‎サンプル設定)
行47: 行47:
 
     <engine name="browser" spec="6.0.0" />
 
     <engine name="browser" spec="6.0.0" />
 
</widget>
 
</widget>
 +
</pre>
 +
 +
www/js/index.js
 +
<pre>
 +
'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()
 +
</pre>
 +
 +
www/index.html
 +
<pre>
 +
<!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>
 +
 
</pre>
 
</pre>
  

2020年6月3日 (水) 12:53時点における版

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名に変更する

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の公式サンプルのもの

「http://wiki.nonip.net/index.php?title=Monaca/admob/admob-plus&oldid=11032」から取得