Smartlanding

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

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

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

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

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

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

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

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

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

Поделитесь статьей в социальных сетях, чтобы не потерять

41 комментарий

  • Михаил

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

    Ответить
  • Михаил

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

    Ответить
  • dimadv7

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

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

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

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

    Ответить
  • Николай

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

    Ответить
  • dimadv7

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

    Ответить
  • Михаил

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

    Ответить
  • Артём

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

    Ответить
  • dimadv7

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

    Ответить
  • Артём

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

    Ответить
  • dimadv7

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

    Ответить
  • Андрей

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

    Ответить
  • dimadv7

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

    Ответить
  • Андрей

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

    Ответить
  • dimadv7

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

    Ответить
  • Андрей

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

    Ответить
  • dimadv7

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

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

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

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

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

    Ответить
  • Виталий

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

    Ответить
  • dimadv7

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

    Ответить
  • Добрый день

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

    Ответить
  • Макс

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

    Ответить
  • Евгений

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

    Ответить
  • Даулет

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

    например

    <a href="tel://$geophone">$geophone</a>
    Ответить
  • Света

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

    $(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');
    }
    }
    });

    Ответить
  • dimadv7

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

    Ответить
  • Сергей

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

    Ответить
  • Андрей

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

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

    Ответить
  • Вася

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

    Ответить
  • Артем

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

    Ответить
  • dimadv7

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

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

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

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

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

    Ответить
  • Артём

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

    Ответить
  • Артём

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

    Ответить
  • dimadv7

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

    Ответить
  • Николай

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

    Ответить
  • dimadv7

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

    Ответить
  • Николай

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

    Ответить
  • dimadv7

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

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

    Ответить
  • Николай

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

    Ответить
  • Дмитрий

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

    Ответить
  • dimadv7

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

    .className {
    font-size: 24px;
    }
    

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

    Ответить
  • Андрей

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

    Ответить

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