スマートフォンアプリで収益を上げる方法は幾つかあります。有料販売、アプリ内課金などもありますが、多くの無料アプリが広告によって収益を上げています。

そこで今回は既存のMonacaアプリに対して手軽に広告を組み込めるAd Generationを紹介します。

Ad Generationの利用について

Ad Generationへのユーザ登録は無料で行えます。今回はデモの広告使ってアプリ内に表示してみたいと思います。
本当の広告を表示する際にはアプリ毎に審査が行われます。審査を通っていない状態では広告配信が行われませんので注意してください。
なお、動画広告やローテーション広告は、Monacaでは利用出来ません。

広告表示の準備

Monacaアプリで使うのはWeb版の広告になります。これはSDKなどを使わない方法なので、とても手軽に導入が行えます。

InAppBrowserを有効にする

広告を表示する機能としてInAppBrowserを使います。これはMonacaで標準プラグインとして提供されています。Monaca IDEのCordovaプラグインの管理からインストールします。

以下のスクリプトを使います。これを www/js/ad.js として作成します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// Ad Generationの広告枠を作成するJavaScriptタグを生成します。
function makeADGTag(adid , divid){
    var adg = document.getElementById(divid);
    var script = document.createElement('script');
    script.type = 'text/javascript';
    // async=trueにすることによって非同期に対応されます
    script.src ='https://i.socdm.com/sdk/js/adg-script-loader.js?id=' + adid + '&adType=SP&displayid=0&targetID=adg_' + divid + '&async=true';
    if(adg != null){
        adg.appendChild(script);
    }
    adg.style.display = 'none';
    var count = 0;
    var timer = setInterval(function checkAd(){
        count++;
        if(count > 100){
            clearInterval(timer);
            return;
        }
        if(checkADGTag(adg) === true){
            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]);
    }
}
 

これを index.html など広告を表示したいHTMLファイル内で読み込みます。

1
2
<script src="js/ad.js"></script>
 

後は広告を表示したい場所に対して <div>タグを記述します。この<div>タグはスタイルシートを使って自由に変更できます。

1
2
<div id="adg"></div>
 

広告を表示する

onDeviceReadyなど、デバイスの準備ができた段階のコールバックを受けて、次のようにJavaScriptを実行します。

1
2
makeADGTag(10722, 'adg');
 

この 10722 という広告IDがデモ用のIDになります。

問題なければアプリの中に広告が表示されます。

HTMLとJavaScriptで表示を制御できるので、任意の画面やモーダルウィンドウなどに広告を表示させられるでしょう。なお、広告は在庫状況によって適切なIDでも表示されないことがありますので、まずデモIDを使ってコード上の問題がないこと、広告が表示されなかったとしてもデザイン上の問題が出ないようにしましょう。

今回のコードはmoongift/MonacaAGDemoにアップロードしてあります。参考にしてください。

スマホ広告収益最大化SSPツール - Ad Generation(アドジェネ)