# Monaca Getting Started / バナー広告

# はじめに

Monacaでの開発に必要な環境が用意されていることを前提としています。

# 対応バージョン

platform	version
Cordova CLI	6.2.0
iOSプラットフォーム	4.2.0
Androidプラットフォーム	5.1.1

device	version
iOS	10.0+
Android	4.0.3+

# 注意

広告のローテーションは使用しないでください。
広告タグでの実装のためSDK連携には非対応となります。
Webで表示可能なアドネットワークのみ対応となります。

# 導入の流れ

プロジェクトの設定を行います
↓
Ad Generation広告タグを生成するコードを追加します
↓
広告の呼び出し部分を実装します

# 1. プロジェクトの設定を行う

設定 -> Cordovaプラグインの管理より、InAppBrowserを有効にしてください。
全ドメインを許可する場合は下記の設定となります。
- プロジェクト直下にあるconfig.xmlの <wiget>内に下記追記します。
  <access origin="*"/>
  詳しくは下記ご参照ください。
  https://ja.onsen.io/blog/monaca-app-security-tips/ (opens new window)

# 2. Ad Generation広告タグを生成するコードを追加する

下記コードをそのままHTMLに貼付けるかjavascriptファイルとして保存して読み込んでください。
また、サンプルプロジェクトでは別ファイルにして AdGeneration.js として呼び出しています。

function makeADGTag(adid , divid, width, height){
    var adg = document.getElementById(divid);
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // async=trueにすることによって非同期に対応されます
    script.src ='https://i.socdm.com/sdk/js/adg-script-loader.js?id=' + adid + '&adType=FREE&width='+ width +'&height='+ height +'&displayid=0&targetID=adgAd_' + divid + '&async=true';

    if(adg != null){
        adg.appendChild(script);
    }
    adg.style.display = 'none';
    var count = 0;
    var timer = setInterval(function checkAd(){
        count++;
        if(count > 100){
            clearInterval(timer);
            return;
        }
        if(checkADGTag(adg) === true){
            clearInterval(timer);
            adg.style.display = 'inline';
        }
    },100);
}

// aタグを探す
function checkADGTag(obj){
    var links = obj.getElementsByTagName('a');
    var frms = obj.getElementsByTagName('iframe');
    if(links.length > 0){
        makeADGLink(links);
        return true;
    }

    var res = false;
    for(var i = 0; i < frms.length; i++){
        if(checkADGTag(frms[i].contentWindow.document) === true){
            res = true
        }
    }
    return res;
}

// aタグを置換する
function makeADGLink(arr){
    for(var i = 0; i < arr.length; i++){
        (function(a) {
            var href = a.href;
            a.href = '#';
            a.onclick = function(){
                var ref = window.open(href, '_system');
                return false;
            }
        })(arr[i]);
    }
}

# 3. 広告の呼び出し部分を実装する

広告を表示する位置にapp内でユニークになるようなidをセットしたdivを記述します。
```
<div id = "adg_48547"></div>
```
ページの読み込みが終わった箇所にて下記の様にmakeADGTag(広告枠ID, 対象DivタグID, 広告の横サイズ, 広告の縦サイズ)を呼んでください。広告枠IDはAdGenerationの管理画面より取得できます。
```
 
 <script type="text/javascript" src="js/AdGeneration.js"></script>
 <script type="text/javascript">
   ons.ready(function() {
     makeADGTag('48547','adg_48547', '320', '50');
   });
 </script>
 

 <div id="adg_48547"></div> 
```
広告枠IDはこのままではなく実際のものに変えてください。
ons はOnsen UIのオブジェクトです。