1. kinyakon

    Posted

    kinyakon
Changes in title
+ons-pageの中にAdGeneration広告を入れる
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,132 @@
+
+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サポートさまのご協力のもと、表示することができました。根気よくお付き合いくださりありがとうございました!