スマホアプリ用の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アドセンスが使えなくても自分で作れば広告入れられます。
ただし、アフィリエイトの規約とかどうなのかよく知らないので万が一ペナルティなんかなることがあるかもしれないので使う際は自己責任でお願いします。