個人で稼ぐアプリビジネス入門

monacaでAdmobのリワード広告を実装する手順まとめ(プロジェクトソース付)

例年どおり年末年始は、Admobの広告が好調でよかったです。
今年もこの時期に最高収益を出せたという声をいくつも頂きました。

Admob広告で代表的なものは、バナー広告とインターステイシャル広告(全画面広告)ですね。導入も簡単だし、サンプルコードも多いのであまり迷うところもありません。

この2個に関してはmonacaのドキュメントを見ればいいでしょう。
https://docs.monaca.io/ja/sampleapp/samples/admob/

問題はリワード広告の実装です。

リワード広告は普通の広告と違って、広告を見てくれた人に何かリワード(報酬)となる対価を上げる必要があります。

アプリによって表示タイミングも報酬も異なってくるので、アプリに応じた処理を決めていかないといけませんから、コピペだけで実装という訳にもいかず少しハードルが高いです。

今回はmonacaで提供しているアプリテンプレートの「開運おみくじ」にリワード広告を導入して手順をご紹介します。

ソースごとダウンロードできるようにしてあるので、是非参考にしてください。

※ Admobのリワード広告を導入するにはmonacaの利用プランがproプラン(月額2000円)の必要があります。freeプランを使っている人はproプランにアップグレードしてからお試しください。一応14日間の無料期間もあります。

おみくじアプリプロジェクトを作成

まずはベースとなるおみくじアプリを作成しましょう。
おみくじアプリはサンプルアプリケーションの中にあります。

空行含めて全66行の超シンプルなコードになっています。

リワード広告の導入にあたって「何をリワード(報酬)にするか」を考えないといけません。とりあえずmonacaの開運おみくじをプレイしてみます。

これが起動画面。

はじめるボタンしかない何ともシンプルなインターフェースです。

ボタンを押すと演出も何もなく結果発表。ボタンが「やりなおす」ボタンに変わっているのでもう一回クリック。

今度は大吉。「やりなおす」ボタンを押すことで何度でもやり直せるようになっています。

今回はこの「はじめる」、「やりなおす」の挙動を変更して、リワード広告を見たらおみくじが引けるように改良してみましょう。

必要なcordovaプラグイン

monacaでadmobを導入するならメジャーな選択肢はcordova-plugin-admob-proかcordova-plugin-admob-freeのどちらかのcordovaプラグインみたいだけど後者を使います。

proの方は広告費が少し天引きされてしまうみたい。(未検証)

cordova-plugin-admob-freeで必要な機能は実装できるのでこっちでOKです。

ちなみにcordovaプラグインというのはweb言語(HTMLとかjavascriptとか)でスマホの機能を操作できるようにしてくれるもの。

cordova-plugin-admob-freeを使うにはcordova-admob-sdkというプラグインも必要になるのでこの2つのプラグインを入れます。

プラグインのバージョンによって導入方法が若干変わるので、それぞれ2020年1月10日時点での最新バージョンでやります。

monacaIDEの「設定」メニューから「cordovaプラグインの管理」を開いて、インポートボタンをクリック。

まずはcordova-admob-sdkをインポートします。バージョンは0.24.1
パッケージ名の入力欄に

 cordova-admob-sdk@0.24.1

と入力してOKをクリック

同様にcordova-plugin-admob-freeもインポートします。バージョンは0.27.0

cordova-plugin-admob-free@0.27.0

を入力してOKをクリック。

インストールパラメータの設定

cordova-plugin-admob-freeプラグインはインストールパラメータにアプリIDを設定しないと動きません。

アプリIDはAdMobの管理画面で見れる以下のやつです。

プラグイン一覧からcordova-plugin-admob-freeを選んで設定メニューから以下のように指定します。

ADMOB_APP_ID=ca-app-pub-5032991069267166~4600593326

こんな感じ↓

これでプラグインの準備は完了です。

