📍Как бесплатно определить местоположение посетителей вашего сайта с помощью Javascript?

Большинство веб-сайтов отображают один и тот же контент для всех посетителей — независимо от того, что они ищут или как они туда попали.

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

Почему я должен изменять содержимое веб-сайта в зависимости от местоположения посетителя?

Было бы неплохо показывать контент на разных языках для людей из разных стран.

Вы можете определить местоположение пользователя и показать цены в местной валюте. Таким образом, вашим посетителям никогда не придется искать обменные курсы. В большинстве случаев они заканчивают свои покупки. Кроме того, вы можете показывать время доставки в зависимости от местоположения посетителя.

Как насчет того, чтобы показывать людям рекламу, соответствующую их местоположению? Это кажется очевидной идеей, и она хорошо работает. С помощью кампаний с геотаргетингом вы можете увеличить количество посещений магазинов.

Предоставление персонализированного контента приводит к увеличению продаж.

Недавно мы опубликовали Веб-сайт с бесплатными виджетами статистики COVID-19 в реальном времени. Эти виджеты показывают информацию, локальную для посетителя, в зависимости от его местоположения.

Проверь их. Показывают ли виджеты статистику по вашей стране?

Как определить ваш сайт местонахождение посетителя?

Есть несколько способов сделать это:

• API геолокации
• API IP-геолокации
• Использовать конечную точку трассировки CloudFlare бесплатно

Геолокация

API геолокации позволяет посетителю веб-страницы делиться с вами своим местоположением. Пользователю отображается подсказка с вопросом, не хотят ли они поделиться своим местоположением с вашим сайтом. Вывод кода дает нам координаты.

{
  "location": {
    "lat": 33.3632256,
    "lng": -117.0874871
  },
  "accuracy": 20
}

В случае отрицательного ответа у вас нет возможности узнать местоположение пользователя.

API-интерфейсы IP-геолокации

Другой способ узнать местоположение посетителя — использовать платные сервисы из списка API, перечисленных на API-интерфейсы IP-геолокации .

Конечная точка трассировки Cloudflare

Я собираюсь показать вам, как определить местоположение пользователя бесплатно!

CloudFlare обслуживает страницы отслеживания на каждом сайте, размещенном на их домене, по адресу /cdn-cgi/trace конечная точка.

После отправки запроса на вывод должен выглядеть примерно так:

fl=xxxxx
h=www.cloudflare.com
ip=xxx.xxx.xxx.xxx
ts=1589224733.208
visit_scheme=https
uag=Mozilla/5.0 ...
colo=PRG
http=http/2
loc=SK
tls=TLSv1.3
sni=plaintext
warp=off

И, наконец, ниже приведен чистый Javascript, который анализирует выходные данные Cloudflare и извлекает IP-адрес и страну посетителя.

const countryCodeExpression = /loc=([\w]{2})/;
const userIPExpression = /ip=([\w\.]+)/;


function initCountry() {
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.timeout = 3000;
        xhr.onreadystatechange = function () {
            if (this.readyState == 4) {
                if (this.status == 200) {
                    countryCode = countryCodeExpression.exec(this.responseText)
                    ip = userIPExpression.exec(this.responseText)
                    if (countryCode === null || countryCode[1] === '' ||
                        ip === null || ip[1] === '') {
                        reject('IP/Country code detection failed');
                    }
                    let result = {
                        "countryCode": countryCode[1],
                        "IP": ip[1]
                    };
                    resolve(result)
                } else {
                    reject(xhr.status)
                }
            }
        }
        xhr.ontimeout = function () {
            reject('timeout')
        }
        xhr.open('GET', '', true);
        xhr.send();
    });
}

Определение местонахождения посетителя.

initCountry().then(result => console.log(JSON.stringify(result))).catch(e => console.log(e))


{"countryCode":"SK","IP":"xxx.xxx.xxx.xxx"}

Это все. Теперь вы можете отображать динамический контент на основе IP-адреса посетителя и геолокации.

Спасибо за чтение!