タグ: Cordova

Cordova AdMob Freeプラグインで広告を表示

はじめに

最近知ったのですが、以前記事にしたCordova AdMobプラグインcordova-admob-proにはちょっとした問題があるようです。プラグイン作成者は無料で利用する場合は2%のユーザートラフィックを共有させてもらうだけで大丈夫ですと公表しているのですが、ユーザーが調べたところ30%共有されていたケースがあったそうです。（ユーザーに入る広告費が30%減るということみたいです）

cordova-plugin-admobpro issues #354

そこでRatsonさんが完全無料のAdMobプラグインcordova-plugin-admob-freeを開発しました（開発へ至るまでの経緯はこちら）。

Ratsonさんはcordova-plugin-admob-freeプラグインの後継となるadmob-plusプラグインも開発中です。

環境

参考にした情報

実装手順

MonacaのOnsen UI + VueプロジェクトでAdMob Freeプラグインを利用します。本内容はteratailで解説されていますので詳細についてはそちらをご参照ください。

１．AdMob SDKプラグインをダウンロード

https://gitlab.com/ratson/cordova-admob-sdk からzipファイルをダウンロードします。

２．AdMob SDKプラグインをインポート

Cordovaプラグインの設定画面からさきほどダウンロードしたzipファイル（cordova-admob-sdk-master.zip）を選択してAdMob SDKプラグインをインポートします。

３．AdMob Freeプラグインをインポート

Cordovaプラグインの設定画面からパッケージ名を入力してAdMob Freeプラグインをインポートします。

パッケージ名/URL :cordova-plugin-admob-free@0.27.0

４． ADMOB_APP_ID の設定

AdMob FreeプラグインのインストールパラメータにAdMobのアプリIDを設定します。

インストールパラメータ :ADMOB_APP_ID=ca-app-pub-1234567890…

以上でプラグインの設定は完了です。

５．サンプルコード

AdMob Freeプラグインのexamplesを参考にしています。

App.Vue
<template>
    <v-ons-page>
      <v-ons-toolbar>
        <div class="center">{{ title }}</div>
        <div class="right">
          <v-ons-toolbar-button>
            <v-ons-icon icon="ion-navicon, material: md-menu"></v-ons-icon>
          </v-ons-toolbar-button>
        </div>
      </v-ons-toolbar>
      <div style="text-align: center; padding-top:10px">Hello World!</div>
      <p style="text-align: center">
        <v-ons-button @click="banner">Banner</v-ons-button>
        <v-ons-button @click="interstitial">Interstitial</v-ons-button>
      </p>
    </v-ons-page>
</template>
<script>
  export default{
    data() {
      return {
        title: 'My app'
      };
    },
    beforeCreate () {
      this.$ons.ready(function() {
        var admobid = {
          banner: 'ca-app-pub-3940256099942544/6300978111',
          interstitial: 'ca-app-pub-3940256099942544/1033173712'
        }
        // Banner
        admob.banner.config({
          id: admobid.banner,
          isTesting: true,
          autoShow: false,
        })
        admob.banner.prepare()
          .then (() => {
            console.log('banner prepare success!')
          })
          .catch (err => {
            console.log('banner prepare error!', err)
          })

        // Interstitial
        admob.interstitial.config({
          id: admobid.interstitial,
          isTesting: true,
          autoShow: false,
        })
        admob.interstitial.prepare()
          .then (() => {
            console.log('interstitial prepare success!')
          })
          .catch (err => {
            console.log('interstitial prepare error!', err)
          })

      })  // ons.ready

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

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

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

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

        admob.interstitial.prepare()
      })
    },
    methods: {
      banner () {
        admob.banner.show()
      },
      interstitial () {
        admob.interstitial.show()
      }
    }
  }
</script>

６．AdMob広告の表示確認

プロジェクトをデバッグビルドしAndroid端末にインストールして確認しました。

バナー広告

インタースティシャル広告

テスト広告について

Google AdMobのガイドには次のように記載されています。

アプリの開発やテストでは実際の広告を使用せず、必ずテスト広告を使ってください。実際の広告でテストすると、アカウントが停止される場合があります。

https://developers.google.com/admob/android/banner?hl=ja

GoogleはAdMobアカウントと関連付けられていないテスト用の広告ユニットを提供しています。以下のリンク先に記載しているサンプル広告ユニットIDを自由に利用することができます。

テスト広告 – Google AdMob > Mobile Ads SDK（Android）

広告フォーマットサンプル広告ユニット ID
バナーca-app-pub-3940256099942544/6300978111
インタースティシャルca-app-pub-3940256099942544/1033173712
インタースティシャル動画ca-app-pub-3940256099942544/8691691433
動画リワードca-app-pub-3940256099942544/5224354917
ネイティブ アドバンスca-app-pub-3940256099942544/2247696110
ネイティブ アドバンス動画ca-app-pub-3940256099942544/1044960115

