monacaでadmob(admob-free)表示したい。

monacaでadmobをインストールする方法は、２つで
admob-proとadmob-freeがありますが、
admob-proは別質問(https://teratail.com/questions/263838)で投稿したとおり、
うまく行かなかったので、
admob-freeについても挑戦してたのですが、
こちらもandroidのmonacaデバッガー(localKit経由)を使って実機で以下のようなエラーとなりました。
(クラウドIDEのプレビューでも同様のエラーです。)

##エラーメッセージ

Uncaught ReferenceError: admob is not defined

##やったこと
サンプルダウンロード
https://gitlab.com/ratson/cordova-admob-sdk

クラウドIDEから以下プラグイン追加

cordova-plugin-admob-free

以下にファイルが有ることを確認

node_modules/cordova-plugin-admob-free/www/admob.js
src/ios/GoogleMobileAds.framework

package.jsonに以下が記載されてることを確認

    "cordova": {
        "id": "cordova-plugin-admob-free",
        "platforms": [
            "android",
            "ios"
        ]
    },

cordova-plugin-admob-freeプラグインから設定に以下のように、自分のadmob管理ページから発行したappIdを入れる

ADMOB_APP_ID=ca-app-pub-~~~~~~~~~~~~~~~~~~~~~~~~

###indexとjsは以下githubのexample/basicのサンプルを使ってます。
https://github.com/ratson/cordova-plugin-admob-free/tree/master/examples/basic/www

index.html

<!DOCTYPE html>
<html>
<head>
  <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 *">
  <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">
  <title>Hello AdMob</title>
</head>
<body>
  <h1>Hello AdMob</h1>
  <button id="showAd">Show me some AD</button>
  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

js/index.js (以下のca-app-pubはadmobサンプルのもの)

var admobid = {}
if (/(android)/i.test(navigator.userAgent)) {  // for android & amazon-fireos
  admobid = {
    banner: 'ca-app-pub-3940256099942544/6300978111',
    interstitial: 'ca-app-pub-3940256099942544/1033173712',
  }
} else if (/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {  // for ios
  admobid = {
    banner: 'ca-app-pub-3940256099942544/2934735716',
    interstitial: 'ca-app-pub-3940256099942544/4411468910',
  }
}

document.addEventListener('deviceready', function() {
  admob.banner.config({
    id: admobid.banner,
    isTesting: true,
    autoShow: true,
  })
  admob.banner.prepare()

  admob.interstitial.config({
    id: admobid.interstitial,
    isTesting: true,
    autoShow: false,
  })
  admob.interstitial.prepare()

  document.getElementById('showAd').disabled = true
  document.getElementById('showAd').onclick = function() {
    admob.interstitial.show()
  }

}, false)

document.addEventListener('admob.banner.events.LOAD_FAIL', function(event) {
  console.log(event)
})

document.addEventListener('admob.interstitial.events.LOAD_FAIL', function(event) {
  console.log(event)
})

document.addEventListener('admob.interstitial.events.LOAD', function(event) {
  console.log(event)
  document.getElementById('showAd').disabled = false
})

document.addEventListener('admob.interstitial.events.CLOSE', function(event) {
  console.log(event)

  admob.interstitial.prepare()
})

行動規範の内容に同意します

回答1件

ベストアンサー

ぱっと見ソースコード的に怪しそうなところはないように見えます。

確認はカスタムビルドデバッガーで行ってますでしょうか？
それともデバッグビルドで行っていますでしょうか？

上記手順に、クラウドIDEから以下プラグイン追加のあと、ビルド実行の手順がないように見えますが、
ビルドはされた上で実行しても同様なエラーが発生するか試してみてください。

投稿2020/05/31 10:57

yuto7th

総合スコア22

kaji

2020/06/01 06:38

カスタムビルドデバッガーもデバッグビルドもしておりませんでした。 androidのデバッグアプリから画面表示までいけてたので、そこで、四苦八苦しておりました。カスタムビルドデバッガーすることで、広告を表示することができました。 yuto7thさんのおかげで、先に進めそうです、ありがとうございました。