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

都道府県での切り替えに引き続き、今回は地方でグルーピングされたエリアターゲティングのサンプルスクリプトをご紹介します。例えば、「都道府県ごとに店舗や営業店はないけれど、地方ごとならある。」「地方ごとに訴求したいキャンペーンやコンテンツがある。」といった場合に最適なサンプルスクリプトです。

デモ

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

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

サンプルバナー②:エリアターゲティング~地方~


準備するもの

・バナー
デフォルト用と地方切り替え用8つをそれぞれ作成します。


地方切り替え用画像は、どこどこJPの地方コードと対応した名前をつけます。今回は、北海道地方であれば「demo_01.png」、東北地方であれば「demo_02.png」としています。

地方コード地方名第一行政区画コード第一行政区画
01北海道地方01北海道
02東北地方02青森県
03岩手県
04宮城県
05秋田県
06山形県
07福島県
03関東地方08茨城県
09栃木県
10群馬県
11埼玉県
12千葉県
13東京都
14神奈川県
04中部地方15新潟県
16富山県
17石川県
18福井県
19山梨県
20長野県
21岐阜県
22静岡県
23愛知県
05関西地方(近畿)24 三重県
25 滋賀県
26 京都府
27 大阪府
28 兵庫県
29 奈良県
30 和歌山県
06中国地方31 鳥取県
32 島根県
33 岡山県
34 広島県
35 山口県
07四国地方36 徳島県
37 香川県
38 愛媛県
39 高知県
08九州地方40 福岡県
41 佐賀県
42 長崎県
43 熊本県
44 大分県
45 宮崎県
46 鹿児島県
47 沖縄県
・エリアターゲティング用のJavaScripファイル
以下のサンプルスクリプトをコピーして、任意の場所にアップロードしてください。ここでは、ファイル名を「for_region.js」としました。
  【JavaScripファイル(for_region.js)】
$(document).ready(function() {
	if ( window.SURFPOINT ) {
		areaTargeting_region();
	}

});


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


// 変換テーブルをグローバル変数で定義
// region_code -> ファイル名
var regionCodeToFile = {
	"01":"hokkaido.png",
	"02":"tohoku.png",
	"03":"kantou.png",
	"04":"chubu.png",
	"05":"kansai.png",
	"06":"chugoku.png",
	"07":"shikoku.png",
	"08":"kyushu.png"
};
//変換テーブルに該当しなかった場合のファイル名
var regionDefaultFile = "default.png";

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



  

コンテンツの書き換え

・どこどこJPのAPIタグと外部ファイル
どこどこJPとjQueryとエリアターゲティング用のJavaScripファイル(for_region.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_region.js"></script>
</head>
            

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



▲ ページの先頭へ

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