その3 Cordovaプラグインの追加【Admob】と動作確認（広告表示確認） - 試行錯誤編2 -【Cordova・Monaca】MonacaのプロジェクトをCordovaのローカルプロジェクトに移行して、Admob導入【Admob・plugin】 PART3

f:id:duo-taro100:20160218004611p:plain

その3 Cordovaプラグインの追加【Admob】と動作確認（広告表示確認） - 試行錯誤編2 -

今回の記事で、Admobの実装までが完了した。
次回の記事で、今までの内容をまとめる。

以下の内容は、エラー解決のための試行錯誤。

前回の続き。

www.sky-limit-future.com

エラーもないのに表示されないのは、サンプルのデータが悪いのでは？と思った。

(参考)
designsupply-web.com

こちらに、リリース前の動作テストに使用する広告コードが記載されていたので、そのまま拝借。
admob.jsを以下のように変更

・admob.js

/** テスト段階では不要だが、残しておく START */
var admobid = {};
if( /(android)/i.test(navigator.userAgent) ) {
    admobid = { // for Android
        banner: 'ca-app-pub-6869992474017983/9375997553',
        interstitial: 'ca-app-pub-6869992474017983/1657046752'
    };
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
    admobid = { // for iOS
        banner: 'ca-app-pub-6869992474017983/4806197152',
        interstitial: 'ca-app-pub-6869992474017983/7563979554'
    };
} else {
    admobid = { // for Windows Phone
        banner: 'ca-app-pub-6869992474017983/8878394753',
        interstitial: 'ca-app-pub-6869992474017983/1355127956'
    };
}
/** テスト段階では不要だが、残しておく END */

function initApp() {
    // サンプル用コードに変更  NEW!!!!!!!!!
    if (AdMob) {
        AdMob.createBanner({
            adId:'ca-app-pub-3940256099942544/6300978111',
            position:AdMob.AD_POSITION.BOTTOM_CENTER,
            overlap: true,
            autoShow:true
           });
    }
}

document.addEventListener('deviceready', initApp, false);

できた！
広告が表示された。

と思ったら、今度はtabbarが非表示。。。

f:id:duo-taro100:20170829230400p:plain

admob.jsのcreateBannerのoptionにoverlapというものがあるが、これをfalseにすればtabbarも表示された。

・admob.js

/** テスト段階では不要だが、残しておく START */
var admobid = {};
if( /(android)/i.test(navigator.userAgent) ) {
    admobid = { // for Android
        banner: 'ca-app-pub-6869992474017983/9375997553',
        interstitial: 'ca-app-pub-6869992474017983/1657046752'
    };
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
    admobid = { // for iOS
        banner: 'ca-app-pub-6869992474017983/4806197152',
        interstitial: 'ca-app-pub-6869992474017983/7563979554'
    };
} else {
    admobid = { // for Windows Phone
        banner: 'ca-app-pub-6869992474017983/8878394753',
        interstitial: 'ca-app-pub-6869992474017983/1355127956'
    };
}
/** テスト段階では不要だが、残しておく END */

function initApp() {
    // サンプル用コードに変更
    if (AdMob) {
        AdMob.createBanner({
            adId:'ca-app-pub-3940256099942544/6300978111',
            position:AdMob.AD_POSITION.BOTTOM_CENTER,
            overlap: false, // falseに変更 NEW!!!!!!!
            autoShow:true
           });
    }
}

document.addEventListener('deviceready', initApp, false);

f:id:duo-taro100:20170829230426p:plain
ただし、tabbarの下に表示されてしまう。tabbarの上に表示しようと考えていたが、どうやら今回の場合は難しいらしい。

(参考)
github.com

Please be aware that, all your content is displayed in a native webview, while ad banner is another native view. They cannot be displayed inside one another.

考えてみてくれ。君のコンテンツはある一つのWEBビュー上に表示されている。
一方で、広告バナーは他のWEBビュー上に表示されている。
互いにお互いのWEBビューに割り込むことはできないだろう？

となると、広告の配置だけ考えて終了となりそう。
広告をクリックするときちんと遷移もするので大丈夫だろう。
（※本番用のコードで実装している場合、それをテスト段階でクリックするのは規約違反になる可能性があるので注意）

以下の記事を参考に、どこにするか決めたいと思う。
ここは迷い中。

www.appbank.net

ちなみに、Cordovaプロジェクト作成時にindex.htmlに記載のある以下の要素がないと、広告が表示されないという情報もあったが、僕の場合はなくても表示された。

<!-- 必要なかった -->
<div class="app" style="display:hidden">
    <h1>Apache Cordova</h1>
    <div id="deviceready" class="blink">
      <p class="event listening">Connecting too Device</p>
    <p class="event received">Device is Ready</p>
  </div>
</div>