facebook twitter hatena line email

Monaca/admob/admob-free/gitlab

提供: 初心者エンジニアの簡易メモ
2020年5月22日 (金) 14:06時点におけるAdmin (トーク | 投稿記録)による版 (json404のエラーが発生)

移動: 案内検索

ダウンロード&インストール

gitlab https://gitlab.com/ratson/cordova-admob-sdk

  • zipでDLしてmonacaへインポート
  1. インポートするとアップデートするボタンが出るので押す。

プラグイン追加

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

  1. 設定/cordovaプラグイン/cordovaプラグインのインポートボタンをクリック
  2. 入力欄に"cordova-plugin-admob-free"を入力しインポート

xmlからプラグイン追加

config.xmlの</widget>の1つ上に以下を追加

<plugin name="cordova-plugin-admob-free" spec="~0.12.0" />
  1. プレビューLogを更新する
  2. フォルダリストの表示を更新する
  3. 以下ファイルができてることを確認。
node_modules/cordova-plugin-admob-free/www/admob.js

cordova-admob-sdkをインストール

src/ios/GoogleMobileAds.frameworkが入ってない場合は、 cordova-admob-sdkをインストールする。


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

設定/cordovaプラグイン/cordovaプラグインのインポートボタンをクリック 入力欄に"cordova-admob-sdk"を入力しインポート

xmlからプラグイン追加

 <plugin name="cordova-admob-sdk" />
  1. プレビューLogを更新する
  2. フォルダリストの表示を更新する
  3. node_modules/cordova-admob-sdkができてることを確認。

確認

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

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

Admob設定

cordova-plugin-admob-freeプラグインから設定を選択し以下のように入力欄に入れる。

ADMOB_APP_ID=ca-app-pub-0679xxxxxxxxxxxxx/896xxxxxxxxxx

admobがない

Uncaught ReferenceError: admob is not defined

以下のようなところにadmob.js、あればコピーしてもかも(だめでした。)

cp ./node_modules/cordova-plugin-admob-free/www/admob.js ./www/

browserSyncエラー

以下エラーは、表示のブラウザ同期に失敗しただけで、環境が悪いだけで、コードの挙動には、あまり関係ないと思われる・・。

couldn't open browser (if you are using browserSync in a headless environment, you might want to set the open option to false

Security Policyエラーが発生

Refused to load the script 'https://debug.monaca.mobi/target/target-script-min.js' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

npm install実行時の脆弱性の警告

`npm audit fix` to fix them or `npm audit` for details

以下で確認

npm audit fix

npm run buildでエラー

以下エラー

verbose stack Error: missing script build 
lib/node_modules/npm/lib/-script.js:155:19

以下コマンドで対応すると良いらしいが・・

webpack -v
npm install webpack -g

参考:https://blog.csdn.net/qq_37591637/article/details/103576163

以下のようなエラーが新たに起こった。権限の問題かも・・

path /opt/node-v10.15.3/lib/node/modules
code EACCES
errno 13

参考:https://qiita.com/okohs/items/ced3c3de30af1035242d

json404のエラーが発生

{"status": "fail", "code": 404," message": "Not found"}

サンプル

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>
    
  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</head>
<body onload="init();" id="stage" class="theme">
	<br />
    This is a template for Monaca app.
  <h1>Hello AdMob</h1>
  <button class="showAd">Show me some AD</button>

</body>
</html>

js/index.js

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',
  }
}
function init() {
    document.addEventListener("deviceready", deviceInfo, false);
}

var deviceInfo = function() {
  if (typeof admob === 'undefined') {
    console.log("admob undefined!!");
    return;
  }
  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.getElementsByClassName('showAd').disabled = true
  document.getElementsByClassName('showAd').onclick = function() {
    admob.interstitial.show()
  }
  
};

document.addEventListener('deviceready', function() {
}, 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.getElementsByClassName('showAd').disabled = false
})

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

  admob.interstitial.prepare()
})

admobのidはサンプルを使ってます。

参考

https://senmyou.xyz/cordova-admob-free%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%A7%E5%BA%83%E5%91%8A%E3%82%92%E8%A1%A8%E7%A4%BA/

https://apps.jp.net/introduction/admob-reward-on-monaca/