エリアターゲティングを実装したい

エリアターゲティングのサンプルスクリプトをご紹介します。
「エリアターゲティングって何?」という方は、「エリアターゲティング」とは?をお読みください。

今回は、アクセス元の都道府県によってバナーを切り替えるサンプルです。

デモ

サンプルバナー①は、デフォルト用のバナーです。サンプルバナー②は、エリアターゲティングによりアクセスの都道府県に応じたバナーを表示させています。

サンプルバナー①:デフォルト

サンプルバナー②:エリアターゲティング~都道府県~


準備するもの

・バナー
デフォルト用と47都道府県の切り替え用をそれぞれ作成します。


47都道府県の切り替え用画像は、どこどこJPの第一行政区画のコードと対応した名前をつけます。今回は、北海道であれば「demo_01.png」、青森県であれば「demo_02.png」としています。

第一行政区画コード日本語表記第一行政区画コード日本語表記
01北海道02青森
03岩手04宮城
05秋田06山形
07福島08茨城
09栃木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沖縄
・エリアターゲティング用のJavaScriptファイル
以下のサンプルスクリプトをコピーして、任意の場所にアップロードしてください。ここでは、ファイル名を「for_area.js」としました。
  【JavaScriptファイル(for_area.js)】
$(document).ready(function() {
	if ( window.SURFPOINT ) {
		areaTargeting_pref();
	}

});

// 都道府県コード判定によるコンテンツの出しわけ.
// id属性で指定したhtmlタグの画像URLを,どこどこJPの値を用いて変更しています.
function areaTargeting_pref() {
	$("#close_up").attr( "src", "img/area/" + prefcode_to_filename() );
	/*
	// jQueryを利用せずに出しわけを行う場合,それぞれ下記で書き換えることができます.
	document.getElementById("close_up").src = "img/area/"+ prefcode_to_filename() ;
	*/
}


// 変換テーブルをグローバル変数で定義
// pref_code -> ファイル名
var prefCodeToFile = {
	"01":"demo_01.png",
	"02":"demo_02.png",
	"03":"demo_03.png",
	"04":"demo_04.png",
	"05":"demo_05.png",
	"06":"demo_06.png",
	"07":"demo_07.png",
	"08":"demo_08.png",
	"09":"demo_09.png",
	"10":"demo_10.png",
	"11":"demo_11.png",
	"12":"demo_12.png",
	"13":"demo_13.png",
	"14":"demo_14.png",
	"15":"demo_15.png",
	"16":"demo_16.png",
	"17":"demo_17.png",
	"18":"demo_18.png",
	"19":"demo_19.png",
	"20":"demo_20.png",
	"21":"demo_21.png",
	"22":"demo_22.png",
	"23":"demo_23.png",
	"24":"demo_24.png",
	"25":"demo_25.png",
	"26":"demo_26.png",
	"27":"demo_27.png",
	"28":"demo_28.png",
	"29":"demo_29.png",
	"30":"demo_30.png",
	"31":"demo_31.png",
	"32":"demo_32.png",
	"33":"demo_33.png",
	"34":"demo_34.png",
	"35":"demo_35.png",
	"36":"demo_36.png",
	"37":"demo_37.png",
	"38":"demo_38.png",
	"39":"demo_39.png",
	"40":"demo_40.png",
	"41":"demo_41.png",
	"42":"demo_42.png",
	"43":"demo_43.png",
	"44":"demo_44.png",
	"45":"demo_45.png",
	"46":"demo_46.png",
	"47":"demo_47.png"
};
//変換テーブルに該当しなかった場合のファイル名
var prefDefaultFile = "default.png";

// どこどこJPの都道府県コードからファイル名へ変換するための関数
function prefcode_to_filename(){
	var ret;
	// どこどこJPの値(SURFPOINT オブジェクト)が存在し、
	// かつ変換テーブルに値が存在する場合のみファイル名に変換。
	//それ以外はデフォルトのファイル名。
	if(SURFPOINT && prefCodeToFile[SURFPOINT.getPrefCode()]){
		ret = prefCodeToFile[SURFPOINT.getPrefCode()];
	}else{
		ret = prefDefaultFile;
	}
	return ret;
}



  

コンテンツの書き換え

・どこどこJPのAPIタグと外部ファイル
どこどこJPとjQueryとエリアターゲティング用のJavaScriptファイル(for_area.js)をhtmlファイルのhead内に記述します。
APIキーの発行がお済みでない方は、ご利用登録を行ってください。ご利用登録がお済みの方は、管理画面にログインしAPIキータグを確認してください。
【htmlファイル】
<head>
<script type="text/javascript" src="http://api.docodoco.jp/v5/docodoco?key=xxx" charset="utf-8"></script>
// どこどこJPのAPIタグは実際にお客様が発行されたものと入れ替えてください.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/for_area.js"></script>
</head>
            

・都道府県コード判定によるコンテンツの出しわけ
htmlファイルの画像を配置するimg要素に、id="close_up" を加えます。
【htmlファイル】
<img id="close_up" src="img/area/default.png" width="520" height="80" alt="">
            

動作確認

地域ごとに画像が切り替わるか検証するために、どこどこJPではWebプロキシサーバーを設定しています。管理画面にログイン後、Webプロキシのボタンをクリックしてください。

図:どこどこJP管理画面

接続先の都道府県名をクリックするとホストとIPが表示されます。各ブラウザごとの設定方法を確認のうえご利用ください。

図:Webプロキシ
管理画面でのプロキシ確認



▲ ページの先頭へ

ご不明な点は、お気軽にお問い合せください。