Содержание
Ребят, всех приветствую! Вам, скорее всего попадалось такое, когда при заходе на какой-либо сайт, а скорее лендинг, показывался оффер с вашим городом. К примеру, купи китайскую мобилу в «и ваш город».
Подмена контента
Более того, таким скриптом можно подменять какие-то картинки, текста, телефоны и даже целые блоки. Другими словами, подмена контента на сайте в зависимости от ГЕО.
Думаю, подобное встречали и не раз. Это происходит как раз при помощи скрипта, который мы рассмотрим ниже.
Вдаваться в подробности как это все работает, считаю не нужным, а так как этот скрипт зависит напрямую от самого Яндекса – он свои секреты по ГЕО рассказывать не будет.
Подключение скрипта
Первым делом подключаем скрипт самого Яндекс и не забываем, что он идет после подключенной библиотеки 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();
}
}
Читайте также:
- GEO: автоопределение города и вывод информации по условию jQuery
- Как с помощью jQuery добавить атрибут к элементу при клике
- Плавная прокрутка к якорю jquery со смещением и скоростью анимации
Далее, просто создаем четыре div
с нужными ID
(можно и классы), указываем их в скрипте выше и задаем им display: none
<!-- Показываем блок если страна совпадает -->
<div id="country">Россия-Матушка</div>
<!-- Не совпадает -->
<div id="no-country">В какой я стране то?</div>
<!-- Показываем блок если город совпадает -->
<div id="city">Наконец то я в Москве</div>
<!-- Не совпадает -->
<div id="no-city">Я похоже не в Москве</div>
Пример на Codepen
Как это работает можете посмотреть в прямом эфире на Codepen
– по ссылке ниже.
codepen.io/CmsWp/pen/gOaPqPd
Итог
Вот такое незамысловатое и простое решение, которое, скорее всего пока, Яндекс предоставляет бесплатно.
А на сегодня у меня все, до встречи в следующем гайде! С вами был Дмитрий!