Оглавлениение
Определить местоположение по IP адресу пользователя Вашего сайта можно различными способами, но в данной статье будет рассмотрено определение местоположения с помощью Google Tag Manager.
Единственный минус определения местоположения по IP адресу — сбор, хранение и поддержка в актуальном состоянии базы IP адресов с их географической привязкой. Поэтому, во избежании составления актуальной базы IP адресов с их территориальной привязкой, лучше всего воспользоваться специализированным сервисом, который не только составил такую базу, но и постоянно обновляет ее. Как правило, данные сервисы платные, но есть ряд и бесплатных с ограниченным числом обращений к базе данных. Если на Вашем сайте трафик менее 10 000 пользователей в сутки, то можно подобрать и бесплатный тариф. К примеру, такие условия есть у сервиса Sypex Geo, интеграция с которым и будет рассмотрена в данной статье.
Для чего и кому необходимо определять местоположения пользователя сайта по IP адресу?
Иногда, у владельцев сайтов, маркетологов или аналитиков, возникает необходимость определять местоположение пользователя своего сайта. Как правило, данная необходимость связана с отображением определенного контента на сайте для пользователей из разных городов, регионов и стран или же для передачи дополнительной информации вместе с заявкой/лидом с сайта и ее последующей статистической обработкой.
Как определить местоположение по IP с помощью GTM?
Для определения местоположения пользователя по IP адресу необходимо:
- определить IP адрес пользователя сайта;
- передать полученный IP в DataLayer GTM;
- запросить и получить ответ о местоположении пользователя с помощью REST API у сервиса Sypex Geo через Google Tag Manager.
Как получить IP адрес пользователя сайта и передать его в DataLayer для GTM?
Получить IP адрес пользователя сайта можно только на стороне сервера, с помощью не большой строчки php кода:
<?php echo $_SERVER['REMOTE_ADDR']; ?>
А для того, чтобы передать IP пользователя в DataLayer необходимо вышеприведенную строчку интегрировать в javascript код:
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event' : 'IP адрес пользователя',
'UIP' : '<?php echo $_SERVER['REMOTE_ADDR']; ?>'
});
</script>
, где event — название события. В примере указано: «IP адрес пользователя»,
UIP — это название переменной события, которая будет содержать IP адрес Вашего пользователя.
Полученный код javascript необходимо разместить в шаблоне Вашего сайта на всех его страницах.
Важно! Для корректной передачи данных в Google Tag Manager, необходимо размещать данный код javascript над кодом GTM.
Как запросить и получить ответ о местоположении пользователя с помощью REST API у сервиса Sypex Geo через Google Tag Manager?
Прежде чем приступать к запросу и получении информации от сервиса Sypex Geo, в Google Tag Manager необходимо настроить получение IP пользователя из DataLayer. Для этого, в GTM необходимо:
- зайти в Переменные → Создать → Переменная уровня данных;
- в поле «Имя переменной уровня данных» указать «UIP»;
- в поле «Версия уровня данных» задать «Версия 2»;
- дать название переменной, к примеру, «ПУД — UIP» и закрепить за папкой, к примеру, «Определение местоположения пользователя — IP».
Благодаря данному импорту IP пользователя сайта в Google Tag Manager теперь можно передать его в код javascript:
var uip = {{ПУД - UIP}};
, где {{ПУД — UIP}} — название переменной уровня данных, которая была настроена выше.
Далее необходимо разобраться с API рассматриваемого сервиса Sypex Geo и написать javascript код для запроса, получения, сохранения информации с последующей её обработкой.
REST API сервиса Sypex Geo
Сервис Sypex Geo предлагает несколько вариантов API https://sypexgeo.net/ru/api/. Для написания данной статьи был выбран формат JSON, как самый подходящий для работы с javascript.
При работе с этим форматом API для запроса и получения информации используется ссылка вида: https://api.sypexgeo.net/json/{ip_пользователя}, по которой возвращается вся доступная информация по запрашиваемому IP адресу.
Поэтому, чтобы отправить запрос с помощью javascript кода в виде ссылки, используется следующий код:
var geoIpData = new XMLHttpRequest();
geoIpData.open('GET', '//api.sypexgeo.net/json/' + uip, true);
geoIpData.send();
, где uip — значение IP пользователя, которое было получено на предыдущем шаге.
После этого необходимо удостовериться в корректности ответа запрашиваемого адреса и спарсить интересующие нас значения. Для этого используется следующий код javascript:
geoIpData.onreadystatechange = function() {
if (geoIpData.readyState != 4) return;
if (geoIpData.status != 200) {
console.log(geoIpData.status + " " + geoIpData.statusText);
} else {
var json = geoIpData.responseText;
var parse = JSON.parse(json);
var geo_ip_country = parse.country.name_ru;
var geo_ip_city = parse.city.name_ru;
//Бонусом можно получить след. информацию: численность населения, долгота и широта
var geo_ip_city_population = parse.city.population;
var geo_ip_city_lat = parse.city.lat;
var geo_ip_city_lon = parse.city.lon;
};
}
, где в первой части кода происходит проверка ответа адреса сервис Sypex Geo. Если код ответа запрашиваемой страницы 200 OK, т.е страница доступна, то переходим ко второй части кода — подготовка к парсингу JSON формата.
Теперь для получения интересующего значения по ссылке для запрашиваемого IP адреса, необходимо в коде javascript указывать parse.{название_значения}, к примеру, parse.country.name_ru.
Разобравшись с REST API сервиса Sypex Geo: запросом и получением от него ответа, теперь необходимо определить где хранить получаемую информацию. Лучшее место для этого — cookie. Для этого необходимо использовать следующий код:
var d = new Date(); d.setTime(d.getTime()+1800000); var expires = "expires="+d.toGMTString(); document.cookie = "geo_ip_country_name=" + geo_ip_country + "; " + expires + "; path=/"; document.cookie = "geo_ip_city_name=" + geo_ip_city + "; " + expires + "; path=/"; document.cookie = "geo_ip_city_population=" + geo_ip_city_population + "; " + expires + "; path=/"; document.cookie = "geo_ip_city_lat=" + geo_ip_city_lat + "; " + expires + "; path=/"; document.cookie = "geo_ip_city_lon=" + geo_ip_city_lon + "; " + expires + "; path=/";
, где значение 1800000 — это срок хранения cookie в браузере пользователя, которое задается в мс и равно 30 минутам.
В итоге для определение местоположения пользователя по IP адресу с помощью сервиса Sypex Geo мы получаем следующий код:
<script type="text/javascript">
var uip = {{ПУД - UIP}};
var geoIpData = new XMLHttpRequest();
geoIpData.open('GET', '//api.sypexgeo.net/json/' + uip, true);
geoIpData.send();
geoIpData.onreadystatechange = function() {
if (geoIpData.readyState != 4) return;
if (geoIpData.status != 200) {
console.log(geoIpData.status + " " + geoIpData.statusText);
} else {
var json = geoIpData.responseText;
var parse = JSON.parse(json);
var geo_ip_country = parse.country.name_ru;
var geo_ip_city = parse.city.name_ru;
var geo_ip_city_population = parse.city.population;
var geo_ip_city_lat = parse.city.lat;
var geo_ip_city_lon = parse.city.lon;
var d = new Date();
d.setTime(d.getTime()+1800000);
var expires = "expires="+d.toGMTString();
document.cookie = "geo_ip_country_name=" + geo_ip_country + "; " + expires + "; path=/";
document.cookie = "geo_ip_city_name=" + geo_ip_city + "; " + expires + "; path=/";
document.cookie = "geo_ip_city_population=" + geo_ip_city_population + "; " + expires + "; path=/";
document.cookie = "geo_ip_city_lat=" + geo_ip_city_lat + "; " + expires + "; path=/";
document.cookie = "geo_ip_city_lon=" + geo_ip_city_lon + "; " + expires + "; path=/";
};
}
</script>
Полученный код можно уже размещать в Google Tag Manager, но он будет срабатывать каждый раз при обновлении или посещения новой страницы и отправлять запросы в сервис Sypex Geo. Что в свою очередь, сделает нагрузку на данный сервис из-за «мусорных» запросов, и к тому же так можно быстро исчерпать лимит в 10 000 обращений. Поэтому лучше всего вызывать данный код один раз на сессию. Это можно сделать следующим образом:
<script type="text/javascript">
function getCookie(geo_ip) {
var matches = document.cookie.match(new RegExp(
"(?:^|; )" + geo_ip.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\\') + "=([^;]*)"
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
if (typeof getCookie("geo_ip") === 'undefined') {
//Здесь разместить код, который необходимо вызвать один раз на сессию
}
var d = new Date();
d.setTime(d.getTime()+1800000);
var expires = "expires="+d.toGMTString();
document.cookie = "geo_ip=set; "+expires+"; path=/";
</script>
, где в function getCookie(geo_ip) происходит поиск cookie под названием geo_ip в браузере пользователя.
Если cookie с таким названием не найдена, то запускается следующий шаг — в нашем случаи должно происходить обращение к сервису Sypex Geo для определения местоположения пользователя по IP адресу. После чего мы устанавливаем cookie под названием geo_ip в браузер пользователя на 30 минут, что в свою очередь будет блокировать вызов повторного обращения к сервису Sypex Geo при обновлении или посещении новой страницы.
Если cookie с таким названием будет найдена, то обращения к сервису Sypex Geo происходить не будет.
Теперь будем определить местоположение по IP адресу пользователя сайта через GTM
Для того, чтобы определить местоположение пользователя по IP адресу с помощью Google Tag Manager необходимо в нем разметить следующий код:
<script type="text/javascript">
function getCookie(geo_ip) {
var matches = document.cookie.match(new RegExp(
"(?:^|; )" + geo_ip.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\\') + "=([^;]*)"
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
if (typeof getCookie("geo_ip") === 'undefined') {
var uip = {{ПУД - UIP}};
var geoIpData = new XMLHttpRequest();
geoIpData.open('GET', '//api.sypexgeo.net/json/' + uip, true);
geoIpData.send();
geoIpData.onreadystatechange = function() {
if (geoIpData.readyState != 4) return;
if (geoIpData.status != 200) {
console.log(geoIpData.status + " " + geoIpData.statusText);
} else {
var json = geoIpData.responseText;
var parse = JSON.parse(json);
var geo_ip_country = parse.country.name_ru;
var geo_ip_city = parse.city.name_ru;
var geo_ip_city_population = parse.city.population;
var geo_ip_city_lat = parse.city.lat;
var geo_ip_city_lon = parse.city.lon;
var d = new Date();
d.setTime(d.getTime() + 1800000);
var expires = "expires=" + d.toGMTString();
document.cookie = "geo_ip_country_name=" + geo_ip_country + "; " + expires + "; path=/";
document.cookie = "geo_ip_city_name=" + geo_ip_city + "; " + expires + "; path=/";
document.cookie = "geo_ip_city_population=" + geo_ip_city_population + "; " + expires + "; path=/";
document.cookie = "geo_ip_city_lat=" + geo_ip_city_lat + "; " + expires + "; path=/";
document.cookie = "geo_ip_city_lon=" + geo_ip_city_lon + "; " + expires + "; path=/";
};
}
}
var d = new Date();
d.setTime(d.getTime()+1800000);
var expires = "expires="+d.toGMTString();
document.cookie = "geo_ip=set; "+expires+"; path=/";
</script>
Для этого, GTM необходимо:
- зайти в Теги → Создать → Пользовательский тег HTML;
- в поле HTML вставить код javascript;
- задать Триггер — просмотры страницы: All Pages;
- дать название тегу, к примеру, “DL — IP GEO” и закрепить за папкой, к примеру, “Определение местоположения пользователя – IP”.
На этом настройка по определению местоположению пользователя по IP адресу с помощью GTM завершена.
Для того, чтобы проверить корректность настройки, необходимо открыть консоль разработчика в браузере -F12 и проверить наличие установленных cookie.
