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

 

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

自己紹介

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

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

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています(^_^)。

現在勤めているJTクラウドシステムでは、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

現在、代表取締役兼二児のパパ。イクメン目指して、公私ともに慌ただしくしています(笑)

コメントを残す