ブラウザゲームに自作広告システムを入れる

スマホのアプリだと割と審査の条件が緩くあっさりとGoogleの広告を入れることができるんですが、なぜかブラウザゲームは条件が異常に厳しい。月間100万pv以上とか鬼やん!ファ*キングーグル!( ゚Д゚)凸

というわけでずっと諦めていたんですが、この前TシャツとかのグッズやLINEスタンプ作ったりしたのでそれの広告だけでもゲームに入れようと思って、「だったらアフィリエイトもいれたらいんじゃね?」と気づいて、そしたら「広告入れれるやん!!」と気づいたわけです。

そう!Googleアドセンスなんか使わんでもいいのよ!作ればいいのよ!

広告データ保存用のjsonファイルを作る

まずjsonで広告のデータをまとめとくことにしました。

[
    {
        "title" : "test", 
        "iframe": null,
        "url"   : "https://test.com/test",
        "url2" : "https://test.com/test",
        "image" : "https://test.com/test.png",
        "width" : 300,
        "height": 250,
    },
    {
        "title" : "test(amazon向け)", 
        "iframe": "https://test.com/test",
        "url"   : "",
        "url2" : "",
        "image" : "",
        "width" : 300,
        "height": 250,
    }
]

これはアフィリエイトのリンクのデータを分解してそれぞれのurlと画像サイズを入れてます。

内容はこんな感じです。

  • title・・・自分がなんの広告かわかるようにするためのもの
  • iframe・・・amazonなどiframe形式になってる広告のurl
  • url・・・広告のリンク先url
  • url2・・・width、heightが1になっている謎imgのurl
  • image・・・広告画像のurl
  • width、height・・・画像の大きさ

アフィリエイト広告のurl部分と大きさだけあればOKです。あとは基本同じはずなので必要ないです。

javascriptのプログラムを作る

次はjavasciprtでプログラムを書きます。

function showMyAd() {
    fetch("adData.json")//jsonファイルの場所を入力してね
    .then(function (response) {
        return response.json();
    }).then(function (data) {
        var num = Math.random() * data.length | 0;
        makeHtml(data[num]);
    });
    //ボタンを画像より後に出したいので
    setTimeout(function(){
        var btn = document.getElementById("ad-close-btn");
        btn.style.display = "block";
    }, 3000);   
}
function makeHtml(data) {
    var ad = document.getElementById("ad-image");
    var html = "<div>";
    if(data.iframe){
        html += '<iframe src="' + data.iframe + '" width="' + data.width + '" height="' + data.height + '" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>';
    }else{
        html += '<a target="_blank" rel="noopener" href="' + data.url + '">';
        html += '<img src="' + data.image + '" width="' + data.width + '" height="' + data.height + '">';
        if(data.d_url){
            html +='<img border="0" width="1" height="1" src="' + data.d_url +'" alt="" style="border:none !important; margin:0px !important;" />'
        }
        html += '</a>';
    }
    html += "</div>";
    ad.innerHTML = html;
    ad.style.marginTop = "calc(50% - " + data.height*0.5 + "px)";    
}
function adClose(){
    var ad = document.getElementById("game-ad");
    ad.style.display = "none";
}

showMyAdという関数を実行すると広告が表示されます。

fetchという関数でjsonファイルからデータを取得してランダムで一つ表示します。広告の表示に少し時間がかかるのでsetTimeout()で閉じるボタンを3秒後に表示するようにしています(もっと長い方がいい場合は時間を変えてください)。

makeHtml関数で表示する広告のHTMLを作っています。if文でiframeだった場合とそうでない場合に分けてます(iframeを使わない場合はデータをnullにしておいてね)。

adClose関数は閉じるボタンを押したときに広告を非表示にします。

HTMLとCSS

HTMLはこんな感じ。

<body onload="showMyAd();">
<div id="game-area">
    <div id="game-ad">
        <div id="ad-image"></div>
        <button id="ad-close-btn" onclick="adClose();">閉じる</button>
    </div>
</div>
</body>

bodyを読みこんだらshowAd関数が実行されます。

game-areaはゲームが表示される場所です。

 

cssはこんな感じです。

#game-area {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    border: none;
}
#game-ad {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
}
#ad-image {
    width: 100%;
    height: auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
#ad-close-btn {
    width: 100px;
    height: 50px;
    margin-top: 50px;
    margin-left: calc(50% - 50px) ;
    display: none;
}

game-areaにgame-adをabsoluteで位置を指定してゲーム画面の上に乗るようにしています。

 

これでゲームを表示した際に一度だけ広告を表示させることができます。

ゲーム内で好きなタイミングで出したい欲張りさんは自分で考えてね!( ・´ー・`)

自分の広告も入れられる

わたしは自分のグッズの広告を表示するのが最初のアイデアだったわけですが、当然それも簡単にできます。

広告用の画像を作成してアップロードしてそのurlとリンク先のurlを貼るだけですね。この場合url2は必要ないのでnullにしておいてください(だからif文を入れてある)。

 

で、思ったんですが、これなら自分で広告を集めたらビジネスになりますね(*’ω’*)。ココナラとかで募集したら儲かるかもね(知らんけど)。

あとがき

というわけでGoogleアドセンスが使えなくても自分で作れば広告入れられます。

ただし、アフィリエイトの規約とかどうなのかよく知らないので万が一ペナルティなんかなることがあるかもしれないので使う際は自己責任でお願いします。

当サイトのオリジナルゲーム(ランダム表示)

あほげー。世紀末な感じの世界で熱い男たちの戦いの火ぶたが切って落とされる!?
同色で複数隣り合っているタイルをタッチするとそのタイルのところに他のタイルが集まります...
スペースインベーダー風ゲーム。謎の宇宙人たちが襲って来たみたいなんでやっつけてください。
部屋に侵入してきた蚊と戦うカジュアルゲームです。現実同様好き放題飛び回る蚊をうまく叩い...

記事の感想・コメント

※コメントはまだありません※

コメントを残す

メールアドレスが公開されることはありません。

ゲームタグ

メニュー

ゲーム一覧ページへのリンク画像
ゲーム開発技術ブログへのリンク画像
pixi.jsでのゲーム開発へのリンク画像
enchant.jsでのゲーム開発へのリンク画像
グッズページへのリンク画像

ゲーム開発の参考書(amazon)

HTML5 ゲーム開発の教科書 スマホゲーム制作のための基礎講座
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング[改訂版]
ドット絵教室