OnsenUIでnend広告を表示させてみました!

最近、見た目が好きで
WEBアプリ開発の方はOnsenUIをよく使っています。
OnsenUIでnend広告を表示させた時、
ちょっと苦戦したので参考までにまとめてみました。
ちなみにmonacaのドキュメントにやり方が載っています。
ドキュメントTOP » サンプル&Tips » 開発Tips » nend ( ネンド広告 )

広告コードの用意

nend のサイト から、サイト / アプリを登録申請します。
管理画面から、「広告枠の管理」→「広告枠」で「サイト/アプリ名」の下にある「広告コード」をクリックすると、広告掲載用のコードが表示されます。
※「ヘルプ」→「広告表示テスト用広告コード」にテスト用のコードもあります。
onsenui-20150909_1

index.html

広告コードを用意が出来たら、さっそくindex.htmlに表示させるスクリプトを書きます。

<!DOCTYPE HTML>
<html>
<head>
    ・
    ・
    <script src=”js/nend.js”></script>
    ・
    ・
</head>
<body>
    ・
    ・
    </ons-tabbar>
 
    <div class=”nend_wrapper”>
        <script src=”http://js1.nend.net/js/nendAdLoader.js”></script>
    </div>
 
</body>
</html>

JavaScriptは[ js ]フォルダ内の[ nend.js ]に書くことにしました。

実際に表示させたいページ

実際表示させたいページには以下のように書きました。

    ・
    ・
  <ons-bottom-toolbar modifier=”nend”>
    <div class=”new_nend_wrapper”></div>
  </ons-bottom-toolbar>
</ons-page>


「ons-bottom-toolbar」で「modifier=”nend”」を指定して、
CSSに以下の内容を記述しています。

.bottom-bar–nend {
    margin: auto;
    background-color: white;
    width: 320px;
    height: 100px;
}

nend.js

そして[ nend.js ]の中身

var nend_params = {”media”:**,”site”:*****,”spot”:******,”type”:*,”oriented”:*};
// 用意した広告コードを記述する
$nend = null;
arrNendLinks = [];
function setNend() {
    setTimeout(function () {
 
        //広告のリンクを退避する
        if(!$nend) {
            $nend = $(‘#nend_adspace_’ + nend_params.site + ‘_’ + nend_params.spot);
            var arrNendAnchors = $nend.find(‘a’);
            for(var i = 0; i < arrNendAnchors.length; i++) {
                arrNendLinks.push($(arrNendAnchors[i]).attr('href'));
            }
        }
            $('.new_nend_wrapper').append($nend);
            var nend_links = document.querySelectorAll('.new_nend_wrapper a');
            for(var i = 0; i < nend_links.length; i++) {
                var href = $(nend_links[i]).attr("href");
                var href = String(arrNendLinks[i]);
                $(nend_links[i]).attr("href", "javascript:void(0);").on("touchstart", function(){
                    var ref = window.open(href, '_system', 'location=yes');
                    ref.show();
                });
            }
    }, 1000); //タイムラグ?があるためTimeoutで読み込む
}
$(function() {
    $(document.body).on("pageinit", "#*****,#*****,#*****",function() {
    //第2引数には広告を表示したいページのIDを指定する
        setNend();
    });
});


monacaでiOSとAndroid両方に対応させる場合はこんな感じ

var nend_params;
if( monaca.isIOS ){
    nend_params = {/* 自分のiOSアプリ用の広告コード */};
} else if( monaca.isAndroid ){
    nend_params = {/* 自分のAndroidアプリ用の広告コード */};
}


あと、monacaの場合は「ビルド設定」→「Cordocaプラグイン」から[InAppBrowser]を「有効」にします。

onsenui-20150909_2

で、こんな感じで表示されます。

onsenui-20150909_3

広告が表示されなかったり、うまく開かなかったりとかなり試行錯誤しましたが、
色んなサイトを参考にさせて頂き表示出来るようになりました。
まぁ、広告はあくまで広告!アプリそのものの良し悪しの方が重要ですよね?
と思いつつ、広告を入れ無いといけない状況もあったりするので
同じような状況の方の少しでも参考になれば(^ ^)

応援よろしくお願いします。
いいね ! してもらえると嬉しいです。

Twitter で

自己紹介

松田 大 と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか...

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

一昨年の3月に結婚し、尻敷かれ男子の仲間入りを果たしました(笑)

現在勤めているJTクラウドシステムでは、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発「 Excel VBA 」を活用した効率化ツールの開発を中心に「 ネットワーク・サーバー構築 」や「 Office365製品の導入支援 」、最近は、ホームページ制作に加え、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

お問い合わせはJTクラウドシステムホームページからお願いします。
スポンサーリンク