Ограничение контента по стране на отдельных страницах сайта uCoz с помощью JavaScript

Введение

Иногда клиенту нужно ограничить доступ не ко всему сайту, а только к конкретным элементам страницы. Это может быть форма оплаты, кнопка заказа, блок доставки, скачивание файла или любой другой фрагмент контента.

В uCoz есть системные ограничения по странам, но они работают сразу на весь сайт. Если включить такую блокировку, доступ будет закрыт ко всем страницам без исключений. Для многих задач это слишком жёстко.

В таких случаях подходит JavaScript решение, которое работает точечно и применяется только там, где это действительно нужно.

Важно понимать заранее. Это не серверная защита. Код выполняется в браузере пользователя. Он подходит для UI ограничений, уведомлений и соблюдения формальных требований, но не защищает от VPN и отключенного JavaScript.

Что делает этот скрипт

Данный скрипт решает конкретную задачу:

• Определяет страну пользователя по IP адресу.
• Проверяет, разрешён ли показ контента для этой страны.
• Если страна запрещена, заменяет содержимое блока аккуратным уведомлением.
• Остальная часть страницы продолжает работать без изменений.

Ключевой момент:

• Скрипт не влияет на весь сайт, не перехватывает страницу целиком и не показывает глобальных баннеров.

Как определяется страна пользователя

Определение страны происходит через публичный GeoIP сервис. Он возвращает:

• код страны по стандарту ISO 3166-1 alpha-2;
• название страны.

Для работы не требуется регистрация, API ключи или отдельная настройка сайта. Запрос выполняется напрямую из браузера.

Принцип работы на практике

Логика выглядит так:

1. Страница загружается.
2. JavaScript получает страну пользователя.
3. Скрипт ищет на странице элементы с атрибутом data-geo-hide.
4. Если страна пользователя указана в этом атрибуте, контент блока заменяется уведомлением.
5. Если страна не совпадает, блок остаётся без изменений.

Готовый скрипт для uCoz

Ниже приведён полностью готовый код. Его достаточно вставить на страницу один раз:

<style>
 .geo-inline-note {
 padding: 14px 16px;
 border-radius: 14px;
 background: rgba(17, 24, 39, .06);
 border: 1px solid rgba(17, 24, 39, .14);
 font: 14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
 color: #111827;
 }
 .geo-inline-note b {
 font-weight: 700;
 }
 .geo-inline-note .geo-inline-title {
 margin: 0 0 6px;
 font-size: 16px;
 }
 .geo-inline-note .geo-inline-sub {
 margin: 0;
 opacity: .9;
 }
 .geo-inline-note .geo-inline-meta {
 margin-top: 10px;
 font-size: 12px;
 opacity: .75;
 }
</style>

<script>
(function () {
 "use strict";

 var COUNTRY_RU = {
 RU: "Россия",
 UA: "Украина",
 BY: "Беларусь",
 KZ: "Казахстан",
 MD: "Молдова",
 RO: "Румыния",
 PL: "Польша",
 DE: "Германия",
 FR: "Франция",
 IT: "Италия",
 ES: "Испания",
 GB: "Великобритания",
 US: "США",
 CA: "Канада",
 TR: "Турция",
 IL: "Израиль",
 GE: "Грузия",
 AM: "Армения",
 AZ: "Азербайджан",
 LV: "Латвия",
 LT: "Литва",
 EE: "Эстония",
 CZ: "Чехия",
 SK: "Словакия",
 BG: "Болгария"
 };

 function escapeHtml(s) {
 return String(s).replace(/[&<>"']/g, function (c) {
 return ({ "&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;" })[c];
 });
 }

 function getGeo() {
 return fetch("https://ipapi.co/json/", { cache: "no-store" })
 .then(function (r) { return r.json(); })
 .then(function (d) {
 return {
 code: d && d.country_code ? String(d.country_code).toUpperCase() : "",
 name: d && d.country_name ? String(d.country_name) : ""
 };
 });
 }

 function normalizeCountry(geo) {
 var code = geo.code || "??";
 var name = geo.name || COUNTRY_RU[code] || "Неизвестная страна";
 return { code: code, name: name };
 }

 function renderPlaceholder(node, geo) {
 node.innerHTML =
 '<div class="geo-inline-note">' +
 '<p class="geo-inline-title">⛔ Контент недоступен в вашем регионе.</p>' +
 '<p class="geo-inline-sub">Доступ для страны <b>' +
 escapeHtml(geo.name) + '</b> (' + escapeHtml(geo.code) + ') ограничен.</p>' +
 '<div class="geo-inline-meta">Страна определяется по IP адресу.</div>' +
 '</div>';
 }

 function onReady(fn) {
 if (document.readyState === "loading") {
 document.addEventListener("DOMContentLoaded", fn);
 } else {
 fn();
 }
 }

 onReady(function () {
 var nodes = document.querySelectorAll("[data-geo-hide]");
 if (!nodes.length) return;

 getGeo().then(function (geoRaw) {
 var geo = normalizeCountry(geoRaw);
 if (!geo.code || geo.code === "??") return;

 nodes.forEach(function (node) {
 var list = String(node.getAttribute("data-geo-hide") || "")
 .split(",")
 .map(function (x) { return x.trim().toUpperCase(); })
 .filter(Boolean);

 if (list.indexOf(geo.code) !== -1) {
 renderPlaceholder(node, geo);
 }
 });
 });
 });

})();
</script>

Как применять этот скрипт на странице

Чтобы ограничить конкретный блок, достаточно добавить атрибут data-geo-hide.

Пример:

<div data-geo-hide="RU,BY">
 <h3>Онлайн оплата.</h3>
 <button>Оплатить заказ.</button>
</div>

В этом примере:

• пользователи из RU и BY увидят уведомление о недоступности контента;
• пользователи из других стран увидят оригинальный блок.

Таким образом можно ограничивать любое количество элементов на странице.

Какие коды стран использовать

В атрибуте data-geo-hide используются двухбуквенные коды стран ISO 3166-1 alpha-2.

Примеры часто используемых кодов:

• RU Россия.
• UA Украина.
• BY Беларусь.
• KZ Казахстан.
• PL Польша.
• DE Германия.
• US США.

Если нужно, список кодов можно расширять без изменения логики скрипта.

Куда вставлять код в uCoz

Есть несколько корректных вариантов:

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

Главное правило:

• Код вставляется один раз, а сами ограничения задаются через атрибуты data-geo-hide.

Ограничения решения

Важно понимать границы применения:

• JavaScript можно отключить.
• VPN меняет страну пользователя.
• Это не серверная блокировка.

Для блокировки всего сайта по странам следует использовать системные инструменты uCoz или внешние прокси сервисы.

Заключение

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

Он не ломает шаблоны, не влияет на SEO всего сайта, легко настраивается и даёт полный контроль над тем, какой контент и для каких стран будет показан.

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