Knowledge CenterどこどこJP ナレッジセンター

どこどこJPに関するQ&Aや
技術に関する記事を掲載しています。

どこどこJPに関するQ&Aや技術に関する記事を掲載しています。

  • ナレッジ
  • その他

ジオターゲティングを実装したい サンプルスクリプト1:特定の都道府県・画像の切り替え

目次

ジオターゲティングのサンプルスクリプトをご紹介します。
「ジオターゲティングって何?」という方は、「ジオターゲティングとは?仕組みやメリットを解説」をお読みください。

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

デモ

以下のリンクから、デモページをご覧ください。

https://knowledge.docodoco.jp/sample/demo_targeting03/

準備するもの

・バナー

デフォルト用と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では、この記事でご紹介した内容を無料でお試しいただけます。ぜひご利用ください。

一覧にもどる

目的別で探す