ドキュメントTOP » サンプル&Tip » 開発 Tips » nend ( ネンド広告 )

nend ( ネンド広告 )

WebView 上に表示できるものであれば、広告ネットワーク各社が提供している広告を、Monaca で開発したアプリに掲載できます。 Monaca 側の利用規約では、アプリ内広告の表示について、規制・条件を特に設けておりませんので、利用に関しては、広告ネットワーク各社の規約をご確認ください。

Monaca アプリ上に掲載できる広告ネットワークサービスの例として、株式会社ファンコミュニケーションズ様 提供の nend をご紹介します。併せて、掲載方法も解説します ( 手順は、2013年5月現在のものです )。

  1. アプリの登録 ・ 審査

nend のサイト から、左上の [ アプリ・サイト運営者様 ] → [ 今すぐ始める ] と進み、メディアパートナー登録を行い、サイト/アプリを登録申請します。

../../../../_images/nend_top.png
  1. nend の 「 広告コード 」 の取得

サイト/アプリの審査後、管理画面から、[ 広告枠の管理 ] → [ 広告枠 ] で登録したサイト/アプリを表示します。

../../../../_images/nend_manage.png

サイト/アプリ名の下にある 「 広告コード 」 をクリックすると、広告掲載用のコードが表示されますので、これをコピーします。

../../../../_images/nend_code.png
  1. Monaca アプリへの 「 広告コード 」 の埋め込み

nend のサンプル広告コードを、次に記します ( xxx... は、ダミーです。ここには、実際のコードを埋め込みます )。

広告コードは、iOS と Android で異なります。 各 OS に特化しているアプリの場合には、上記のコードを、そのまま、アプリに埋め込みます。iOS と Android アプリに共通のソースコードを使用する場合には、 nend_params を設定している部分を、OS に応じて、切り替えるように記述します。

<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<script>

  var nend_params;

  //iOS/Androidアプリそれぞれに共通のコードとする場合は下記のように処理を切り分けます。
  if( monaca.isIOS ){
    nend_params = {"media":xxxx,"site":xxxxx,"spot":xxxxx,"type":x,"oriented":x}; // iOS
  }
  if( monaca.isAndroid ){
    nend_params = {"media":xxxx,"site":xxxxx,"spot":xxxxx,"type":x,"oriented":x}; // Android
  }


  //広告をタップするとそのままリンク先を開いてしまうことがありますので、その対策を記述します。
  window.addEventListener('load', function() {
    var nend_links = document.querySelectorAll('.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); return false;}
      })();
    }
  });
</script>
</head>

<!--広告を貼付けたい箇所に下記のコードを記入します-->
<div class="nend_wrapper"><script src="http://js1.nend.net/js/nendAdLoader.js"></script></div>

問題がなければ、次のように、広告が表示されます。

../../../../_images/nend_sample_filtered.png

nend 広告の表示方法 ( Onsen UI アプリの場合 )

Onsen UI アプリでは、SPA ( シングル ページ アプリケーション ) を原則として使用しているため、通常のアプリと同じように、body タグ直下に広告を置く場合、表示されないことがあります。回避策としては、DOM の操作を行い、nend の広告自体を、SPA のページ上に表示するように、コードを記述します。

具体的な例を、次に記します。

AngularJS 1.x を使用する場合

<!-- index.html -->
<html ng-app="myApp">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <script src="components/loader.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="css/style.css">
  <script>
      var nend_params = {"media":xxxx,"site":xxxx,"spot":xxxx,"type":xxxx,"oriented":xxxx};
      var app = angular.module('myApp', ['onsen']);

      app.directive('nendAdInjector', function () {
          return {
              link : function(scope, element) {
                  var nendOriginalElem = angular.element(document.querySelector('#nend_wrapper'));
                  element.replaceWith(nendOriginalElem.clone());
              }
          }
      });
    </script>
  </head>
  <body>
    <ons-navigator var="myNavigator" page="page1.html"></ons-navigator>
    <div id="nend_wrapper"><script type="text/javascript" src="http://js1.nend.net/js/nendAdLoader.js"></script></div>
  </body>
</html>

<!-- page1.html -->
<ons-page>
  <nend-ad-injector></nend-ad-injector>
</ons-page>

AngularJS を使用しない場合

<!-- index.html -->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
      ons.bootstrap();
      var nend_params = {"media":xxxx,"site":xxxx,"spot":xxxx,"type":xxxx,"oriented":xxxx};
      ons.ready(function() {
          var nendOriginalElem = angular.element(document.querySelector('#nend_wrapper'));
          var nendInjectElem1 = angular.element(document.querySelector('#new_nend_wrapper'));
          nendInjectElem1.replaceWith(nendOriginalElem.clone());
      });
    </script>
  </head>
  <body>
    <ons-navigator var="myNavigator" page="page1.html"></ons-navigator>
    <div id="nend_wrapper"><script type="text/javascript" src="http://js1.nend.net/js/nendAdLoader.js"></script></div>
  </body>
</html>

<!-- page1.html -->
<ons-page>
  <div id="new_nend_wrapper"></div>
</ons-page>

注釈

jQuery Mobile などで、1 つの HTML ファイルに、複数のページを定義している場合、複数のページにまたがる広告は、表示できません。その場合は、1 ページ 1 HTML ファイルで、画面を作成します。

注釈

ハイパフォーマンス版では、デバッガーの種類またはアプリの構成を問わず、WebView の仕様に起因する問題があるため、nend 広告は表示できません。