- ナレッジ
- その他
ジオターゲティングを実装したい サンプルスクリプト1：特定の都道府県・画像の切り替え
ジオターゲティングのサンプルスクリプトをご紹介します。
「ジオターゲティングって何？」という方は、「ジオターゲティングとは？仕組みやメリットを解説」をお読みください。
今回は、アクセス元の都道府県によってバナーを切り替えるサンプルです。
準備するもの
・バナー
デフォルト用と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)】
$(function() {
if ( window.SURFPOINT ) {
areaTargeting_pref();
}
});
// 都道府県コード判定によるコンテンツの出しわけ.
// id属性で指定したhtmlタグの画像URLを,どこどこJPの値を用いて変更しています.
function areaTargeting_pref() {
$("#close_up").attr( "src", "img/" + prefcode_to_filename() );
/*
// jQueryを利用せずに出しわけを行う場合,それぞれ下記で書き換えることができます.
document.getElementById("close_up").src = "img/"+ 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 src="http://api.docodoco.jp/v6/docodoco?key=xxx" charset="utf-8"></script>
// どこどこJPのAPIタグは実際にお客様が発行されたものと入れ替えてください.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="js/for_area.js"></script>
</head>
・都道府県コード判定によるコンテンツの出しわけ
htmlファイルの画像を配置するimg要素に、id=”close_up” を加えます。
【htmlファイル】
<img id="close_up" src="img/default.png" width="520" height="80" alt="">動作確認
地域ごとに画像が切り替わるか検証するために、どこどこJPではWebプロキシサーバーを設定しています。管理画面にログイン後、Webプロキシのボタンをクリックしてください。
接続先の都道府県名をクリックするとホストとIPが表示されます。各ブラウザごとの設定方法を確認のうえご利用ください。
ジオターゲティングを実装してみよう
どこどこJPでは、この記事でご紹介した内容を無料でお試しいただけます。ぜひご利用ください。