アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

Monacaアプリに広告SDKを入れてみよう(mMedia編)

前回のAdMobに続いて今回はmMediaを使ってみたいと思います。こちらは公式に提供されている訳ではありませんが、コミュニティベースでmMedia用のプラグインが作られています。



プラグインのインストール



プラグインをインストールするので、floatinghotpot/cordova-plugin-mmediaのサイトからZipファイルとしてダウンロードします。そして、そのZipファイルをMonaca IDEの設定メニュー>Cordovaプラグインの管理からアップロードします。







mMediaのユーザ登録と広告作成



mMediaのユーザ登録はとても簡単にできます。そして、それが終わったらアプリを作成します。





アプリを作成した後は、広告枠の設定を行います。用意されているのはバナーとインターティシャル広告になります。IDが生成されますので、それをコピーします。



Monacaアプリの修正



JavaScriptから呼び出す部分は次のようになります。





var ad_units = {
    ios : {
        banner : "217477",
        interstitial : "217478"
    },
    android : {
        banner : "177367",
        interstitial : "177369"
    }
};

var adid = ( /(android)/i.test(navigator.userAgent) ) ? ad_units.android : ad_units.ios;

if(mMedia) mMedia.createBanner({adId:adid.banner, autoShow:true});


バナー(banner)とインターティシャル(interstitial)のIDをそれぞれ入力してください。AndroidiOSで出し分けされるのでそれぞれ用意します。後はバナーを表示する場合には mMedia.createBanner を実行すればOKです。



アプリのビルド



プラグインを使っていますので、試すのは実機のみになります。そのためビルドして確認するようにしてください。以下はプラグイン配布サイトからのスクリーンショットです。iPhone/iPad/Androidに対応しています。








アプリの収益化を考える上で広告の表示は大事な選択肢になるはずです。特にグローバルにアプリを提供する際には海外のパブリッシャーを選択する必要があるのではないでしょうか。ぜひお試しください。



floatinghotpot/cordova-plugin-mmedia

Monacaアプリの広告SDKを入れてみよう(AdMob編)

アプリから収益をあげる手段として広告は今なお有力な選択肢です。しかし昨今のAppleによるリジェクト騒動があったりと、広告SDKを巡る動きはとても早く、追従していくのが大変ではないかと思います。



そこで公式なサポートは難しいのですが、執筆時点での情報としてMonacaアプリへの広告SDKの組み込みについて紹介したいと思います。まずは最も有名と思われる広告プラットフォーム、AdMobの使い方です。



利用はプラグイン利用



AdMobはAdMob Plugin Proというサードパーティープラグインを使うのが良いようです。そのためMonacaではゴールドプラン以上の利用が必須になります。



設定メニューからCordovaプラグインの管理を選択して、cordova-admob-proをインストールします。





AdMobでAd unit IDを取得



Google AdMobへ行き、iOS/AndroidそれぞれAd unit IDを取得します。載せ方はBanner、Interstitialが選択できます。Interstitialのがよりリッチで高額とのことですが、あまり多用するとアプリ利用者に嫌われる傾向があります。そのためアプリの画面切り替え、読み込み時の画面などで使われます。





JavaScriptコードの修正



使い方は次のようになります。各プラットフォームごとにAd unit IDを切り替えて設定する必要があります。






var onDeviceReady = function() {
    // select the right Ad Id according to platform
    var admobid = {};
    if( /(android)/i.test(navigator.userAgent) ) { // for android  & amazon-fireos
        admobid = {
            banner: 'ca-app-pub-xxxxxxxxxxxx/yyyyyyyyy', // or DFP format "/6253334/dfp_example_ad"
            interstitial: 'ca-app-pub-xxx/yyy'
        };
    } else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) { // for ios
        admobid = {
            banner: 'ca-app-pub-xxxxxxxxxxxx/yyyyyyyyy', // or DFP format "/6253334/dfp_example_ad"
            interstitial: 'ca-app-pub-xxx/kkk'
        };
    } else { // for windows phone
        admobid = {
            banner: 'ca-app-pub-xxx/zzz', // or DFP format "/6253334/dfp_example_ad"
            interstitial: 'ca-app-pub-xxx/kkk'
        };
    }
    if(AdMob) AdMob.createBanner( {
        adId: admobid.banner, 
        position: AdMob.AD_POSITION.TOP_CENTER, 
        autoShow: true } );
};
document.addEventListener("deviceready", onDeviceReady, false);


後はバナーであれば AdMob.createBanner を実行します。interstitialの場合は次のようになります。





if(AdMob) AdMob.prepareInterstitial( {adId:admobid.interstitial, autoShow:false} );


アプリをビルドする





独自のプラグインを使っていますので、アプリストア配布のMonacaデバッガーではデバッグできません。デバッグビルドなど、ビルドした上でアプリを実機にインストールして確認してください。






プラグインサードパーティー製という点が若干不安の残る点ではありますが、開発は活発に行われているようなので今後のバージョンアップにも追従してくれると思われます。



また、AdMobはGoogleが運営しているとあって規約上の問題になるようなことはしないと思われますので、他のプラットフォームに比べると安心して利用できるのではないでしょうか。