【Cordova】AdMob Free版のインストール・使い方

Cordovaで「AdMob Free版」のプラグインをインストールして使う方法について紹介します。

## AdMob登録の流れ

AdMobの登録を行います。

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

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

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

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

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

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

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

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

ca-app-pub-xxxxxxxxxxxxxxx/xxxxxxxxxx

補足

Admob Proから以降する場合、以下のコマンドでProを先に削除しておきます。

cordova plugin rm cordova-plugin-admobpro

## AdMob Free版のインストール

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

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

③以下のコマンドを順に実行してプラグインを追加します。

cordova plugin add cordova-promise-polyfill
cordova plugin add cordova-admob-sdk
cordova plugin add cordova-plugin-admob-free

補足1

※「cordova plugin add cordova-plugin-admob-free」を実行した場合に
エラーメッセージ「Error: Variable(s) missing: ADMOB_APP_ID」が出た場合は以下のコマンドを試してみてください。

cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="<YOUR_ADMOB_APP_ID_AS_FOUND_IN_ADMOB>"

補足2

以下のエラーが出た場合

Error: Version of installed plugin: "cordova-admob-sdk@0.21.0" does not satisfy dependency plugin requirement "cordova-admob-sdk@~0.20.0". Try --force to use installed plugin as dependency.

ここからv2.0.0のSDKをダウンロードします。

②ダウンロードしたzipファイルをプロジェクト直下に解凍します。

③以下のコマンドでSDKをインストールします。

cordova plugin add cordova-admob-sdk-v0.20.0

④以下のコマンドでadmob freeをインストールします。

cordova plugin add cordova-plugin-admob-free@0.20.0

## AdMob Free版の使い方

①index.jsのonDeviceReady関数内に以下のコードを記述します。

    onDeviceReady: function() {
        this.receivedEvent('deviceready');
        // 挿入するコードここから
        admob.banner.config({
            id: 'ca-app-pub-xxxxxxxxxxxxxxx/xxxxxxxxxx',
            isTesting: false, // trueにするとテスト広告を表示
            autoShow: true,
        });
        admob.banner.prepare();
        // 挿入するコードここまで
    },

②「ca-app-pub-xxxxxxxxxxxxxxx/xxxxxxxxxx」にコピーした広告ユニットIDを貼り付けます。

関連記事
1 【Cordova入門】Android向けハイブリッドアプリ開発
2 Javascript入門 サンプル集
3 Java入門
4 Node.js入門

コメント