【Cordova】AdMob Pro(広告)のインストール・使い方

CordovaでAdMob Pro(広告)をインストールして使う方法について紹介します。

## AdMob登録の流れ

AdMobの登録を行います。

②AdMobのトップページを開きます。

③「新しいアプリを収益化」をクリックします。

④アプリの状況によって以下の操作を行います。

状況 操作
アプリ公開済の場合 キーワードを入力してアプリを検索します。
アプリ未公開の場合 「アプリを手動で追加」でアプリ名を入力しプラットフォーム」は「Android」を選択して「アプリを追加」をクリックします。

⑤「バナー」もしくは「インタースティンシャル」を選択します。(広告タイプなどを設定)

⑥「保存」をクリックします。

⑦「完了」をクリックします。

⑧下記のような広告ユニットのIDをコピーします。

ca-app-pub-xxxxxxxxxxxxxxx/xxxxxxxxxx

⑨コマンドプロンプトを開きます。

⑩プロジェクトフォルダに移動します。

⑪以下のコマンドを入力し、Enterキーを押します。(AdMobプラグインをDL)

cordova plugin add cordova-plugin-admobpro

⑫プロジェクト名\www\jsフォルダにあるJSファイル(index.jsなど)を開きます。

⑬以下のコード(広告表示用)を追加します。

/*** これ以上は省略 ***/
    onDeviceReady: function() {
        this.receivedEvent('deviceready');

    onDeviceReady: function() {
        app.receivedEvent('deviceready');

        //Admobの広告バナー表示コード
        AdMob.createBanner({
          adId:'ca-app-pub-xxxxxxxxxxxxxxx/xxxxxxxxxx',
          position:AdMob.AD_POSITION.BOTTOM_CENTER,
          overlap: true,
          autoShow:true
        });

    },

    },

※広告ユニットIDの部分に先程コピーしたIDをいれます。

リリース前の動作テストをする場合は、下記のサンプル広告コードを利用します。

// Admobサンプル広告バナーコード
AdMob.createBanner({
 adId:'ca-app-pub-3940256099942544/6300978111',
 position:AdMob.AD_POSITION.BOTTOM_CENTER,
 overlap: true,
 autoShow:true
});

⑭これで広告が表示されます。

⑮あと再度アプリをapkに変換し、GooglePlayにアップロードします。

関連記事
【Cordova入門】Android向けハイブリッドアプリ開発
Javascript入門 サンプル集
Java入門
Node.js入門
プログラミング
スポンサーリンク

コメント