2020年4月3日追記 以下の記述をconfig.xmlに加えないとiOSではクラッシュするのでconfig.xmlを編集します。

  <platform name="ios">
    <config-file target="*-Info.plist" parent="GADApplicationIdentifier">
      <string>ca-app-pub-XXXX~XXXX</string> // <- ADMOBのアプリID
    </config-file>
    <config-file parent="GADIsAdManagerApp" platform="ios" target="*-Info.plist">
        <true />
    </config-file>
</platform>

実装していく

まずはオリジナルのソースを見てみましょう。

おみくじアプリの元々の挙動をみるためにソースをみてみると、「はじめる」ボタンを押すとjavascriptでomikuji()関数が実行されるようになっています。

はじめるボタン

<img id="button" src="images/omikuji-btn-hajimeru.png" onclick="omikuji()">

単純にonclick時にomikujiが実行されています。

omikuji()関数

    <script>
        function omikuji (){
            var dice = Math.floor(Math.random() * 3);
            var image_name;
            if (dice == 0) {
                image_name = "omikuji-daikichi.png";
            } else if  (dice == 1) {
                image_name = "omikuji-chuukichi.png";
            } else {
                image_name = "omikuji-hei.png";
            }
        
            document.getElementById("saisyo").style["display"] = "none";
            document.getElementById("kekka").src = "images/" + image_name;
            document.getElementById("kekka").style["display"] = "inline";
            document.getElementById("button").src = "images/omikuji-btn-yarinaosu.png";
        }
    </script>

omikuji関数は乱数で大吉、中吉、平の3つのおみくじ結果が選択されるようになっています。(平って何?)

リワード広告を最後まで見たら、omikuji関数を呼び出すようにすればよさそうですね。

設計方針が見えてきたので、いよいよ実装です。

基本的にjavascriptだけで実装していくことになりますが、メンテナンス性を考慮してAdMobに関する処理はmyscript.jsなどのファイルを作って1つのファイルにまとめておきます。

今回作ったmyscript.jsがこちら

// deviceready時のに初期化処理
document.addEventListener('deviceready', function() {
  // admobが読み込まれていない場合は何もしない
  if (typeof admob === 'undefined') {
    return;
  }

  // リワード広告を初期化
  admob.rewardvideo.config({
    // admob管理画面からゲットしたリワード広告用の広告ID
    id: 'ca-app-pub-3940256099942544/5224354917',
    // テスト時はtrueにする
    isTesting: true,
  });
  // リワード広告を読み込み
  
  admob.rewardvideo.prepare();
});
// 初期化処理ここまで

function showReward()
{
  if (typeof admob === 'undefined') {
    // admobが読み込まれない場合は仕方がないのでomikuji実行
    omikuji();
    return;
  }
  // リワード広告を表示
  admob.rewardvideo.show();
}

document.addEventListener('admob.rewardvideo.events.REWARD', function() {
  // リワードが成功したのでomikujiを実行
  omikuji();
});

document.addEventListener('admob.rewardvideo.events.CLOSE', function(){
  // リワード広告が閉じたタイミングでprepareしておく
  admob.rewardvideo.prepare();
});

実装した箇所は大きく分けて3つの工程になります。それぞれ解説します。

1. まずはリワード広告を初期化

よくある初期化処理です。
admobプラグインが読み込まれた後に初期化しないと駄目なのでdeviceReady時に実行されるようにEventListenerに登録します。

// deviceready時のに初期化処理
document.addEventListener('deviceready', function() {
  // admobが読み込まれていない場合は何もしない
  if (typeof admob === 'undefined') {
    return;
  }

  // リワード広告を初期化
  admob.rewardvideo.config({
    // admob管理画面からゲットしたリワード広告用の広告ID
    id: 'ca-app-pub-3940256099942544/5224354917',
    // テスト時はtrueにする
    isTesting: true,
  });
  // リワード広告を読み込み
  admob.rewardvideo.prepare();
});

admob.rewardvideo.prepare();の部分でリワード広告を予め読み込んでいます。
広告データを通信で取得するのに時間がかかるために前もって準備しておくわけですね。

2.リワード広告を表示させる処理

