【monaca】monacaでnendのインタースティシャル広告を実装する方法

8238 ワード
HTML JavaScript monaca 初心者 ハイブリッドアプリ HTML テキストリンク

monacaで作ったアプリにnendのインタースティシャル広告をつけたいなと思っている方へ。

結論から言うと、無理です。

Admobの広告なら付けられるみたいですが、nendではインタースティシャル広告はつけられません。

nend公式によると、

Monacaには、画面上にWebViewとして広告のための領域を作り、サイトのようにJSタグを貼る形での掲載が可能です。

とありますが、

ご覧のように、広告コードがなく、JSタグを貼れません。

高収益フォーマットなインタースティシャル広告をつけられないのは痛いですね。

でも、僕はどうしてもお金が欲しいので、自作します。

そもそも、アプリにおけるインタースティシャル広告というのは、分解すると

①画面いっぱいに出てくる

②右上に閉じるボタンがある

③たまに出てくる

という特徴があります。これらの特徴を備えた広告を表示させることができれば、代替品として十分に機能しそうです。

nendのインタースティシャル広告のサイズは、300x250です。そして、JSタグで表示させることができるインライン広告にも同じサイズのものがあります。これで代用することで、インタースティシャルもどきを作っていきます。

完成形

See the Pen 擬似インタースティシャル by toshihide (@toshihide2000) on CodePen.

広告表示用のモーダルを用意しておいて、load時に五分の一の確率でそれが出るようにしています。Math.floor(Math.random()*5);のx5の部分を変えることで確率を変更できます。

0以上1未満の値を返すMath.randomにx5をし、小数点以下を切り捨てる（Math.floor）ことで0~4の5つの数値をランダムで生成し、それが1だった場合にのみモーダルを表示する、という仕組みです。

コードにはnendのテストコードをあらかじめ入れてあります。

完成形はこんな感じになります。↓

完成！

headのJSについて補足

monacaでnend広告を表示する場合、広告を読み込むときのタイムラグが原因で、広告をタップしても何も反応しないという症状が出ます。そこで、それを回避するためにheadに次のスクリプトを入れています。

 <script type="text/javascript">
    //  広告コード
var nend_params = {"media":82,"site":58536,"spot":127518,"type":1,"oriented":1};
    // 
         addEventListener('load', onLoad, false);
      function onLoad() {
                //nendの広告タグのロードにラグがあるので、決め打ちで処理を遅延させています。
                var TIME_FOR_WAITING_NEND_AD = 500;

                setTimeout(function () {

                    var nendAdSpace = document.querySelector('div[id^=nend_adspace]');
                    var nendAdAnchors = nendAdSpace.querySelectorAll('a');

                    for (var i = 0; i < nendAdAnchors.length; i++) {
                        var hrefShelter = nendAdAnchors[i].href;
                        nendAdAnchors[i].removeAttribute('href');
                        nendAdAnchors[i].addEventListener('click', function () {
                           cordova.InAppBrowser.open(hrefShelter, "_system", 'location=yes');
                        }, false);
                    }                

                }, TIME_FOR_WAITING_NEND_AD);
            }
    </script>

詳しくはこちらの記事をご覧ください↓

ちょっとだけ宣伝

オナ禁アプリを作りました。禁欲に興味がある方はぜひ。


禁欲エボリューション

こっちは文字数を制限できるメモアプリ

文字数制限メモ