Как определить местоположение по IP адресу пользователя сайта через GTM

Определить местоположение по 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 необходимо:
  1. зайти в Переменные → Создать → Переменная уровня данных;
  2. в поле «Имя переменной уровня данных» указать «UIP»;
  3. в поле «Версия уровня данных» задать «Версия 2»;
  4. дать название переменной, к примеру, «ПУД — UIP» и закрепить за папкой, к примеру, «Определение местоположения пользователя — IP».
получения IP пользователя из DataLayer

Настройка получения IP пользователя из DataLayer в GTM

Благодаря данному импорту 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, '\$1') + "=([^;]*)"
  ));
  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, '\$1') + "=([^;]*)"
  ));
  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 необходимо:
  1. зайти в Теги → Создать → Пользовательский тег HTML;
  2. в поле HTML вставить код javascript;
  3. задать Триггер — просмотры страницы: All Pages;
  4. дать название тегу, к примеру, “DL — IP GEO” и закрепить за папкой, к примеру, “Определение местоположения пользователя – IP”.
На этом настройка по определению местоположению пользователя по IP адресу с помощью GTM завершена. Для того, чтобы проверить корректность настройки, необходимо открыть консоль разработчика в браузере -F12 и проверить наличие установленных cookie.
Понравилась статья? Поделись ей =)

Подписаться на email рассылку

Хотите быть в курсе новых инструкций и кейсов для вашей работы?

Подпишись на полезную рассылку об интернет-маркетинге


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *