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

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

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

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

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

Скрипт геотаргетинга для 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); - Город.

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

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

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

43 комментария

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

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

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

      • Бесплатная доставка по Москве и Московской области (Донецку и Донецкой области) и так далее.
  2. А еще про мультилендинг было бы интересно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  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. например, перед закрывающимся тегом body

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    1. привет. Это и не в 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. Всё работает, но только не на кириллическом домене....( не могу понять в чем дело

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

 

© 2014 — 2020, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности