16.04.20

jQuery: подмена контента на сайте в зависимости от ГЕО

jQuery: подмена контента на сайте в зависимости от ГЕО

Ребят, всех приветствую! Вам, скорее всего попадалось такое, когда при заходе на какой-либо сайт, а скорее лендинг, показывался оффер с вашим городом. К примеру, купи китайскую мобилу в «и ваш город».

Подмена контента

Более того, таким скриптом можно подменять какие-то картинки, текста, телефоны и даже целые блоки. Другими словами, подмена контента на сайте в зависимости от ГЕО.

Думаю, подобное встречали и не раз. Это происходит как раз при помощи скрипта, который мы рассмотрим ниже.

Вдаваться в подробности как это все работает, считаю не нужным, а так как этот скрипт зависит напрямую от самого Яндекса – он свои секреты по ГЕО рассказывать не будет.

Подключение скрипта

Первым делом подключаем скрипт самого Яндекс и не забываем, что он идет после подключенной библиотеки Jquery. Просто сначала носки, а потом валенки, но не наоборот.

<script src="http://yastatic.net/jquery/2.1.1/jquery.min.js"></script>
<script src="http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU"></script>

Следом подключаем наш всемогущий скрипт.

window.onload = function() {

   // Указываем страну
   if (ymaps.geolocation.country == 'Россия') {
      jQuery("#country").show();
      jQuery("#no-country").hide();
   } else {
      jQuery("#country").hide();
      jQuery("#no-country").show();
   }

   // Указываем город
   if (ymaps.geolocation.city == 'Москва') {
      jQuery("#city").show();
      jQuery("#no-city").hide();
   } else {
      jQuery("#city").hide();
      jQuery("#no-city").show();
   }

}

Читайте также:


Далее, просто создаем четыре div с нужными ID (можно и классы), указываем их в скрипте выше и задаем им display: none

<!-- Показываем блок если страна совпадает -->
<div id="country">Россия-Матушка</div>
<!-- Не совпадает -->
<div id="no-country">В какой я стране то?</div>

<!-- Показываем блок если город совпадает -->
<div id="city">Наконец то я в Москве</div>
<!-- Не совпадает -->
<div id="no-city">Я похоже не в Москве</div>

Пример на Codepen

Как это работает можете посмотреть в прямом эфире на Codepen – по ссылке ниже.

Итог

Вот такое незамысловатое и простое решение, которое, скорее всего пока, Яндекс предоставляет бесплатно.

А на сегодня у меня все, до встречи в следующем гайде! С вами был Дмитрий!

Не забудь про опросник
Как зарабатываешь мешки с $ ?