facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内、 検索
(→‎cordova-plugin-consentが含まれないとエラーが出る場合)
 
(同じ利用者による、間の26版が非表示)
行18: 行18:
 
プレビュー脇のタブから新規ターミナルを作成し、以下を実行
 
プレビュー脇のタブから新規ターミナルを作成し、以下を実行
 
  cordova plugin add cordova-admob-plus --variable APP_ID_ANDROID=ca-app-pub-3940256099942544~3347511713 --variable APP_ID_IOS=ca-app-pub-3940256099942544~1458002511
 
  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です。
+
上記idはadmob公式のサンプルidです。
  
 
  cordova plugin add cordova-plugin-androidx
 
  cordova plugin add cordova-plugin-androidx
行48: 行48:
 
   onDeviceReady() {
 
   onDeviceReady() {
 
     this.receivedEvent('deviceready')
 
     this.receivedEvent('deviceready')
−
 
+
    this.showAds()
−
     this.checkIsLoaded().then(() => this.showAds())
+
     // this.checkIsLoaded().then(() => this.showAds())
 
   },
 
   },
−
 
+
/*
 
   checkIsLoaded() {
 
   checkIsLoaded() {
 
     return admob.interstitial.isLoaded().then(result => {
 
     return admob.interstitial.isLoaded().then(result => {
行58: 行58:
 
     })
 
     })
 
   },
 
   },
−
 
+
*/
 
   showAds() {
 
   showAds() {
 
     admob.banner.show({ id: 'test', npa: '1' }).catch(console.log)
 
     admob.banner.show({ id: 'test', npa: '1' }).catch(console.log)
行111: 行111:
  
 
Androidで以下確認すれば、このエラーは消える。
 
Androidで以下確認すれば、このエラーは消える。
−
#ビルド/Androidアプリのビルド/カスタムビルドデバッガーからビルド開始する
+
#ビルド/Androidアプリのビルド/デバッグビルドからビルド開始する
  
 
==バナーサンプル==
 
==バナーサンプル==
行165: 行165:
  
 
iosは毎回アプリを閉じて開くと再生できた。
 
iosは毎回アプリを閉じて開くと再生できた。
 +
 +
===バナーサイズや位置変更===
 +
<pre>
 +
admob.banner.show({
 +
      id: {
 +
        android: 'ca-app-pub-3940256099942544/6300978111',
 +
      ios: 'ca-app-pub-3940256099942544/2934735716',
 +
      },
 +
      position: "top", // "bottom"
 +
      size:
 +
      {
 +
          width: 320,
 +
          height: 50
 +
      }
 +
      // size: "SMART_BANNER"
 +
}
 +
</pre>
 +
参考：https://github.com/admob-plus/admob-plus/issues/76
 +
 +
====サイズ一覧====
 +
<pre>
 +
BANNER,
 +
LARGE_BANNER,
 +
MEDIUM_RECTANGLE,
 +
FULL_BANNER,
 +
LEADERBOARD,
 +
SMART_BANNER,
 +
</pre>
 +
 +
公式：https://admob-plus.github.io/docs/show-banner.html
 +
 +
こちらは、大き変わらなかった・・(20200616時点)
  
 
==インステサンプル==
 
==インステサンプル==
行170: 行202:
 
<pre>
 
<pre>
 
document.addEventListener('deviceready', () => {
 
document.addEventListener('deviceready', () => {
−
     this.checkIsLoaded().then(() => this.showAds())
+
     this.showAds()
 +
    // this.checkIsLoaded().then(() => this.showAds())
 
}, false)
 
}, false)
  
行183: 行216:
 
</pre>
 
</pre>
 
上記ca-app-pub-はadmobの公式サンプルのもの
 
上記ca-app-pub-はadmobの公式サンプルのもの
 +
 +
checkIsLoaded()を使うパターンはかなりの確率で、iosでうまくいかない場合がある。(2020/06/08現在)
  
 
==リワードサンプル==
 
==リワードサンプル==
行219: 行254:
 
</pre>
 
</pre>
  
−
==idをtestとして省略==
+
==開発モードにする==
−
idをtestとして省略することもできる
+
admob.setDevMode(true)
 +
広告の中に"test"が出ていれば成功。
 +
 
 +
==テストデバイスを指定==
 +
開発モードにするとテストデバイスになるようでその際は不要だが、開発モードにせずにテストデバイスモードにする用途で使用するのかも。
 +
 
 +
バナー
 +
<pre>
 +
admob.banner.show({
 +
    testDevices: ['1234567890ABCDEF1234567890ABCDEF']
 +
}
 +
</pre>
 +
レクタングル
 +
<pre>
 +
admob.interstitial.load({
 +
    testDevices: ['1234567890ABCDEF1234567890ABCDEF']
 +
}
 +
</pre>
 +
リワード
 +
<pre>
 +
admob.rewardVideo.load({
 +
    testDevices: ['1234567890ABCDEF1234567890ABCDEF']
 +
}
 +
</pre>
 +
 
 +
==appIdをtestにしてappIdを省略==
 +
appIdをtestとして省略してtestモードにすることができる
 
===バナー===
 
===バナー===
 
<pre>
 
<pre>
行271: 行332:
  
 
===cordova-plugin-consentが含まれないとエラーが出る場合===
 
===cordova-plugin-consentが含まれないとエラーが出る場合===
−
monaca-admobplusのandoridでアプリは、作成されたが、アプリを開いた際に、以下のようにメッセージが出る場合。GDPR（EU一般データ保護規則）のプラグインが無いので入れる。
+
monaca-admobplusのandroidでアプリは、作成されたが、アプリを開いた際に、以下のようにメッセージが出る場合。GDPR（EU一般データ保護規則）のプラグインが無いので入れる。
 
  cordova-plugin-consent
 
  cordova-plugin-consent
 
直し方
 
直し方
行369: 行430:
 
*ビルドの必要のないhtmlやjsの変更直後だと広告が出ない事がある。
 
*ビルドの必要のないhtmlやjsの変更直後だと広告が出ない事がある。
 
*一旦アプリを落として、再度開くと出る。(iosのbannerで起こった。フリークエンシーキャップがそういう挙動なのか・・・)
 
*一旦アプリを落として、再度開くと出る。(iosのbannerで起こった。フリークエンシーキャップがそういう挙動なのか・・・)
 +
 +
==AdMobメディエーション==
 +
admob-freeとなってますがadmob-plusでも使えます。
 +
 +
[[Monaca/admob/admob-free/mediation]] [ｼｮｰﾄｶｯﾄ]

2020年8月20日 (木) 11:53時点における最新版

admob-plusとは

admob-freeの後継

admob-freeとadmob-plusは同じ作者(ratsonさん)で、admob-plusでは以下が改善されてる。

  • TypeScriptで記述
  • ファーストクラスのプロミスAPI
  • Swiftを使用してiOSパーツを書き換える
  • Ionicの公式サポート
  • 豊富なドキュメント

https://admob-plus.github.io/docs/faq.html

インストール

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

上記idはadmob公式のサンプルidです。 

cordova plugin add cordova-plugin-androidx
cordova plugin add cordova-plugin-androidx-adapter

GDPR（EU一般データ保護規則）対応するために以下をインストール 

cordova plugin add cordova-plugin-consent

サンプル設定

  1. examples/basicのサンプルをプロジェクト直下にコピーし、example.admob.basicだけ設定したAppId名に変更する
  2. examples/basicのwww/index.htmlの以下部分をwww/index.htmlへ貼り付ける
cp examples/basic/www/js/index.js www/js/

www/js/index.js 

'use strict'

const app = {
  initialize() {
    document.addEventListener(
      'deviceready',
      this.onDeviceReady.bind(this),
      false,
    )
  },

  onDeviceReady() {
    this.receivedEvent('deviceready')
    this.showAds()
    // 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内に上記を追加。 

<script src="components/loader.js"></script>

がある場合はcordova.jsの読み込みは不要�。

admobが無いエラー

Uncaught ReferenceError: admob is not defined www/js/index.js:18

admob.banner.show({ // 18行目はここなので、admobがnullな様子。

monacaデバッガーでのみで、起動してるとこのようなエラーが出る。

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

  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">
</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="js/index.js"></script>
</body>
</html>

www/js/index.js 

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)

上記ca-app-pub-はadmobの公式サンプルのもの

iosは毎回アプリを閉じて開くと再生できた。

バナーサイズや位置変更

admob.banner.show({
      id: {
        android: 'ca-app-pub-3940256099942544/6300978111',
       ios: 'ca-app-pub-3940256099942544/2934735716',
      },
      position: "top", // "bottom"
      size: 
      {
          width: 320,
          height: 50
      }
      // size: "SMART_BANNER"
}

参考：https://github.com/admob-plus/admob-plus/issues/76

サイズ一覧

BANNER,
LARGE_BANNER,
MEDIUM_RECTANGLE,
FULL_BANNER,
LEADERBOARD,
SMART_BANNER,

公式：https://admob-plus.github.io/docs/show-banner.html

こちらは、大き変わらなかった・・(20200616時点)

インステサンプル

www/js/index.js 

document.addEventListener('deviceready', () => {
    this.showAds()
    // this.checkIsLoaded().then(() => this.showAds())
}, false)

showAds() {
  admob.interstitial.load({
    id: {
      // replace with your ad unit IDs
      android: 'ca-app-pub-3940256099942544/1033173712',
      ios: 'ca-app-pub-3940256099942544/4411468910',
    },
  }).then(() => admob.interstitial.show())

上記ca-app-pub-はadmobの公式サンプルのもの

checkIsLoaded()を使うパターンはかなりの確率で、iosでうまくいかない場合がある。(2020/06/08現在)

リワードサンプル

www/js/index.js 

document.addEventListener('deviceready', () => {
  showAds()
}, false)

showAds() {
  admob.rewardVideo.load({
    id: {
      // replace with your ad unit IDs
      android: 'ca-app-pub-3940256099942544/5224354917',
      ios: 'ca-app-pub-3940256099942544/1712485313',
    },
  }).then(() => admob.rewardVideo.show())
}

上記ca-app-pub-はadmobの公式サンプルのもの

リワードのisReady関数

isReadyは不安定でiosでかなりの確率で、ロードできない事があったので、使わないほうが良いかも。(2020/06/08現在) 

document.addEventListener('deviceready', () => {
  // this.showAds()
  this.checkIsLoaded().then(() => this.showAds()) 
}, false)

checkIsLoaded() {
    return admob.rewardVideo.isReady().then(result => {
      alert(result)
      return result
    })
},

開発モードにする

admob.setDevMode(true)

広告の中に"test"が出ていれば成功。

テストデバイスを指定

開発モードにするとテストデバイスになるようでその際は不要だが、開発モードにせずにテストデバイスモードにする用途で使用するのかも。

バナー 

admob.banner.show({
     testDevices: ['1234567890ABCDEF1234567890ABCDEF']
}

レクタングル 

admob.interstitial.load({
     testDevices: ['1234567890ABCDEF1234567890ABCDEF']
}

リワード 

admob.rewardVideo.load({
     testDevices: ['1234567890ABCDEF1234567890ABCDEF']
}

appIdをtestにしてappIdを省略

appIdをtestとして省略してtestモードにすることができる

バナー

admob.banner.show({ id: 'test', npa: '1' }).catch(console.log)

android再生確認。iosは毎回アプリを閉じて開くと再生できた。

インステ

admob.interstitial
      .load({ id: 'test' })
      .then(() => admob.interstitial.show())
      .catch(console.log)

android,ios再生確認。

リワード

admob.rewardVideo
      .load({ id: 'test' })
      .then(() => admob.rewardVideo.show())
      .catch(console.log)

android,ios再生確認。

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

cordova-plugin-consentが含まれないとエラーが出る場合

monaca-admobplusのandroidでアプリは、作成されたが、アプリを開いた際に、以下のようにメッセージが出る場合。GDPR（EU一般データ保護規則）のプラグインが無いので入れる。 

cordova-plugin-consent

直し方 

$ cordova plugin add cordova-plugin-consent

参考：https://admob-plus.github.io/docs/installation.html

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

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

iOSエラー

AMSBanner.swiftがThe following build commands failedというエラーが出たとき

** ARCHIVE FAILED **

The following build commands failed:
	CompileSwift normal armv7 /tmp/download/platforms/ios/admobplus/Plugins/cordova-admob-plus/AMSBanner.swift
	CompileSwift normal armv7 /tmp/download/platforms/ios/admobplus/Plugins/cordova-admob-plus/AMSInterstitial.swift
	CompileSwift normal armv7 /tmp/download/platforms/ios/admobplus/Plugins/cordova-admob-plus/AMSPlugin.swift
	CompileSwift normal armv7 /tmp/download/platforms/ios/admobplus/Plugins/cordova-admob-plus/AMSRewardVideo.swift
	CompileSwiftSources normal arm64 com.apple.xcode.tools.swift.compiler
	CompileSwift normal arm64 /tmp/download/platforms/ios/admobplus/Plugins/cordova-admob-plus/AMSBanner.swift
(6 failures)
xcodebuild: Command failed with exit code 65

plugins/cordova-admob-plus/src/ios/AMSBanner.swift の中の以下部分を修正する

修正前 

view.sendSubviewToBack(background)

修正後 

view.sendSubview(toBack: background)

一応このエラーは消えた。

参考：https://github.com/admob-plus/admob-plus/issues/96

PhaseScriptExecutionエラーが出るとき

PhaseScriptExecution [CP]\ Copy\ Pods\ Resources /Users/builder/Library/Developer/Xcode/DerivedData/admobplus-azmnuofsrizxppbftnepxjnvvpwj/Build/Intermediates.noindex/ArchiveIntermediates/admobplus/IntermediateBuildFilesPath/admobplus.build/Debug-iphoneos/admobplus.build/Script-A588BB76815524C1F3DFDB5F.sh
(1 failure)
error: Resource "/Users/builder/Library/Developer/Xcode/DerivedData/admobplus-azmnuofsrizxppbftnepxjnvvpwj/Build/Intermediates.noindex/ArchiveIntermediates/admobplus/BuildProductsPath/Debug-iphoneos/PersonalizedAdConsent/PersonalizedAdConsent.bundle" not found. Run 'pod install' to update the copy resources script.

以下を実行 

cordova plugin add cordova-plugin-firebasex@8.0.1

したけど、以下依存エラーになったので、だめかも。 

Version of installed plugin: "cordova-plugin-androidx@2.0.0" does not satisfy dependency plugin requirement "cordova-plugin-androidx@^1.0.2". Try --force to use installed plugin as dependency.

参考：https://github.com/dpa99c/cordova-plugin-firebasex/issues/326

結論：これ出たら最初からやり直してみる、androidx側のプラグインを入れずに、やるとでなくなった。(android側も確認してくとまずいかもだけど・・）

最終結論：cordova plugin rm cordova-plugin-consent でプラグインを消すとよい。

iOSでビルドがどうしてもできなかったとき

ビルドできた手順

  1. https://github.com/admob-plus/admob-plus のzipをimport
  2. cordova plugin add cordova-admob-plus --variable APP_ID_ANDROID=ca-app-pub-3940256099942544~3347511713 --variable APP_ID_IOS=ca-app-pub-3940256099942544~1458002511
  3. plugins/cordova-admob-plus/src/ios/AMSBanner.swiftの "view.sendSubviewToBack(background)"部分を "view.sendSubview(toBack: background)"に書き換える
  4. これでiOSアプリをビルドする(以降ビルドは不要で、htmlやjsの変更はビルドしなくてもデバッグ時は適用される)
  5. cp examples/basic/www/js/index.js www/js/ をコピーしてくる。
  6. 上記www/index.htmlをコピーしてくる。

バナー、インステ、リワードともに再生できた。

この後、androidx入れてiosビルドしても、iosビルドに失敗しなかった。 

cordova plugin add cordova-plugin-androidx
cordova plugin add cordova-plugin-androidx-adapter

以下を入れると・・・ 

cordova plugin add cordova-plugin-consent

以下エラーとなった・・。 

The following build commands failed:
	PhaseScriptExecution [CP]\ Copy\ Pods\ Resources /Users/builder/Library/Developer/Xcode/DerivedData/admobplus-azmnuofsrizxppbftnepxjnvvpwj/Build/Intermediates.noindex/ArchiveIntermediates/admobplus/IntermediateBuildFilesPath/admobplus.build/Debug- iphoneos/admobplus.build/Script-F5A83C26125D7FDCAA9D8A14.sh
(1 failure)
xcodebuild: Command failed with exit code 65

以下 コマンドで cordova-plugin-consentを削除すると上記ビルド時のエラーが消えた。（管理画面でcordova-plugin-consentを消してもだめでした） 

cordova plugin rm cordova-plugin-consent

AppId変更

package.jsonのadmobの部分を変更 

    "cordova": {
        "plugins": {
            "cordova-custom-config": {},
            "cordova-admob-plus": {
                "APP_ID_ANDROID": "ca-app-pub-3940256099942544~3347511713",
                "APP_ID_IOS": "ca-app-pub-3940256099942544~1458002511"
            },
            "cordova-plugin-androidx": {},
            "cordova-plugin-androidx-adapter": {}
        }
    },

iosでjs変更後広告が出ないことがある

  • ビルドの必要のないhtmlやjsの変更直後だと広告が出ない事がある。
  • 一旦アプリを落として、再度開くと出る。(iosのbannerで起こった。フリークエンシーキャップがそういう挙動なのか・・・)

AdMobメディエーション

admob-freeとなってますがadmob-plusでも使えます。

Monaca/admob/admob-free/mediation [ｼｮｰﾄｶｯﾄ]

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