nend ( ネンド広告 )

Monacaで開発したアプリには、WebView上に表示できるものであれば、広告ネットワーク各社が提供している広告を掲載することができます。

Monacaアプリ上に掲載できる広告ネットワークサービスの例として、株式会社ファンコミュニケーションズ様提供の nend ( ネンド広告 ) とMonacaアプリへの広告掲載の方法を紹介します。

1. nend への掲載アプリ審査登録

nend ( ネンド広告 )のサイト から、左上の「アプリ・サイト運営者様」→「今すぐ始める」と進み、メディアパートナーとして登録、サイト/アプリを登録申請します。

2. nend の広告コードの取得

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

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

3. アプリへの 広告コードの埋め込み

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>
  const nend_params;

  // 広告コードは、iOS と Androidで異なるため、下記のようにOSごとに切り替えます
  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() {
    setTimeout(addBrowserOpenEvent, 1000)
  });
  
  function addBrowserOpenEvent() {
    let nend_links = document.querySelectorAll('.nend_wrapper a');
    for (let i = 0; i < nend_links.length; i += 1) {
      (function () {
        const href = nend_links[i].href;
        nend_links[i].href = "#";
        nend_links[i].onclick = function () { // 広告がタップされたイベントの処理を記述しています。
          cordova.InAppBrowser.open(href, '_system');
          return false;
        }
      })();
    }
  }
</script>
</head>

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

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

最終更新