【Cordova】cordova-plugin-admob-freeプラグインのバナー広告の高さを取得する(Android)

cordova-plugin-admob-freeプラグインのバナー広告の表示で、overlapをtrueにすると、アプリの画面下部がバナー広告で隠れてしまいます。
バナー広告の高さを取得できれば、アプリの画面の高さを調整することで回避することができます。
iOSの場合、admob.banner.events.LOADイベントでbannerHeightを取得することができますが、Androidは未対応のようです。

今回は、cordova-plugin-admob-freeプラグインを改造して、Androidでバナー広告の高さを取得したいと思います。

GitHub

GitHub - ratson/cordova-plugin-admob-free: New development has been moved to ...

https://github.com/ratson/cordova-plugin-admob-free

New development has been moved to "admob-plus-cordova", https://github.com/admob-plus/admob-plus/tree/master/packages/cordova - GitHub - ratson/cordova-plugin-admob-free: New development ...

GitHubよりcordova-plugin-admob-free-master.zipをダウンロードして解凍・展開し、以下のファイルにコードを追加します。

BannerListener.java

admob.banner.events.LOADイベントでバナー広告の幅adWidthと高さadHeightが取得できるようにします。

    @Override
    public void onAdLoaded() {
        Log.w("AdMob", "BannerAdLoaded");
        if (executor.shouldAutoShow() && !executor.bannerVisible) {
            executor.showAd(true, null);
        }
        JSONObject data = new JSONObject();
        try {
            data.put("adWidth", executor.getAdWidth());
            data.put("adHeight", executor.getAdHeight());
        } catch (JSONException e) {
            e.printStackTrace();
        }
        executor.fireAdEvent("admob.banner.events.LOAD", data);
        executor.fireAdEvent("onReceiveAd", data);
    }

@Override

public void onAdLoaded() {

Log.w("AdMob", "BannerAdLoaded");

if (executor.shouldAutoShow() && !executor.bannerVisible) {

executor.showAd(true, null);

}

JSONObject data = new JSONObject();

try {

data.put("adWidth", executor.getAdWidth());

data.put("adHeight", executor.getAdHeight());

} catch (JSONException e) {

e.printStackTrace();

}

executor.fireAdEvent("admob.banner.events.LOAD", data);

executor.fireAdEvent("onReceiveAd", data);

}

BannerExecutor.java

AdSizeのgetWidthInPixels()・getHeightInPixels()より、バナー広告の幅と高さを取得します。

Google Developers

AdSize | Google Play services | Google Developers

https://developers.google.com/android/reference/com/google/android/gms/ads/AdSize.html

    @Override
    public String getAdType() {
        return "banner";
    }
    public int getAdWidth() {
        int w = plugin.config.adSize.getWidthInPixels(adView.getContext());
        return w;
    }
    public int getAdHeight() {
        int h = plugin.config.adSize.getHeightInPixels(adView.getContext());
        return h;
    }

@Override

public String getAdType() {

return "banner";

}

public int getAdWidth() {

int w = plugin.config.adSize.getWidthInPixels(adView.getContext());

return w;

}

public int getAdHeight() {

int h = plugin.config.adSize.getHeightInPixels(adView.getContext());

return h;

}

プラグインのインストールについては、「【Monaca】cordova-plugin-admob-freeを使用してAdmob広告を表示する」を参考にしてください。

ITK dev

【Monaca】cordova-plugin-admob-freeを使用してAdmob広告を表示する - ITK dev

https://itkdev.hatenablog.com/entry/2018/08/14/145552

この記事の概要 cordova-admob-proを安易に使用してしまうのは罠！！ cordova-plugin-admob-freeを使いましょう cordova-plugin-admob-freeの導入手順 1. クローン等でcordova-plugin-admob-freeのソースを取得 2. npm install 3. npm run build 4. node_module を除いて、zipファイルを作成 5. Cordovaプラグインとして、作成したzipファイルをインポート 6. 導入先のプロジェクトでコーディングまとめこの記事の概要 Monaca(Cordova)でAdm…

最後にアプリ側(JavaScript)です。

admob.banner.events.LOADイベントでバナー広告の幅adWidthと高さadHeightを取得します。
adWidth／画面の幅で密度を求めます。
adWidth／密度でアプリ上の幅、adHeight／密度でアプリ上の高さを求めます。
※idには、実際の広告ユニットIDを設定してください。

"use strict";
ons.ready(function () {
  document.addEventListener("admob.banner.events.LOAD", loadAdmobBanner, false);
  document.addEventListener("admob.banner.events.LOAD_FAIL", failAdmobBanner, false);
  admob.banner.config({
    id: "ca-app-pub-0000000000000000/0000000000",
    isTesting: true,
    autoShow: true,
    bannerAtTop: false,
    overlap: false,
    offsetTopBar: false,
    size: admob.AD_SIZE.SMART_BANNER
  });
  admob.banner.prepare().then(function () {
    console.log("prepared admob banner");
  }).catch(function () {
    console.log("failed admob banner");
  });
});
// admob event
function loadAdmobBanner(e) {
  var density = e.adWidth / window.innerWidth;
  var w = Math.round(e.adWidth / density);
  var h = Math.round(e.adHeight / density);
  console.log("successful load admob banner width:" + w.toString() + " height:" + h.toString() + " density:" + density.toString());
}
function failAdmobBanner(e) {
  console.log("failed load admob banner");
}

"use strict";

ons.ready(function () {

document.addEventListener("admob.banner.events.LOAD", loadAdmobBanner, false);

document.addEventListener("admob.banner.events.LOAD_FAIL", failAdmobBanner, false);

admob.banner.config({

id: "ca-app-pub-0000000000000000/0000000000",

isTesting: true,

autoShow: true,

bannerAtTop: false,

overlap: false,

offsetTopBar: false,

size: admob.AD_SIZE.SMART_BANNER

});

admob.banner.prepare().then(function () {

console.log("prepared admob banner");

}).catch(function () {

console.log("failed admob banner");

});

// admob event

function loadAdmobBanner(e) {

var density = e.adWidth / window.innerWidth;

var w = Math.round(e.adWidth / density);

var h = Math.round(e.adHeight / density);

console.log("successful load admob banner width:" + w.toString() + " height:" + h.toString() + " density:" + density.toString());

}

function failAdmobBanner(e) {

console.log("failed load admob banner");

}

au SHV40
width:360 height:50 density:3

docomo SC-02M
width:360 height:50 density:2

docomo SO-01H
width:360 height:50 density:3

Amazon Fire7(2017)
width:600 height:90 density:1

月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

【Cordova】cordova-plugin-admob-freeプラグインのバナー広告の高さを取得する(Android)

【Monaca】D3.jsを使用してドル円の日足チャートに指数平滑移動平均線を表示する

【Monaca】画面上にCODE128のバーコードを表示する

【Cordova】cordova-plugin-admob-freeプラグインのバナー広告の高さを取得する(Android)

Recommended Posts

【Cordova】App Storeの審査が通りませんでした・・・

【Cordova】admob-plusプラグインにおいて広告が表示されない場合の対処方法

【Cordova】cordova-plugin-local-notificationプラグインの通知clickイベントが発火しない場合の対処方法