【monaca】monacaでnendのインタースティシャル（っぽい）広告を実装する方法
monacaで作ったアプリにnendのインタースティシャル広告をつけたいなと思っている方へ。
結論から言うと、無理です。
Admobの広告なら付けられるみたいですが、nendではインタースティシャル広告はつけられません。
MonacaアプリはJavaScriptベースなので広告を導入する際はWebサイトに広告を貼るのと同じように、JSタグを任意の場所に貼ることで広告を表示できます。
しかし、nendのインタースティシャル広告の作成ページを見ると、
ご覧のように、広告用コードがありません。
というわけで、正規のインタースティシャル形式の広告は貼れませんが、せっかくの高収益フォーマットな広告を諦めたくないので、それっぽいやつを自作します。
そもそも、アプリにおけるインタースティシャル広告というのは、分解すると
①画面いっぱいに出てくる
②右上（左上）に閉じるボタンがある
③たまに出てくる
という特徴があります。これらの特徴を備えた広告を表示させることができれば、代替品として十分に機能しそうです。
nendのインタースティシャル広告のサイズは、300x250です。そして、JSタグで表示させることができるインライン広告にも同じサイズのものがあります。これで代用することで、インタースティシャルもどきを作っていきます。
完成形
広告表示用のモーダルを用意しておいて、load時に五分の一の確率でそれが出るようにしています。Math.floor(Math.random()*5);のx5の部分を変えることで確率を変更できます。
コードには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>
ちょっとだけ宣伝
Monacaでアプリ作ってます
Discussion