facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内、 検索
(→‎admobが無いエラー)
(→‎インストール方法)
行14: 行14:
 
  cordova plugin add cordova-plugin-androidx
 
  cordova plugin add cordova-plugin-androidx
 
  cordova plugin add cordova-plugin-androidx-adapter
 
  cordova plugin add cordova-plugin-androidx-adapter
 +
cordova plugin add cordova-plugin-consent # GDPR（EU一般データ保護規則）対応
  
 
==サンプル設定==
 
==サンプル設定==

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

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
cordova plugin add cordova-plugin-consent # GDPR（EU一般データ保護規則）対応

サンプル設定

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デバッガーでのみで、起動してるとこのようなエラーが出る。

以下確認すれば、このエラーは消える。

  1. ビルド/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

変更がアプリに反映されないとき

アプリがビルド出力された後、monacaのアカウントを別のアカウントで入ってないか確認する。

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