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()の3番目パラメータと同じにします。
header内に、上記2つの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サポートさまのご協力のもと、表示することができました。根気よくお付き合いくださりありがとうございました!