Геотаргетинг для лендинга

Геотаргетинг для лендингаПривет друзья. Сегодня буду размышлять на тему геотаргетинга для лендинга. Долго выбирал тему для статьи, так как хотел рассказать о чем-то особенном. В последние дни больше писал о социальных сетях, а сегодня хотелось написать о чем-то еще более полезном для повышения конверсии.

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

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

Наверняка, многие из вас уже используют геотаргетинг на своих посадочных страницах, но для многих, думаю, реализация подобного эффекта остается загадкой. Сегодня мы это поправим :)

Скрипт геотаргетинга для landing page

Для умельцев и людей "в теме", хочу сказать, что мы не будем выкачивать или покупать никаких баз данных с ip регионов и городов, а пойдем более простым путем - воспользуемся API Яндекс карт и jQuery. Сказано - сделано. Подключаем jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

А теперь API:

<script charset="utf-8" src="http://api-maps.yandex.ru/1.1/index.xml" type="text/javascript"></script>

Далее нам понадобятся базовые знания javascript. Информация о местоположении пользователя хранятся в объекте YMaps.location и нам доступны такие поля:

  • country - название страны.
  • region - название региона;
  • city - название города;

Вообще, доступно больше полей, но это основные, которые могут нам понадобиться. Я постараюсь показать несколько вариантов того, как можно использовать геотаргетинг, а вы по аналогии, если не очень разбираетесь в javascript уже сделаете под свои нужды. Так как я и сам, не очень знаю js, то буду рад поучиться у профи и получить конструктивную критику и комментарии по поводу того как улучшить скрипт.

Предлагаю начать с изменения номера телефона, в зависимости от региона, в котором находиться пользователь. Для примера рассмотрим несколько регионов, а именно, Московскую и Донецкую область. Если пользователь окажется из другого региона, то покажем третий номер, предназначенный как раз для такого случая.

<script>
    $(document).ready(function() {
        if (YMaps.location.region != '') {
            var youRegion = (YMaps.location.region);
            if (youRegion === "Донецкая область"){
                $('.contact p span').text('+3 06252 5 19 41');
            }
            else if (youRegion === "Московская область"){
                $('.contact p span').text('+7 449 000 00 00');
            }
            else {
                $('.contact p span').text('+0 000 000 00 00');
            }
        }
    });
</script>

Теперь постараюсь его немного объяснить. Итак, после того, как наша страничка открыта я пишу условие:

  • Если мы получили регион пользователя, то сохраним данные в переменную.
  • Если этот регион Донецкая область, то поместим в класс .contact > p > span заданный номер телефона для этого случая.
  • Если первое условие не выполнено и регион не Донецкая область, то проверить не Московская ли это область. Если Московская, то вывести номер с кодом +7 449, если нет, то все условия не выполнены и нужно показать номер по умолчанию.

Вот таким не хитрым способом можно показывать определенный номер телефона в зависимости о гео положения пользователя и тем самым увеличивать конверсию.

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

  • Бесплатная доставка по Москве и Московской области (Донецку и Донецкой области) и так далее.

Конечно, учесть все города достаточно накладно и проблематично. Кроме того, даже если учесть все основные города России, то как быстро такой скрипт будет работать? И нужно быть очень внимательным при проверке на ===. Если хотя бы один символ не совпадет, то выдаст результат по умолчанию

Еще раз повторюсь, если нужен город или страна, то просто меняем поля у объекта YMaps.location:

  • (YMaps.location.country): - Страна.
  • (YMaps.location.region); - Регион (область).
  • (YMaps.location.city); - Город.

В исходнике я приложил скрипт, описываемый в статье и вывел ваши координаты, для примера.

Скачать исходник

Вот такой простой скрипт для мелких нужд. Думаю, что можно ускорить процесс, если хранить название городов или регионов в массиве и делать выборку из него. Но сейчас старался делать так, чтоб было понятней. А как у вас реализован геотаргетинг. Поделитесь своими секретами и фишками. Спасибо. Пока!

68 комментариев

  1. Михаил

    Было бы интересннее, чтобы на лендинге отображалось название города, из которого заходит посетитель. Например, заходит человек из Нижнего Новгорода, и видит "Черенок для лопат с доставкой в Нижний Новгород".

    1. dimadv7

      Так в статье об этом и написано. Мы получили страну, город и регион. А что выводить - дело хозяйское, я показал на примере региона.

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

      • Бесплатная доставка по Москве и Московской области (Донецку и Донецкой области) и так далее.
  2. Михаил

    А еще про мультилендинг было бы интересно.

    1. dimadv7

      Да знаю, работаю над этим :) Думаю, скоро появится :) Чтобы ускорить написание статьи на определенную тематику, был создан этот раздел, в котором можно предложить тему для статьи.

  3. Николай

    Всё отлично Вы расписали, сам сейчас занимаюсь сайтостроением и частенько к Вам заглядую, за инфу большое спасибо. Но вот вопрос по геотаргетингу - как проверить на своём компьютере работает ли (то есть зайти "с украины" "с России") ?

    1. dimadv7

      Здравствуйте. Можно попросить друзей, знакомых с другого города (страны). Или можно попробовать через прокси другой страны.

  4. Михаил

    Достаточно поменять в Яндексе расположение.

  5. Артём

    Видел такую фичу на лендингах, как автоматические определение, конкретного адреса посетителя, когда он кликает на строку "адрес" ( сторка в лид форме). Что это такое ? Выдаёт адрес с точностью до квартиры.

    1. dimadv7

      Где ты такое видел? Не думаю, что это возможно, если ты сам сервису не оставлял уже когда-то адрес.

  6. Артём

    glow-pro.ru
    вот здесь

    1. dimadv7

      У меня ничего автоматически не подставляется в адрес... У тебя, наверное, просто вылезла подсказка. Ты в подобное поле где-то вводил свой адрес, вот браузер и запомнил. Такая же ситуация бывает и с e-mail адресами, логинами, реквизитами. Но сайт не имеет никакого отношения к этому. По умолчанию во всех инпутах это включено.

  7. Андрей

    Всё утро тыкаюсь, но так пока не додумал.
    Такая ситуация :
    На лп есть много форм заявок,каждая работает со своим обработчиком . Данные передаются POST . Но хотелось бы, что-бы вместе с вводимыми данными передавались и поля геотаргетинга ( страна,регион,город).
    Прикрутить к самому лп(скрывая css). - не вариант,конфликтуют библиотеки jquery .
    Но при отправки сообщения,на время с рефрешем открывается страница с обработчиком, вот на ней как раз работает скрипт,но как передать данные с неё в письмо?
    сохранение переменной - $username = $_POST['name'];
    передача переменой $msg .= "От кого: ".$username."\r\n";

    1. dimadv7

      Так а зачем тебе 2 библиотеки jQuery - оставь одну... Не понимаю в чем проблема? Не понимаю, что значит "Прикрутить к самому лп (скрывая css)"

  8. Андрей

    Если упростить вопрос: как передать эти данные методом пост?
    Может был подобный опыт

    1. dimadv7

      Ну смотри, в статье описано как сохранить в переменной и вывести в нужном месте. Вот и попробуй передать эти данные в параметр value в поле с type="hidden". А уже в обработчике их по аналогии с обычными полями отправлять. Или сохранить эти данные в сессию и так же в обработчике отправить, как и обычные данные полученные из полей.

    2. Андрей

      Это как раз всё понятно=)
      Но не как не дойдёт,в какой форме записать и передать значение Ваш регион (область): в value ?

    3. dimadv7

      А как вы уже пробовали?
      Что не получается?
      Например есть поле

      <input id="reg" value="">

      в скрипте сохраняем в переменную и заполняем value

      var youRegion == (YMaps.location.region); 
      $('#reg').val(youRegion);
      

      А после, ловим значение в обработчике, как и во всех остальных полях.

  9. Виталий

    Доброго дня!
    Хучу подменять номер телефона только для Москвы и Московской области для всех остальных по умолчанию. Вроде Ваш вариант хорошо и подходит для этих целей, но у меня всегда показывает что я из Москвы и области, хотя это не так, проверял через сторонние ресурсы.
    Помогите разобраться.

    1. dimadv7

      Да я вряд ли смогу помочь, ведь это яндекс так вас определяет. Подобных проблем не замечал, и никто не сообщал, о том, что не корректно определяет регион.

  10. Добрый день

    Пытаюсь вынести скрипт изменения номера телефона в зависимости от региона в отдельный файл - не работает. В документе работает, через подключенный файл не хочет. Может подскажите, как изладить?

  11. Макс

    Подскажите как присвоить значение переменной в PHP то что отдает нам Яндекс YMaps.location.city. То есть допустим у меня определился город он находится в переменной YMaps.location.city в javascript, как можно это значение подставить в переменную php чтобы дальше работать с БД?

    1. Евгений

      Используйте Ajax

  12. Даулет

    Здесь меняться только текст а как сделать чтобы поменялось и ссылка

    например

    <a href="tel://$geophone">$geophone</a>
  13. Света

    Подскажите куда этот код ставить

    $(document).ready(function() {
    if (YMaps.location.region != '') {
    var youRegion = (YMaps.location.region);
    if (youRegion === "Донецкая область"){
    $('.contact p span').text('+3 06252 5 19 41');
    }
    else if (youRegion === "Московская область"){
    $('.contact p span').text('+7 449 000 00 00');
    }
    else {
    $('.contact p span').text('+0 000 000 00 00');
    }
    }
    });

    1. dimadv7

      например, перед закрывающимся тегом body

  14. Сергей

    Здравствуйте, подскажите, как реализовать кнопку с подтверждением определившегося города. Т.е. при определении города выскакивает окно с вопросом, например: "Ваш город Москва?" и кнопка с подтверждением.

  15. Андрей

    Всем привет. Нужно было сделать геотаргетинг с заменой текста. Сделал все по инструкции https://smartlanding.biz/geotargeting-dlya-lendinga.html

    Все прекрасно работает. Заменяет 15 адресов в зависимости от области. НО, самую главную область, московскую, не определяет!!!
    То есть выставляю в яндекс "местоположение" область из заданных в скрипте, и адрес на сайте меняется, кроме московской. Из за чего может быть?

  16. Вася

    Круто то что надо. Я давно на страницу удаленной поддержки искал чтоб текст править по регионам ))) А как сделать чтоб это в файл сохранялось к примеру в txt на сервере. Скажем зашел пользователь на сайт и его город в текстовый файл сохранился ?

  17. Артем

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

    1. dimadv7

      Здравствуйте, можно. Для это вместо:

      $('.contact p span').text('+3 06252 5 19 41');

      попробуйте так:

      $('.contact p span').html('<img src="ссылка на изображение">');

      Не обязательно в .contact p span, а в любое нужное вам место.

  18. Артём

    Добрый день!
    Можно пожалуйста подробнее написать о том, как сделать так, чтобы обработчик вместе с именем и телефоном отправлял и город клиента. Заранее спасибо!

    1. Артём

      Кто-то может это подсказать?

    2. dimadv7

      Поместите город, в значение value скрытого поля, а затем обрабатывайте его по аналогии с остальными полями.

  19. Николай

    Здравствуйте. Скажите пожалуйста можно ли использовать API Google? Так как API Yandex для Украинских пользователей уже не работает, провайдеры закрыли доступ к Yandex. Подскажите пожалуйста как это сделать, буду очень благодарен.

    1. dimadv7

      Здравствуйте. Не сталкивался с этим, наверняка можно, но пока не разбирался в этом вопросе.

    2. Николай

      А посмотреть можете? Было бы очень к стати.

    3. dimadv7

      Насколько я понял, у них так не получится. Нужно сначала давать согласие, что ты разрешаешь отслеживать местоположение, а потом только получить координаты. А это не решает поставленную задачу.

      В вашем случае, получается, что только искать стороннее решение. Какие-то базы с ip адресами и на их основе определять положение.

    4. Николай

      Понял. Спасибо что посмотрели. Буду искать.

  20. Дмитрий

    Привет.
    Не селён в Яве. Как сделать чтобы весь текст был большим, к примеру Н2 ?

    1. dimadv7

      привет. Это и не в js задается, а в css:

      .className {
      font-size: 24px;
      }
      

      По аналогии сделай нужный размер.

  21. Андрей

    А как вставить ШОРТКОД?
    Мне нужно чтобы менялась контактная форма 7 в зависимости от региона,
    Я все облазил, не могу понять как ставить ШОРТКОД или контактную форму
    Если ставить текст, то эта запись
    $('.contact p span').text('+3 06252 5 19 41');
    Если ставить изображение, то эта
    $('.contact p span').html('');
    А как вставить шорткод [contact-form-7 id="8" title="Контактная форма 1"] контактной формы или саму контактную форму? Сайт на WordPress
    Помоги ПЖЛСТ!!!!!!

  22. Иван

    Раньше при смене местоположения в Яндексе менялся контент на сайте, теперь это больше не работает. При смене местоположение контент выдаётся для реального местоположения пользователя. Кто-нибудь знает как это можно поправить?

  23. Сергей

    Всё работает, но только не на кириллическом домене....( не могу понять в чем дело

  24. Максим

    Дмитрий приветствую ! Подскажи что не так делаю, не показывает на страницах, подключается через include_once но думаю дело не в этом.

        $(document).ready(function() {
            if (YMaps.location.region != '') {
                var youRegion = (YMaps.location.city);
                if (youRegion === "Санкт Петербург"){
                    $('.contact span').html('');
                } 
            }
        });
    
  25. Максим

    Вылавливаю так:

  26. Дмитрий Давыдов

    Максим, так а куда вы выводите результат? Не вижу. Вы сравнили регион и все, но не передали в $('.contact span') ничего. И подскажите есть ли ошибки в консоли? Сюда же нужно что-то передать, например, тот же регион:

    $('.contact span').html(youRegion);
  27. Максим

    $(document).ready(function() {
    if (YMaps.location.region != '') {
    var youRegion = (YMaps.location.city);
    if (youRegion === "Санкт Петербург"){
    $('.contact p span').html('');

    }
    }
    });

  28. Максим

    целый код не скинуть сюда почемуто

  29. Максим

    У меня там ссылка на баннер

    1. Дмитрий Давыдов

      Максим, я же показал как нужно, вы опять очищаете содержимое $('.contact p span')

  30. Максим

    Мне код сюда не вставить, копирую а он старый вставляет ))) Не работает не как ))

  31. Максим

    $('.contact span').html(Картинка тут с ссылкой); Не кто не чего не очищает ))

    1. Дмитрий Давыдов

      Максим, скиньте html и js мне на почту, я гляну. smart-landing@yandex.ru

  32. Максим

    Отправил, спасибо что помогаете

    1. Дмитрий Давыдов

      Максим, нужно было файлы прислать, а не просто разметку. В таком случае в консоли браузера есть ошибки? Если картинку заменить на текст он выводится? Может у вас просто в пути к картинке ошибка, вот и не работает? Потому как я просто заменил регион на свой "Донецк" и у меня подставляется картинка и никаких проблем нет.

      Вот картинка успешно подставилась, просто путь же к ней неверный: https://prnt.sc/xydaxs

  33. Максим

    У меня на сайте верный, без скрипта она отображается

    1. Дмитрий Давыдов

      Вот смотрите, я просто подставил картинку из интернета, все - работает: https://prnt.sc/xyz4vj

  34. Иван

    Дмитрий, а от версии апи зависит точность определения?

    1. Дмитрий Давыдов

      Выведите в консоль то, что у вас приходит в youRegion, что там написано?

  35. Kirill

    Здравствуйте. В этом скрипте у вас указаны регионы\города по которым делать подмену текста, а по которым нет.

    А как сделать скрипт который просто подставляет название города, откуда заходит посетитель) в текст?

    Например трафик идет со всех США. Перечислять города в скрипте утомительно, за и всех города то знаю только единицы - столицы... А если чел заходит их какого-нибудь города Бун, а его нет в списке подмены
    if (youRegion === "Бун"){
    $('.contact p span').text('Бун');

    как быть?)

    1. Дмитрий Давыдов

      "А как сделать скрипт который просто подставляет название города, откуда заходит посетитель) в текст?" Кирилл, здравствуйте. Просто подставлять то, что пришло в youRegion и выводить без проверки.

      $('.contact p span').text(youRegion);
      
  36. Дмитрий Давыдов

    Только предусмотрите вариант, когда регион не определился. То есть какой-то город по умолчанию чтобы был.

    1. Kirill

      И конечный скрипт будет таким... да?)

      $(document).ready(function() {
      if (YMaps.location.region != '') {
      var youRegion = (YMaps.location.region);
      $('.contact p span').text('youRegion');
      }

      И как же предусмотреть теперь вариант, когда надо подставить город по умолчанию...

    2. Kirill

      Дмитрий Давыдов, вернее такой:

      $(document).ready(function() {
      if (YMaps.location.region != 'youRegion') {
      $('.contact p span').text('youRegion');
      }
      });

    3. Дмитрий Давыдов

      Нет, сначала проверяете определился ли вообще регион. Если определился, то его и выводим его, если нет, то выводим регион по умолчанию.

  37. Влад

    Подскажите, при выводе города, можно как то ограничить одной областью?

    1. Влад

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

    2. Дмитрий Давыдов

      Влад, конечно, создаете список городов, которые поддерживаются или регионов и проверяете, если не принадлежит ему, то выводите значение по умолчанию.

Добавить комментарий