Ставим правильные ссылки на телефонные номера

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

Сейчас же, пользователи сёрфят в интернете и звонят с одного и того же устройства. Это открывает возможность добавить ссылку на звонок — создать HTML-номер телефона, по которому можно кликать.

Как работают кликабельные ссылки

Сделать номер телефона кликабельным легко с помощью HTML5, который включает в себя специализированный протокол tel: .

Браузеры по-разному интерпретируют этот протокол. Некоторые открывают номернабиратель вашего телефона и добавляют номер на дисплей, ожидая, пока вы нажмете кнопку вызова. Другие сразу делают звонок, а третьи спрашивают что делать.

При клике по такой ссылке на десктопе с установленным приложением Skype (или аналогичным) браузер запросит у вас подтверждение на открытие внешней программы.

Добавление на сайт

Вставьте следующий код в нужное место вашего сайта для показа кликабельной ссылки на телефон:

Если вместо телефона вы хотите видеть ссылку с текстом «Позвонить», то код будет таким:

При щелчке на такую ссылку откроется номернабиратель вашего устройства (планшет, телефон).

Добавочный номер

Многие телефоны имеют добавочные номера, чтобы их указать, необходимо использовать разделитель P , который добавит секундную задержку между набором основного и добавочного номеров:

Если добавочный номер нужно вводить в тональном режиме, используйте разделитель w вместо p .

Код страны

Коды стран могут быть добавлены в телефонный номер при помощи символа + перед самим номером. Например, для России ( +7 ) это будет выглядеть так:

Микроразметка под SEO

Одна из самых приятных плюшек, когда при поиске местных компаний Google в результатах поиска выдает номер телефона, по которому можно кликнуть.

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

 
Рога и Копыта
 Телефон: +7 (234) 567-890 
 

Ссылки

Источник

Как сделать кликабельный номер телефона на сайте

Когда пользователь может в один клик по номеру телефона сделать звонок, это в плюс и ему, и вам. Он тратит минимум усилий и времени, чтобы вам дозвониться, а вы получаете +1 целевой звонок. Естественно, это относится к мобильным устройствам.

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

HTML-код

За гипертекст (возможность текста в коде HTML включать в себя гиперссылку) отвечает тег . . Атрибут href=”” отвечает за то, куда будет направлен клиент — внутри кавычек указывается адрес страницы или действие.

За автоматический набор номера по клику отвечает параметр tel:ХХХ, где XXX — номер телефона без пробелов и тире.

Третий пример тоже без особых усилий становится гипертекстом. При этом сохраняются его изначальные стили:

Сайт на WordPress

Для Вордпресса есть специальный плагин CallPhone’r. Этот модуль выводит на каждой странице сайта иконку, при нажатии на которую мобильное устройство переходит в режим вызова.

Там же есть возможность настройки по времени отображения иконки. Это позволит не получать звонки от клиентов в нерабочее время.

Сайт на mottor (LPmotor)

В этом случае выделите текст телефона в блоке и нажмите кнопку добавления ссылки в панели редактирования:

2) Переход к набору номера с кнопки. В панели редактирования блока «Кнопка» необходимо выставить «Переход по ссылке» и указать ваш номер телефона в формате «tel:88005555555».

3) Переход к набору номера с иконки/картинки. Здесь в выпадающем меню «Действие» нужно выбрать «Переход по ссылке» и вставить номер в формате «tel:+74957873422».

Сайт на Wix

Сайт на Tilda

Чтобы при клике на номер телефона начинался звонок или при клике на e-mail открывался почтовый клиент, нужно навесить на них ссылки.

1) Ссылка, которую нужно задать тексту с номером телефона: tel:+71234567890 (все без пробела). Будет работать при просмотре сайта на телефоне.

Например, выбираете блок меню ME301, во вкладке Контент в поле Дополнительно указываете номер телефона, затем выделяете его и с помощью выпадающей панели инструментов для текста добавляете ссылку вида tel:+7123456789.

2) Ссылка, которую нужно задать тексту с адресом почты: yourmail@mysite.com. При добавлении ссылки в Контент блока в поле «Ссылка», нужно указывать ссылку как mailto:yourmail@mysite.com.

Как отслеживать клики по номеру телефона

Это можно делать без вмешательства в код и установки Менеджера тегов Google. В Яндекс.Метрике не так давно появился новый тип цели – «Клик по номеру телефона». Достаточно указать нужные параметры, и данные о звонках будут поступать в Метрику:

Чтобы всё работало, важно указать номер в точности такой же, какой указан в коде сайта. Лучше всего скопировать адрес ссылки прямо с сайта. Для этого:

• Кликните правой кнопкой мыши по номеру на сайте и нажмите в меню «Просмотреть код»;
• В открывшейся консоли разработчика вы увидите нужную ссылку с номером;

Данные по кликам на номер телефона появятся в отчете «Конверсии» уже через несколько минут после создания цели.

Хотите тоже написать статью для читателей Yagla? Если вам есть что рассказать про маркетинг, аналитику, бизнес, управление, карьеру для новичков, маркетологов и предпринимателей. Тогда заведите себе блог на Yagla прямо сейчас и пишите статьи. Это бесплатно и просто

Маркетинговый анализ аудитории перед созданием продающего контента Статья

Привет, друзья!Меня зовут Надежда Богданова, я копирайтер-маркетолог, специалист по текстам для лендингов. Еще весной обещала рассказать, как я это делаю…Речь про маркетинговое исследование и анализ для создания продающих текстов. 2

Как оптимизировать контекстную рекламу: главные точки роста Статья

Чтобы контекстная реклама работала максимально эффективно, мало её правильно настроить. В теории невозможно предугадать точно, какие вещи сработают, а какие – нет.

Сегментация трафика в Яндекс.Директе: практическое руководство Статья

Когда пользователь видит в объявлении ответ на свой запрос (на поиске) или что-то, что его может заинтересовать (в сетях), высока вероятность, что он перейдет на сайт и всё закончится конверсией. С общими посылами, рассчитанными на широкую аудиторию, это не работает.

нашела похожую статью и было тоже полезно бы прочесть https://karpenko.studio/blog/klikabelnyj-nomer-telefona-na-sajte/

[Кейс]: Дизайн интерьера. Увеличили конверсию на 12% для Expostroy, сделав крутой редизайн сайта Статья

В 2014 году популярный сервис онлайн-бронирования жилья Airbnb прошел редизайн своего веб-сайта и мобильных приложений. Компания перешла от стандартного вида с фотографиями жилья к более эмоциональному стилю, внесшему изменения в логотип, композицию, цветовую гамму и визуальные элементы.

Переезд в новый рекламный кабинет Вконтакте. Что важно знать и учитывать? Статья

Первое и основное отличие старого РК от VK ADS в интерфейсе. Он здесь более фейсбучный, видимо, техподдержка решила взять пример с западной социальной сети.

Что такое автотаргетинг в Директе и чем он полезен Статья

Как сделать сайт, с которого не убежит клиент? Статья

Практические у всех при создании сайта встает вопрос, какую информацию и блоки делать. И здесь начинается так называемая свистопляска: что выводить? как выводить? откуда брать информацию?.

Нюансы настройки Яндекс.Директ на маркетплейсы Статья

Компания Wildberries заявила, что оборот (GMC) за 9 месяцев составил 1,1 трлн рублей. Таким образом, компания впервые за свое существование преодолела отметку в 1 трлн.

Автотаргетинг в Яндекс.Директ. Как с ним работать? Статья

Автотаргетинг в Яндекс. Директ появился примерно в 2019 году, и когда это произошло, у меня не было к нему особенного интереса.

Источник

Номер телефона на сайте

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

Оформление ссылки tel

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

До:

После:

Чтобы задать нормальные стили на мобильных, нужно писать два правила.

Отключить распознавание телефонов

Автоматическое распознавание телефонов работает не всегда корректно и срабатывает на большие цены. Его можно отключить, добавив метатег в страницы и прописать ссылки у телефонов вручную.

Оборачивание телефонов ссылками

Замечена одна особенность – на андроид устройствах не всегда срабатывает клик по ссылке если в атрибуте href форматированный номер телефона.

Обвернуть телефон регулярным выражением

Если телефонов много, то лучше автоматизировать замену с помощью регулярного выражения.

function replace_phone_call($matches) < $tel = str_replace(array('-', ' ', '(' , ')'), '', $matches[0]); $tel = str_replace('+7', '8', $tel); return '' . $matches[0] . ''; > function replace_phone($text) < return preg_replace_callback('/(?:\+|\d)[\d\-\(\) ]\d/', 'replace_phone_call', $text); > $text = 'Позвоните по телефону +7 (495) 123-45-67, или 88001234567'; echo replace_phone($text);

Результат:

Также можно добавить проверку мобильных с помощью mobiledetect и на десктопе ссылки не выводить.

require_once 'Mobile_Detect.php'; $detect = new Mobile_Detect; define('IS_MOBILE', $detect->isMobile() && !$detect->isTablet()); function replace_phone_call($matches) < $tel = str_replace(array('-', ' ', '(' , ')'), '', $matches[0]); $tel = str_replace('+7', '8', $tel); return '' . $matches[0] . ''; > function replace_phone($text) < if (IS_MOBILE) < return preg_replace_callback('/(?:\+|\d)[\d\-\(\) ]\d/', 'replace_phone_call', $text); > else < return $text; >> $text = 'Позвоните по телефону +7 (495) 123-45-67, или 88001234567'; echo replace_phone($text);

Или сделать на мобильных ссылку с номером телефона, а на десктопе ссылку на форму обратного звонка.

require_once 'Mobile_Detect.php'; $detect = new Mobile_Detect; define('IS_MOBILE', $detect->isMobile() && !$detect->isTablet()); function replace_phone_call($matches) < if (IS_MOBILE) < $tel = str_replace(array('-', ' ', '(' , ')'), '', $matches[0]); $tel = str_replace('+7', '8', $tel); return '' . $matches[0] . ''; > else < return '' . $matches[0] . ''; > > function replace_phone($text) < return preg_replace_callback('/(?:\+|\d)[\d\-\(\) ]\d/', 'replace_phone_call', $text); > $text = 'Позвоните по телефону +7 (495) 123-45-67, или 88001234567'; echo replace_phone($text);

Результат на десктопе и планшетах:

На мобильных:

Источник