Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

kinyakon
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away