ジオターゲティングを実装したい
都道府県ごとの切り替えや地方ごとの切り替えの応用編として、今回はバナーではなくテキストを切り替えるサンプルスクリプトをご紹介します。「地域ごとに最寄店舗の情報を表示したい」など、テキストを切り替えたいという場合に最適なサンプルスクリプトです。
デモ
まずはこちらのデモページをご覧ください。右上の「お電話でのお問合せはこちら」と表示された連絡先情報が、地域によって切り替わります。
準備するもの
- ・テキスト
- 地方切り替え用のテキスト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>