2
2

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-07-31

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サポートさまのご協力のもと、表示することができました。根気よくお付き合いくださりありがとうございました!

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2