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

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

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

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

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

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

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

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

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

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

コンテンツ

おみくじアプリプロジェクトを作成
必要なcordovaプラグイン
インストールパラメータの設定
実装していく
注意するところ
まとめ

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

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

空行含めて全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`