アプリ広告バナーをランダム表示するスクリプトを作ってみました

　Zucksアフィリエイトなど、アプリの広告をサイトに掲載するときに使用するためのスクリプトです。

　設定した内容からランダムでひとつ選んで表示するだけの簡単なものではありますが。

内容

　特定の形式で書いたリストからランダムで選択したバナーを、指定したタグに入れます。

　例えば

var list = [
  // アプリ1
  {
    'iphone': 'iPhone向けバナー1', 
    'android': 'Android向けバナー1', 
  }, 
  {
    'iphone': 'iPhone向けバナー2', 
    'android': 'Android向けバナー2', 
  }, 
  // デフォルト表示
  {
    'default': 'PC向けバナー'
  }

というリストを書いた場合。iPhoneで開くと「iPhone向けバナー1」と「iPhone向けバナー2」が、それぞれ1/2の確率で表示されます。 Androidの場合は「Android向けバナー1」または「Android向けバナー2」となります。

　iPhone/iPad/iPod touchでもAndroidでもない場合は、「PC向けバナー」になります。

　単純に、リストの中でiPhoneまたはそれ以外の表示内容を指定していて、そこからランダムで選択されたものが表示されるというものです。 　キーに「priority」として数を入力すると、その項目の出現率がpriority分上昇します。(ただその数値分水増ししているだけです)

  {
    'priority': 3
    'iphone': 'iPhone向けバナー3', 
    'android': 'Android向けバナー3', 
  }, 

　これで3倍！

設置方法

　内容は単純なのですが設置が少しややこいかもしれない。

　4つに分けたそれぞれのコードは別々のところにあっても大丈夫ですが、ここでは例として「デザイン > カスタマイズ > 記事 > 記事上」に全て書くことにします。

スクリプトの設置

　メインとなるスクリプトを記載します。

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script lang="text/javascript">
<!-- Version 1.0.1 Copyright http://http://hatebu-memo.scriptlife.jp// -->
function show_banner(banner_id, list) {
    // OSの判定
    // OSによってバナーを変える
    os_key = 'default'
    if (navigator.userAgent.indexOf('iPhone')>0
        || navigator.userAgent.indexOf('iPad')>0
        || navigator.userAgent.indexOf('iPod touch')>0){
        // iPhone
        os_key = 'iphone'
    } else if ( navigator.userAgent.indexOf('Android')>0 ) {
        // Android
        os_key = 'android'
    }
    
    // 表示するバナーをランダムで設定
    // priorityが設定されていたら、そのぶんだけ確率を上げる
    index_list = [];
    for (var i=0; i<list.length; i++) {
        // 対応するバナーがない、文字列が空の場合は無視
        if ( false == (os_key in list[i]) ) { continue; }
        if ( list[i][os_key] == false ) { continue; }
        
        if ( 'priority' in list[i] ) {
            priority = list[i]['priority'];
        } else {
            priority = 1;
        }
        for(j=0; j<priority; j++) { index_list.push(i); }
    }
    
    idx = index_list[ Math.floor( Math.random() * index_list.length ) ];

    $('#'+banner_id).html(list[idx][os_key])
}
</script>

(jqueryは他で読み込んでいれば外してしまってもかまいません)

バナーを表示させるための要素を設置

　バナーを表示させるための要素を、表示したい場所に設置します。

　そのときに、「id='xxx'」という形でIDをつけてください。

　例としてdivタグを使います。

<div id='banner-sample'>
</div>

　また、バナーの表示する位置、大きさの調整などはこのdivタグで行うとよいです。

　例えば表示幅を300pxにしたい場合は、

<div id='banner-sample' style='width: 300px'>
</div>

などとします。

表示するバナーのリストを作成

　バナーリストを作ります。

　JavaScriptの配列に、特定の要素をキーにして列挙していきます。

<script lang="text/javascript">
var list = [
  // デフォルト
  {
    'default': 'PC向けバナー'
  }, 
  // アプリ1
  {
    'iphone': 'iPhone向けバナー1', 
    'android': 'Android向けバナー1', 
  }, 
  {
    'iphone': 'iPhone向けバナー2', 
    'android': 'Android向けバナー2', 
  }, 
  {
    'priority': 3
    'iphone': 'iPhone向けバナー3', 
    'android': 'Android向けバナー3', 
  }, 
];
</script>

「iphone」がiPhone/iPad/iPod touch向け、「Android」がAndroid向け、「default」がその他になります。

「priority」は少し特殊で、そこに指定した数字だけ、他のバナーより出現率が○倍に増えます。

• 「default」に設定する広告のポイント

　「default」では主にPCのときに表示されることになると思うので、それに合わせたものがいいと思います。

　AdSenseが無難かなあ。

　それでAdSenseを貼り付けるときに、コードが長くなってしまうので、こちらのコードを使っていったん文字列にしてから入れるとわかりやすいかと思います。

uxlayman.hatenablog.com

var adsenseCode = (function () {/*

<!-- 自分のアドセンスコードの2箇所の「/script」を「/scrip」に修正してここにコピペ -->

*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');

var list = [
  // デフォルト
  {
    'default': adsenseCode
  }, 
  ...

みたいな感じで。

　また、AdSenseが表示されたときに、その広告の上に「スポンサーリンク」などが出ていないといけないので、そこも注意点です。

　差し込むコードの中に一緒に入れてしまうか、表示領域の上に用意しておくかはお好みで。(うちは表示領域の上に「スポンサーリンク」と書いてしまってます)

表示を行う

　最後に表示です。

<script lang="text/javascript">
$(function() {
  show_banner('banner-sample', list);
});
</script>

というようにshow_bannerファンクションを呼び出して下さい。

これで記事のページ上に、バナー広告が出ていると思います。

このスクリプトを作成した目的

　アプリのほうのバナーなどもちょっと設置してみるかなあと思ってZucksというASPを見ていたのですが、ちょっと個人的に困ったのでそれを解決したかった。

　解決したかったことは2つ。

• iPhoneとAndroidの広告が別になっていた

　まずこれ。うちのブログはiPhoneユーザーもAndroidユーザーも訪れてくれるんですが、Zucksから提供されていたURLはiTunesストアやGooglePlayストアに直接リンクされておりましたので、それぞれに合わせたURLを出したいなと。

• 標準機能ではランダム表示ができなかった

　次にこれ。一度設置したら手動で貼り替えるまで、同じ広告が出続けることになってしまう。

　Smart-Cなどはランダム表示のスクリプトを用意してくれていたみたいだったのですが…PHPだったのでサーバーが必要でちょっと断念。なくはないけど…

　という、この二点を解決しようと思ったときにJavaScriptでそこそこ簡単に書けないかなあと思って作りました。

　もし何かのお役に立てれば幸いです。

改良のポイント

　単純にランダムで要素を入れているだけなので、別にバナーローテーションだけじゃなく使えるかも知れません。

　また、JavaScriptで動かしておりますのでサーバーなどを別途用意する必要はないのですが、いかんせんリストが長くなったりすると面倒なので、別サーバーから読み込む形にしてもよいかもしれません。

　そうすると、リストの更新などがそちらのデータを修正することで行えるようになります。

　最終的にshow_bannerにIDとリストを渡してやればよいので、リストの作り方や表示用のタグのレイアウトなんかは各自調整するところかも。

免責事項ならびに利用、改造について

　このスクリプトを使用したことで被った損害・損失に対しては、一切の責任を負いかねます。自己責任でご利用下さい。

　著作権は放棄しませんが改造、転載等は許可します。

　ただし、改造、転載など、本サイト外で配布されたスクリプトについては、私には責任の無いものとします。

修正履歴

• 2016/9/3 1.0.1 公開　iPad/iPod touch対応、その他デバイス(主にPC向け)対応
• 2016/9/3 1.0 公開