Создание сайтов. Урок 1. Геолокация на сайте.

Геолокация — определение реального географического местоположения электронного устройства, например радиопередатчика, сотового телефона или компьютера, подключённого к Интернету.

Геолокация - одна из важнейших фишек в современной веб разработке, поэтому она часто применяется при создании сайтов. Часто пользователи негативно относятся к тому, что их местоположение становится известным системе, но на самом деле, здесь нет ничего плохого. Безобидное использование геолокации позволяет максимально клиентоориентировать сайт. Поэтому геолокацию стоит применять для текущих задач:

Изначально геолокация имела широкое применение в сочетании с различными сервисами картографии. Определение места пользователя позволяло быстро выстраивать маршруты и строить дополнительный функционал к сайту на основе этих данных.

Google и Yandex карты. Геолокация через сервисы картографии

Эти сервисы позволяют получить полные и точные данные о местах и связать это с вашей текущей геолокацией. Отличный инструмент для отраслевых решений. Ярким примером того, как мы использовали сервисы Google карт для построения марштуров, была компания БСК. Это крупный бетонный завод, поставляющий бетон и другую продукцию в регионы Кузбасса. Специально для них мы разработали сервис, который определял текущую геолокацию и просчитывал расстояние доставки бетона до конечного потребителя. Сервис стал очень популярным, так как позволял учитывать пробки, расход топлива и прочие условия доставки. Подобные фишки существенно повышают качество ресурса и любовь со стороны пользователей. При этом очень удобно выстроены SDK для проектов, которые структурированы под различные задачи. Единственный весомый минус - это платные сервисы. Минимальное использование за год для компаний будет стоить порядка 120 тысяч рублей.

Если речь не идет о применении карт, и при этом требуется определить геолокацию пользователя, то многие начинают применять "старые" методы. Одним из таких является подключение базы IP адресов и анализ данных с применением PHP. Минусы такого метода очевидны. Базы отнюдь не полные, требуют постоянного обновления, а значит точность такой геолокации будет не совсем высокой. Более полные базы - платные.

Мы знаем способ, как сделать это бесплатно, быстро и иметь возможность работать с геоданными по всему сайту, не привязываясь к картам и без непосредственной интеграции с каким-либо сервисом. Для этого нам потребуется js и json.

При загрузке вашего веб ресурса в коде посылается запрос бесплатному сервису https://ipinfo.io. Результатом запроса является набор данных json (параметр и значение), содержащий все необходимое для работы с геоданными.

get("https://ipinfo.io", function (response) {

   //работа с json данными

}, "jsonp");

Полученный результат после обработки можно передать дальше и связать с PHP кодом, js кодом и прочим. Можно использовать параметры даже как CSS классы, которые будут отвечать за способ отображения контента и т д. Эта методология позволяет бесплатно и очень точно определить местоположение пользователя и использовать эти данные по назначению.

Где применяются геоданные пользователя на сайте

Есть множество вариантов, как можно применить данные пользователя о его местоположении. Самые распространенные задачи, приведены ниже:

• определение города, из которого приходит обращение пользователя. Это влияет как на стоимость и условия доставки товаров и услуг, если речь идет об интернет магазинах, так и на возможность работы компании в регионе в целом.
• самому бизнесу важно знать с какого региона идет максимальный эффект, поэтому для развития компании и улучшения взаимодействия с клиентом хранить информацию о переходах крайне важно. Другое дело, что как правило это излишне, ведь подобный функционал доступен в различных метриках, которые не составляет труда подключить к своему сайту.
• создание специальных предложений. Тут все просто и понятно. Если ваша деятельность осуществляется в различных регионах, но у вас действуют узкоспециализированные акции, то подобный инструмент отлично поможет.
• смена языка. Зачастую, сайты, контент которых доступен на разных языках делают в нескольких версиях. В одну папку на сервере кладут версию сайта на русском языке, в другую на английском и т д. Затем создают кнопки переключения языка. Действенный способ, но он не единственный. Можно с помощью геолокации получать параметр, отвечающий за выборку языка. Затем передавать этот параметр коду и менять язык сайта автоматически. Таким образом, сайт будет меньше весить и занимать места на сервере. Все изменения будут проводиться в одном месте, при этом проект будет легче масштабировать.
• изменение контента, структуры, дизайна и функционала сайта в зависимости от региона. Самый современный способ применения геолокации на своем веб ресурсе.

