onsenUIでnend広告表示

monacaのドキュメントにやり方が載ってますが、
nend ( 日本のアドネットワーク ) - Monacaドキュメント

このままでは、うまく表示されない場合があります。
OnsenUIなどはページを重ねている為に、広告が隠れてしまうようです。

コミュニティフォーラム、
Onsen UI を使ったアプリへの広告掲載について | MonacaでHTML5モバイルアプリ開発
や、こちらを参考にさせて頂きました。
MonacaでOnsenUIを使用したアプリにnend広告を表示する方法 - おいしい技術

今回は、タブバーを使っていたので、
こんな風にタブバーの上に広告を表示する事にしました。

まずは、index.htmlに広告表示させるスクリプトを書きます。

    :
</ons-tabbar>
<div id="nend_wrapper">
  <script src="http://js1.nend.net/js/nendAdLoader.js"></script>
</div>

実際表示させたいページには以下のように、「ons-bottom-toolbar」で、
下のツールバーを表示して、その中に広告を表示する為のdivを書きます。

  <ons-page ng-controller="ItemListController" id="itemListPage">
    :
  </ons-list>
  <ons-bottom-toolbar modifier="nend">
    <div class="new_nend_wrapper"></div>
  </ons-bottom-toolbar>    
</ons-page>

スクリプトでは、ページ初期化のイベント「pageinit」で、
index.htmlに出力された広告を退避させ、
退避させた広告を実際に表示させたい要素にコピーします。

document.addEventListener("pageinit", function(e) {
  if (e.target.id == "itemListPage") {
    setNend();
  }
}, false);

// nend広告表示用
var nend_params = {"media":??,"site":?????,"spot":??????,"type":1,"oriented":1}; //←実際の値に変える
var $nend = null;
function setNend() {
  setTimeout(function() {
    // 広告を退避する
    if (!$nend) {
      $nend = angular.element(nend_wrapper);
    }
    angular.element(document.querySelectorAll('.new_nend_wrapper')).append($nend);
    var nend_links = document.querySelectorAll('.new_nend_wrapper a');
    
    for(var i = 0; i < nend_links.length; i+=1){
      (function() {
        var href = nend_links[i].href;
        nend_links[i].href = "#";
        nend_links[i].onclick = function(){window.open(href, '_system', 'location=yes'); return false;}
      })();
    }
  }, 1000);
}

リンクをwinsow.openで開くようにしているのは、
monacaのドキュメントに載っている方法ですが、androidでは不要？かも

「ons-bottom-toolbar」で「modifier="nend"」指定して、
スタイルシートを指定して、色と高さの調整をしています。

.bottom-bar--nend{
  background-color: white;
  height: 50px;
}

monacaの場合はこれで動いたはずですが、
広告をクリックしても、全然動かず試行錯誤していたところ、
inAppBrowserプラグインが必要だと分かり、

cordova plugin add org.apache.cordova.inappbrowser

でインストール。無事表示されました。

あと、「jQuery Mobile」を読み込んでいたら、nendが表示されなくなってしまいました。
「jQuery Mobile」とOnsenUIは同時に使うべきではないんでしょうね。
jQuery自体も、AngularJSの「jqLite」で代用出来たので、
jQueryは使わないようにしました。