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

都道府県ごとの切り替え地方ごとの切り替えの応用編として、今回はバナーではなくテキストを切り替えるサンプルスクリプトをご紹介します。「地域ごとに最寄店舗の情報を表示したい」など、テキストを切り替えたいという場合に最適なサンプルスクリプトです。

デモ

まずはこちらのデモページをご覧ください。右上の「お電話でのお問合せはこちら」と表示された連絡先情報が、地域によって切り替わります。

準備するもの

・テキスト
地方切り替え用のテキスト9パターンを準備します。今回は、下記の表の通りにテキストを用意しました。

地方コード地方名テキスト
01北海道地方北海道営業所 011-○○○-××××
02東北地方東北営業所 022-○○○-××××
03関東地方関東営業所 03-○○○○-××××
04中部地方中部営業所 052-○○○-××××
05関西地方(近畿)近畿営業所 06-○○○○-××××
06中国地方中国営業所 082-○○○-××××
07四国地方四国営業所 089-○○○-××××
08九州地方九州営業所 092-○○○-××××
該当なし該当なし営業本部 03-××××-△△△△

地方コードと都道府県の対応は、「 エリアターゲティングを実装したい~サンプルスクリプト2:地方でグルーピング・画像の切り替え~」をご覧ください。
・エリアターゲティング用のJavaScripファイル
以下のサンプルスクリプトをコピーして、任意の場所にアップロードしてください。ここでは、ファイル名を「for_region_text.js」としました。
  【JavaScripファイル(for_region_text.js)】
                                    
$(document).ready(function() {
    if ( window.SURFPOINT ) {
        areaTargeting_region_text();
    }
    });

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

// 変換テーブルをグローバル変数で定義
// region_code -> テキスト
    var regionCodeToText = {
    "01":"北海道営業所 011-○○○-××××",
    "02":"東北営業所 022-○○○-××××",
    "03":"関東営業所 03-○○○○-××××",
    "04":"中部営業所 052-○○○-××××",
    "05":"近畿営業所 06-○○○○-××××",
    "06":"中国営業所 082-○○○-××××",
    "07":"四国営業所 089-○○○-××××",
    "08":"九州営業所 092-○○○-××××"
};

//変換テーブルに該当しなかった場合のテキスト内容
var regionDefaultText = "営業本部 03-××××-△△△△";

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

コンテンツの書き換え

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

・地方コード判定によるコンテンツの出しわけ
切り替えを行いたい要素に、id="close_up" を加えます。
【htmlファイル】
<p id="close_up">営業本部	03-××××-△△△△</p>
                                



▲ ページの先頭へ

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