ons-pageの中にAdGeneration広告を入れる


Monacaで作成しているスマートフォンアプリに、広告を表示させます。
Cordova5.2.0です。

##config.xml
`<widget></widget>`内に挿入します。

```
<access origin="*"/>
```


##広告用JS

```
function makeADGTag(adid_ios , adid_android , divid){
    var adg = document.getElementById(divid);
    var script = document.createElement("script");
    var adid;
    if( monaca.isIOS ){adid = adid_ios;}
    if( monaca.isAndroid ){adid = adid_android;}
    script.type = 'text/javascript';
    // async=trueにすることによって非同期に対応されます
    script.src ='http://i.socdm.com/sdk/js/adg-script-loader.js?id=' + adid + '&adType=SP&displayid=2&targetID=adg_' + adid + '&async=true';
    if(adg != null && adg.innerHTML == ''){
        adg.appendChild(script);
    }
    adg.style.display = "none";
    var count = 0;
    var timer = setInterval(function checkAd(){
        count++;
        if(count > 100){
            console.log(adg.innerHTML);
            clearInterval(timer);
            return;
        }
        if(checkADGTag(adg) === true){
            console.log('load AD');
            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]);
    }
}
```

##ページ切り替え用JS
ページを切り替えるタイミングで、makeADGTag()を発動させます。
今回はons-tabbarでページを切り替えている例です。
パラメータです。
`makeADGTag("iOS用広告ID","Android用広告ID" , "表示させるDIVのID");`
広告IDは、ADGenerationで発行するIDです。


```
function onDeviceReady() {
    //Home初回：広告表示関数
    makeADGTag("00000","00000" , "top_ad_area");

    tabbar.on('postchange', function(e) {
        var page = e.index;
        //console.log(page);
        if(page==0){//Home            
            //広告表示関数
            makeADGTag("00000","00000" , "top_ad_area");
        }else if(page==1){
            //console.log('page1');
        }else if(page==2){
            //console.log('page2');
        }else if(page==3){
            //console.log('page3');
        }
    });
}//onDeviceReady

var event = typeof cordova === 'undefined' ? 
                              'DOMContentLoaded' : 'deviceready';
document.addEventListener(event, onDeviceReady, false);
```

##HTMLファイル
`<ons-page></ons-page>`内、任意の場所に挿入します。
divのIDは、makeADGTag()の３番目パラメータと同じにします。
header内に、上記２つのJSを読み込ませてください。

```
<div id="top_ad_area"></div>
```

##JSで生成するons-listに広告を入れる
例えばこんな感じでできました。
任意の場所で、関数を発動させてください。

```
function addListAD(){
    var sentence = '<ons-list-item><div id="list_ad_area"></div></ons-list-item>';
    var li = $(sentence);
    li.appendTo($("#scheduleList"));
    ons.compile(li[0]);
    li.addClass('list_ad');
    makeADGTag("00000" , "00000" , "list_ad_area");
}
```
広告を表示するDIVが描画されてから、makeADGTag()を発動させます。

AdGenerationサポートさまのご協力のもと、表示することができました。根気よくお付き合いくださりありがとうございました！