Последние два пункта мы применяем на нашем официальном сайте vasga.com. Мы создаем сайты, пишем программное обеспечение, занимаемся разработкой программ виртуальной реальности и прочим по всему миру. Поэтому нам важно иметь мультиязычный сайт. Также у нас есть определенный контент, доступный клиентам из разных регионов (Например, акции и специальные предложения от VASGA как правило направлены на конкретную целевую аудиторию.).

Получив параметры json, мы передаем их PHP коду, JS коду, а также размещаем специальные параметры в корневой элемент структуры сайта с ID #VASGA. Все это дает нам возможность трансформировать сайт так, как нам это необходимо. Это максимальная клиентоориентированность, доступная на данный момент на самых современных веб технологиях.

Ниже представлен код, в котором мы получаем и используем значения геоданных пользователя. Как видно из кода, мы не храним данные пользователя даже на уровне cookies. Нам это не нужно. Давайте подробно рассмотрим приведенный код.

$(document).ready(function() {

function getLanguage() {
   $.get( "https://ipinfo.io" , function (response) {
      if ( response.country == "RU" ) {
         setLanguage("rus", "auto");
      } else {
         setLanguage("eng", "auto");
      }
   }, "jsonp");	
}

getLanguage();

$('.language').click( function () {
   if ( $(this).hasClass("active") == false ) {
      $('.language').removeClass("active");
      $(this).addClass("active");
      var language = $(this).data("lang");
      setLanguage(language, "manual");
   }
});

function setLanguage (language, mode) {
   $.ajax({
      type: "POST",
      url: "setLanguage.php",
      data: "lang=" + language + "&mode=" + mode,
      cache: false,
      success: function(response) {
         if ( ($('#VASGA').data("preloading") == "in-process") || (mode == "manual") ) 
         location.reload();
      }
   });
}

});

Функция getLanguage() посылает запрос и получает json данные, содержащие значения страны, города, точные координаты и прочее. У нас на данный момент на сайте доступно два языка: русский и английский. Поэтому делая простую проверку параметра response.country мы передаем два параметра в функцию установки языка setLanguage("rus", "auto"), где первый параметр - это само значение языка, второй параметр имеет два значения auto и manual и отвечает за установку языка в автоматическом(заходя на сайт, происходит определение языка) или ручном режиме (пользователь выбирает язык, нажимая на соответствующие кнопки на сайте с классом language).

Функция setLanguage (language, mode) посылает асинхронный (AJAX) запрос на PHP скрипт, передавая два параметра (язык и способ его установки). Если все проходит гладко, то корневой элемент сайта с ID #VASGA получает необходимый параметр.

Вот так выглядит PHP скрипт.

<? if ($_SERVER["REQUEST_METHOD"] == "POST") {
   session_start();
   if ((in_array($_POST["lang"], ["rus", "eng"])) && (in_array($_POST["mode"], ["manual", "auto"]))) {
      $lang = $_POST["lang"];
      $mode = $_POST["mode"];
		
      switch ($mode) {
         case "manual":
            unlink($_SESSION["chosen_language"]);
            $_SESSION["chosen_language"] = [$lang, $mode];
         break;
         case "auto":
            if ((isset($_SESSION["chosen_language"]) == false) || ($_SESSION["chosen_language"][1] != "manual")) {
               $_SESSION["chosen_language"] = [$lang, $mode];
            }
         break;
         default: exit();
      }
   } else {exit();}
} else {exit();}
?>

Скрипт проверяет режим установки. Режим Auto устанавливается только один раз при посещении сайта и хранится пока действует $_SESSION["chosen_language"]. Параметр сессии хранит значения языка и режима установки так, что при повторном входе или посещении других страниц сайта языковая раскладка не меняется.

Это наш первый урок из цикла курсов "Создание сайтов". Благодарим за внимание! Создавайте качественные сайты вместе с VASGA.