特記事項（2019/9/8追記）

当時の私のケースになりますが、アプリのリリース直前にisTestingをfalseにして最終確認を行ったところ、広告が表示されませんでした。原因が分からず不安だったのですが、いったんGoogle Play Consoleでベータ版としてリリースし動作確認したところ、広告が表示されました。製品版としてリリースしたアプリでも表示されました。本番用の広告を表示するためにはGoogle Playストアを介す必要があるのかもしれません。ご参考まで。

Cordova AdMobプラグインで広告を表示

AdMobプラグインを使用するとGoogle AdMobの提供する広告配信サービスを利用してモバイルアプリに広告を表示することができます。

floatinghotpot/cordova-admob-pro

バナー広告

AdMob.createBanner({
  adId: 'ca-app-pub-0123456789012345/0123456789',
  position: AdMob.AD_POSITION.BOTTOM_CENTER,
//debug
//  isTesting: true,
  overlap: true,
  autoShow: true,
  adSize: 'SMART_BANNER'
});

バナー広告（AD_POSITION.POS_XY）

var elt = document.getElementById("med_page");
var rect = elt.getBoundingClientRect();
var y = (rect.bottom - rect.top) + window.pageYOffset;  // タブバーを含まない画面の高さ

y *= parseFloat(document.body.style.zoom);  // 元の画面サイズ（CSSピクセル、dp単位）に戻す
if (window.screen.height > 720) {  // スマートバナーの高さを引く
  y -= 90;
} else if (window.screen.height > 400){
  y -= 50;
} else {
  y -= 32;
}
y *= window.devicePixelRatio;  // CSSピクセル（dp）からデバイスピクセルに変換する

AdMob.createBanner({
  adId: 'ca-app-pub-0123456789012345/0123456789',
  position: AdMob.AD_POSITION.POS_XY,
  x: 0,
  y: y,
//debug
//  isTesting: true,
  overlap: true,
  autoShow: true,
  adSize: 'SMART_BANNER'
});

インタースティシャル広告

var elem = document.getElementById("myNavigator");
elem.addEventListener("postpop", function(e) {
  if (e.leavePage.id === "graph_page") {  // グラフ画面からポップした後
    showInterstitialPolling(10);
  }
});
elem.addEventListener("postpush", function(e) {
  if (e.enterPage.id === "graph_page") {  // グラフ画面へプッシュした後
    if (window.AdMob) {
      init_ad();
    }
  }
});

function showInterstitialPolling(count) {
  if (--count < 0) return;
  if (window.AdMob) {
    AdMob.isInterstitialReady(function(isready) {
      if (isready) {
        AdMob.showInterstitial();
      } else {
        setTimeout(function() {showInterstitialPolling(count)}, 200);
      }
    });
  }
}
function init_ad() {
  if (window.AdMob) {
    AdMob.prepareInterstitial({
      adId: 'ca-app-pub-0123456789012345/0123456789',
//debug
//      isTesting: true,
      autoShow: false
    });
  }
}

Note

adIdプロパティにはアプリIDではなく広告ユニットIDを設定します（数字の区切りに「~」ではなく「/」を使用している方です）。

Cordova PowerManagementプラグインでCPUをスリープさせない

PowerManagementプラグインを使用するとモバイル端末の電源の状態を制御することができます。たとえば、動画や音楽アプリでスクリーンをオンのまま維持したり、目覚ましアプリでスクリーンがオフになってもCPUを稼働させ続けるといった使い方ができます。

ここでは２つのプラグインをご紹介します。

１．cordova-plugin-powermanagementプラグイン

Viras 氏のプラグインは SCREEN_DIM_WAKE_LOCK、boltex 氏のプラグインは PARTIAL_WAKE_LOCK を設定します。目覚ましアプリのようにタイマーを動かし続けたい場合は PARTIAL_WAKE_LOCK の boltex 氏のプラグインを使うことになります。

window.powerManagement.dim(function() {
  console.log('Wakelock acquired');
}, function() {
  console.log('Failed to acquire wakelock');
});

window.powerManagement.release(function() {
  console.log('Wakelock released');
}, function() {
  console.log('Failed to release wakelock');
});

２．cordova-plugin-chrome-apps-powerプラグイン

こちらのプラグインは PARTIAL_WAKE_LOCK を設定します。自作の瞑想アプリ Meditation Note で利用させて頂いています。

// 瞑想開始ボタンを押したとき
chrome.power.requestKeepAwake("system")

// 瞑想が終了したとき、または停止ボタンを押したとき
chrome.power.releaseKeepAwake()