Как в Тильде определить город посетителя

Вы сможете определить страну, город, IP-адрес, вывести эти данные пользователю или передать в поля формы обратной связи

Пример

Ваша страна: %%%country_ru%%%
Ваша страна (EN): %%%country_en%%%
Ваш регион: %%%region_ru%%%
Ваш регион (EN): %%%region_en%%%
Ваш город: %%%city_ru%%%
Ваш город (EN): %%%city_en%%%
Ваш IP: %%%ip%%%

Инструкция


  1. Копируете скрипт;
  2. Устанавливаете внизу страницы, если используете на всем сайте, то устанавливайте в подвал;
  3. Если нужно выводить текст в кнопке или любом текстовом блоке, то просто ставите ключ*;
  4. Если нужно передавать данные в скрытые поля формы*, то ставите ключ* для форм;

*Ключи указаны в блоке для вставки кода
**Добавить Скрытое поле, вставить ключ в «Имя переменной»

Ключи для вставки в текстовые поля или кнопки


%%%region_en%%% - Регион на английском
%%%region_ru%%% - Регион на русском
%%%city_en%%% - Город на английском
%%%city_ru%%% - Город на русском
%%%country_en%%% - Страна на английском
%%%country_ru%%% - Страна на русском
%%%ip%%% - IP-адрес

Ключи для вставки в скрытые поля форм


region_en
region_ru
city_en
city_ru
country_en
country_ru
ip

Код примера


<!--
 * Name: Определяем гео-локацию посетителя в тильде
 * Description: Скрипт определяет страну, регион, город и ip-адрес посетителя сайта,
   эти данные можно отобразить в любом месте страницы или передать в форме обратной связи
 * Author: ANKU
 * URL: https://anku.one/geo
-->
<script>
    const STORAGE_KEY = 'TildaGeoDataKey'; // Имя записи в localStorage, можно изменить для тестирования
    const STORAGE_DAYS = 1; // Количество дней хранения данных в localStorage
    
    // Не менять код ниже этого комментария
    async function fetchGeoData(){try{let e=await fetch("https://geo.tildacdn.com/geo/full/");if(!e.ok)throw Error("Ошибка получения данных GeoAPI");return await e.json()}catch(n){return console.error("Ошибка при получении GeoAPI данных:",n),null}}function saveToStorage(e,n){let t=new Date;t.setDate(t.getDate()+STORAGE_DAYS),localStorage.setItem(e,JSON.stringify({data:n,expires:t.getTime()}))}function loadFromStorage(e){let n=localStorage.getItem(e);if(!n)return null;let t=JSON.parse(n);return new Date().getTime()>t.expires?(localStorage.removeItem(e),null):t.data}function replaceTextInNode(e,n){!e.classList?.contains("t264")&&"code"!==e.tagName?.toLowerCase()&&e.childNodes.forEach(e=>{if(e.nodeType===Node.TEXT_NODE){let t=e.nodeValue,r=!1;if(Object.keys(n).forEach(e=>{t.includes(e)&&(t=t.replace(e,n[e]),r=!0)}),r){let o=document.createElement("span");o.innerHTML=t,e.parentNode.replaceChild(o,e)}}else e.nodeType===Node.ELEMENT_NODE&&replaceTextInNode(e,n)})}function replaceTextKeys(e){let n={"%%%region_en%%%":e.region?.name_en||"","%%%region_ru%%%":e.region?.name_ru||"","%%%city_en%%%":e.city?.name_en||"","%%%city_ru%%%":e.city?.name_ru||"","%%%country_en%%%":e.country?.name_en||"","%%%country_ru%%%":e.country?.name_ru||"","%%%ip%%%":e.ip||""};replaceTextInNode(document.body,n)}function replaceFormInputValues(e){let n={region_en:e.region?.name_en||"",region_ru:e.region?.name_ru||"",city_en:e.city?.name_en||"",city_ru:e.city?.name_ru||"",country_en:e.country?.name_en||"",country_ru:e.country?.name_ru||"",ip:e.ip||""};document.querySelectorAll('form input[type="hidden"]').forEach(e=>{let t=e.getAttribute("name");n.hasOwnProperty(t)&&(e.value=n[t])})}async function functionAnKuGeoAPI(){let e=loadFromStorage(STORAGE_KEY);if(e)replaceTextKeys(e),replaceFormInputValues(e);else{let n=await fetchGeoData();n&&(saveToStorage(STORAGE_KEY,n),replaceTextKeys(n),replaceFormInputValues(n))}console.log("Хочешь скрипт определения гео-локации для Tilda, смотри эту статью: https://anku.one/geo ")}"loading"!==document.readyState?functionAnKuGeoAPI():document.addEventListener("DOMContentLoaded",()=>{functionAnKuGeoAPI()});
</script>

Дополнение

Данный скрипт можно адаптировать под выбор города посетителем, например, вам необходимо менять контактные данные в зависимости от выбранного города. Так же сохранять выбранный посетителем город, чтобы отображать корректные данные на вашем сайте.

Если есть подобные задачи, пишите!
Made on
Tilda