Привет друзья. Сегодня буду размышлять на тему геотаргетинга для лендинга. Долго выбирал тему для статьи, так как хотел рассказать о чем-то особенном. В последние дни больше писал о социальных сетях, а сегодня хотелось написать о чем-то еще более полезном для повышения конверсии.
Итак, давайте сначала поясню, что же такое геотаргетинг. Применимо к вебу, геотаргетинг - это метод выдачи посетителю содержимого сайта, соответствующего его географическому положению. Это значит, что если пользователь из Москвы, то ему показывается телефонный номер Московского офиса компании.
Это можно использовать и по-другому, например, менять адрес доставки, подгружать соответствующие картинки и полностью менять контент страницы. Конечно не все так просто, нужны определенные знания и необходимо понимать еще несколько моментов, о которых мы поговорим ниже.
Наверняка, многие из вас уже используют геотаргетинг на своих посадочных страницах, но для многих, думаю, реализация подобного эффекта остается загадкой. Сегодня мы это поправим :)
Скрипт геотаргетинга для 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); - Город.
В исходнике я приложил скрипт, описываемый в статье и вывел ваши координаты, для примера.
Вот такой простой скрипт для мелких нужд. Думаю, что можно ускорить процесс, если хранить название городов или регионов в массиве и делать выборку из него. Но сейчас старался делать так, чтоб было понятней. А как у вас реализован геотаргетинг. Поделитесь своими секретами и фишками. Спасибо. Пока!
59 комментариев
Было бы интересннее, чтобы на лендинге отображалось название города, из которого заходит посетитель. Например, заходит человек из Нижнего Новгорода, и видит "Черенок для лопат с доставкой в Нижний Новгород".
Так в статье об этом и написано. Мы получили страну, город и регион. А что выводить - дело хозяйское, я показал на примере региона.
А еще про мультилендинг было бы интересно.
Да знаю, работаю над этим :) Думаю, скоро появится :) Чтобы ускорить написание статьи на определенную тематику, был создан этот раздел, в котором можно предложить тему для статьи.
Всё отлично Вы расписали, сам сейчас занимаюсь сайтостроением и частенько к Вам заглядую, за инфу большое спасибо. Но вот вопрос по геотаргетингу - как проверить на своём компьютере работает ли (то есть зайти "с украины" "с России") ?
Здравствуйте. Можно попросить друзей, знакомых с другого города (страны). Или можно попробовать через прокси другой страны.
Достаточно поменять в Яндексе расположение.
Видел такую фичу на лендингах, как автоматические определение, конкретного адреса посетителя, когда он кликает на строку "адрес" ( сторка в лид форме). Что это такое ? Выдаёт адрес с точностью до квартиры.
Где ты такое видел? Не думаю, что это возможно, если ты сам сервису не оставлял уже когда-то адрес.
glow-pro.ru
вот здесь
У меня ничего автоматически не подставляется в адрес... У тебя, наверное, просто вылезла подсказка. Ты в подобное поле где-то вводил свой адрес, вот браузер и запомнил. Такая же ситуация бывает и с e-mail адресами, логинами, реквизитами. Но сайт не имеет никакого отношения к этому. По умолчанию во всех инпутах это включено.
Всё утро тыкаюсь, но так пока не додумал.
Такая ситуация :
На лп есть много форм заявок,каждая работает со своим обработчиком . Данные передаются POST . Но хотелось бы, что-бы вместе с вводимыми данными передавались и поля геотаргетинга ( страна,регион,город).
Прикрутить к самому лп(скрывая css). - не вариант,конфликтуют библиотеки jquery .
Но при отправки сообщения,на время с рефрешем открывается страница с обработчиком, вот на ней как раз работает скрипт,но как передать данные с неё в письмо?
сохранение переменной - $username = $_POST['name'];
передача переменой $msg .= "От кого: ".$username."\r\n";
Так а зачем тебе 2 библиотеки jQuery - оставь одну... Не понимаю в чем проблема? Не понимаю, что значит "Прикрутить к самому лп (скрывая css)"
Если упростить вопрос: как передать эти данные методом пост?
Может был подобный опыт
Ну смотри, в статье описано как сохранить в переменной и вывести в нужном месте. Вот и попробуй передать эти данные в параметр value в поле с type="hidden". А уже в обработчике их по аналогии с обычными полями отправлять. Или сохранить эти данные в сессию и так же в обработчике отправить, как и обычные данные полученные из полей.
Это как раз всё понятно=)
Но не как не дойдёт,в какой форме записать и передать значение Ваш регион (область): в value ?
А как вы уже пробовали?
Что не получается?
Например есть поле
в скрипте сохраняем в переменную и заполняем value
var youRegion == (YMaps.location.region); $('#reg').val(youRegion);А после, ловим значение в обработчике, как и во всех остальных полях.
Доброго дня!
Хучу подменять номер телефона только для Москвы и Московской области для всех остальных по умолчанию. Вроде Ваш вариант хорошо и подходит для этих целей, но у меня всегда показывает что я из Москвы и области, хотя это не так, проверял через сторонние ресурсы.
Помогите разобраться.
Да я вряд ли смогу помочь, ведь это яндекс так вас определяет. Подобных проблем не замечал, и никто не сообщал, о том, что не корректно определяет регион.
Пытаюсь вынести скрипт изменения номера телефона в зависимости от региона в отдельный файл - не работает. В документе работает, через подключенный файл не хочет. Может подскажите, как изладить?
Подскажите как присвоить значение переменной в PHP то что отдает нам Яндекс YMaps.location.city. То есть допустим у меня определился город он находится в переменной YMaps.location.city в javascript, как можно это значение подставить в переменную php чтобы дальше работать с БД?
Используйте Ajax
Здесь меняться только текст а как сделать чтобы поменялось и ссылка
например
Подскажите куда этот код ставить
$(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');
}
}
});
например, перед закрывающимся тегом body
Здравствуйте, подскажите, как реализовать кнопку с подтверждением определившегося города. Т.е. при определении города выскакивает окно с вопросом, например: "Ваш город Москва?" и кнопка с подтверждением.
Всем привет. Нужно было сделать геотаргетинг с заменой текста. Сделал все по инструкции https://smartlanding.biz/geotargeting-dlya-lendinga.html
Все прекрасно работает. Заменяет 15 адресов в зависимости от области. НО, самую главную область, московскую, не определяет!!!
То есть выставляю в яндекс "местоположение" область из заданных в скрипте, и адрес на сайте меняется, кроме московской. Из за чего может быть?
Круто то что надо. Я давно на страницу удаленной поддержки искал чтоб текст править по регионам ))) А как сделать чтоб это в файл сохранялось к примеру в txt на сервере. Скажем зашел пользователь на сайт и его город в текстовый файл сохранился ?
Здравствуйте, подскажите, можно ли вставить изображения разные, что бы определялось по городу разное, для рекламы нужно, если можно подскажите пожалуйста как
Здравствуйте, можно. Для это вместо:
$('.contact p span').text('+3 06252 5 19 41');попробуйте так:
$('.contact p span').html('<img src="ссылка на изображение">');Не обязательно в .contact p span, а в любое нужное вам место.
Добрый день!
Можно пожалуйста подробнее написать о том, как сделать так, чтобы обработчик вместе с именем и телефоном отправлял и город клиента. Заранее спасибо!
Кто-то может это подсказать?
Поместите город, в значение value скрытого поля, а затем обрабатывайте его по аналогии с остальными полями.
Здравствуйте. Скажите пожалуйста можно ли использовать API Google? Так как API Yandex для Украинских пользователей уже не работает, провайдеры закрыли доступ к Yandex. Подскажите пожалуйста как это сделать, буду очень благодарен.
Здравствуйте. Не сталкивался с этим, наверняка можно, но пока не разбирался в этом вопросе.
А посмотреть можете? Было бы очень к стати.
Насколько я понял, у них так не получится. Нужно сначала давать согласие, что ты разрешаешь отслеживать местоположение, а потом только получить координаты. А это не решает поставленную задачу.
В вашем случае, получается, что только искать стороннее решение. Какие-то базы с ip адресами и на их основе определять положение.
Понял. Спасибо что посмотрели. Буду искать.
Привет.
Не селён в Яве. Как сделать чтобы весь текст был большим, к примеру Н2 ?
привет. Это и не в 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
Помоги ПЖЛСТ!!!!!!
Раньше при смене местоположения в Яндексе менялся контент на сайте, теперь это больше не работает. При смене местоположение контент выдаётся для реального местоположения пользователя. Кто-нибудь знает как это можно поправить?
Всё работает, но только не на кириллическом домене....( не могу понять в чем дело
Дмитрий приветствую ! Подскажи что не так делаю, не показывает на страницах, подключается через include_once но думаю дело не в этом.
$(document).ready(function() { if (YMaps.location.region != '') { var youRegion = (YMaps.location.city); if (youRegion === "Санкт Петербург"){ $('.contact span').html(''); } } });Вылавливаю так:
Максим, так а куда вы выводите результат? Не вижу. Вы сравнили регион и все, но не передали в $('.contact span') ничего. И подскажите есть ли ошибки в консоли? Сюда же нужно что-то передать, например, тот же регион:
$('.contact span').html(youRegion);$(document).ready(function() {
if (YMaps.location.region != '') {
var youRegion = (YMaps.location.city);
if (youRegion === "Санкт Петербург"){
$('.contact p span').html('');
}
}
});
целый код не скинуть сюда почемуто
У меня там ссылка на баннер
Максим, я же показал как нужно, вы опять очищаете содержимое $('.contact p span')
Мне код сюда не вставить, копирую а он старый вставляет ))) Не работает не как ))
$('.contact span').html(Картинка тут с ссылкой); Не кто не чего не очищает ))
Максим, скиньте html и js мне на почту, я гляну. smart-landing@yandex.ru
Отправил, спасибо что помогаете
Максим, нужно было файлы прислать, а не просто разметку. В таком случае в консоли браузера есть ошибки? Если картинку заменить на текст он выводится? Может у вас просто в пути к картинке ошибка, вот и не работает? Потому как я просто заменил регион на свой "Донецк" и у меня подставляется картинка и никаких проблем нет.
Вот картинка успешно подставилась, просто путь же к ней неверный: https://prnt.sc/xydaxs
У меня на сайте верный, без скрипта она отображается
Вот смотрите, я просто подставил картинку из интернета, все - работает: https://prnt.sc/xyz4vj
Дмитрий, а от версии апи зависит точность определения?
Выведите в консоль то, что у вас приходит в youRegion, что там написано?