function showReward()
 {
   if (typeof admob === 'undefined') {
     // admobが読み込まれない場合は仕方がないのでomikuji実行
     omikuji();
     return;
   }
   // リワード広告を表示
   admob.rewardvideo.show();
 }

admobの読み込み状況を判定している以外は、admob.rewardvideo.show();を実行するだけの関数です。

admobが定義されていない場合はそのままomikujiを実行するようにしています。

3.リワード成功時とリワード失敗時の処理

リワード広告の特徴的な機能が、最後まで広告を見たか見なかったかを判定して処理を振り分けられることです。

今回はリワード広告を最後まで見たらおみくじが実行できるように、addEventListenerでReward成立時にomikujiを実行します。

また、リワード広告が閉じたタイミングでCLOSEイベントが発火するのでそのタイミングで再度広告の読み込み(prepare)を実行します。

document.addEventListener('admob.rewardvideo.events.REWARD', function() {
  // リワードが成功したのでomikujiを実行
  omikuji();
});

document.addEventListener('admob.rewardvideo.events.CLOSE', function(){
  // リワード広告が閉じたタイミングでprepareしておく
  admob.rewardvideo.prepare();
});

4,オリジナルファイルの記述を修正

ここまでできたらほとんど完成です。

myscript.jsを読みこんで、ボタン押下時に定義した関数を呼び出すようにしたらOK。

myscriptの読み込み

    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <!-- 9行目あたりに↓これを追加 -->
    <script src="myscript.js"></script>

onclickで呼び出す関数をshowRewardに変更

    <div id="bottombar">
        <img id="button" src="images/omikuji-btn-hajimeru.png" onclick="showReward()">
    </div>

これで完成です。

リワード広告が表示されて、動画終了後におみくじ結果が出るようになりました。

注意するところ

admob-freeプラグインはなぜか情報が少ないので、自分でまとめました。

リワード後の処理はアプリごとに変わってくると思うけど、それ以外はこのまとめで十分実装できるはず。

最初ハマりそうなところは、リワード広告が有効になるまで時間がかかるみたい&適度なタイミングでリワード広告が読み込めなくて広告が表示されない問題が発生するので開発中は以下のサンプル広告IDで実装しておくのがいいと思う。

広告フォーマットサンプル広告ユニット 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

今回作ったおみくじアプリはGooglePlayからダウンロードできます。(iPhoneは審査通過しなそうなのでやめました)

※ Androidで上のQRコードを読み込むか、ここをクリックしてダウンロードできます。

今回作成したアプリをちょっと改良して、最初の一回だけ普通におみくじができて、二度目以降はリワード広告になるようにしています。

今回作ったアプリのmonacaプロジェクトファイルをそのままzipでアップしておくので興味がある方はダウンロードして、monacaからインポートして作ってみてください。

ファイルはこちらから

まとめ

リワード広告は性質上、アプリごとに実装方法が変わってくるので、他の広告みたいにコピペだけで完了という風にはできません。

でも、その分報酬は見込めるし挑戦する価値は結構あるものです。

monacaとSDKでやるならjavascriptだけの知識でOKなので比較的習得は容易です。

ステップアップして報酬を伸ばしてみようという方は是非取り入れてみてください。

ABOUT ME
上田幸司
上田幸司
DACOON株式会社 代表取締役 早稲田大学に入学後、在学中にシステム会社を設立。 開発者として様々なシステムを開発する傍ら、レンタルサーバーの運営、世界各国でのセミナー活動、ネットビジネスのコンサルティングなど、多ジャンルで活躍。ただ今LINE@フォローで「誰でもアプリメーカー」+「副業ビジネスガイドブック2020」を配布中! 詳しくはこちら → https://apps.jp.net/opt/
大副業時代を生き抜く!ための「ネットビジネス講義」

多くの副業難民を救ったアプリビジネスのノウハウの集大成を完全無料で公開!
運営実績5年以上、指導実績1200名を超えて月収100万円以上の実績者を多数輩。

最高月収867万円達成者も語る「時間」や「場所」に縛られない理想的な副業ライフを手に入れるための特別レッスンを今すぐ受け取ってください!

関連記事

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です