Как сделать кликабельный номер телефона на сайте
285028
Когда пользователь может в один клик по номеру телефона сделать звонок, это в плюс и ему, и вам. Он тратит минимум усилий и времени, чтобы вам дозвониться, а вы получаете +1 целевой звонок. Естественно, это относится к мобильным устройствам.
В этой статье мы покажем, как сделать кликабельный номер телефона на сайте. Алгоритмы отличаются в зависимости от того, на чем создан ваш сайт.
HTML-код
Обычный номер телефона, который пока является простым текстом, в коде может выглядеть так:
<span>+7(999)888-77-66</span>
Или так (если присвоен класс):
<p class="phone”>+7(999)888-77-66</p>
Или так (если к этому тексту применены стили: цвет, шрифт, форматирование):
<div id="number" class="phone mobile text num" style="color: #1f21ff; text-align: center" name="phone_number">+7(999)888-77-66</p>
За гипертекст (возможность текста в коде HTML включать в себя гиперссылку) отвечает тег <a>...</a>. Атрибут href=”” отвечает за то, куда будет направлен клиент — внутри кавычек указывается адрес страницы или действие.
За автоматический набор номера по клику отвечает параметр tel:ХХХ, где XXX — номер телефона без пробелов и тире.
Таким образом, для первого примера код будет следующим:
<span>
<a href=”tel:+79998887766”>+7(999)888-77-66</a>
</span>
К тексту добавили действие – вызов на конкретный номер.
Сделаем и второй номер кликабельным:
<p class="phone”>
<a href=”tel:+79998887766”>+7(999)888-77-66</a>
</p>
Третий пример тоже без особых усилий становится гипертекстом. При этом сохраняются его изначальные стили:
<div id="number" class="phone mobile text num" style="color: #1ff1ff; text-align: center" name="phone_number">
<a href=”tel:+79998887766”>+7(999)888-77-66</a>
</p>
По этому же принципу вы можете сделать кликабельный email.
Чтобы email стал кликабельным, поставьте атрибут <a href=”mailto:XXX”>.
Сайт на Wordpress
Для Вордпресса есть специальный плагин CallPhone’r. Этот модуль выводит на каждой странице сайта иконку, при нажатии на которую мобильное устройство переходит в режим вызова.
![Кликабельный номер телефона – плагин CallPhone’r на Wordpress Кликабельный номер телефона – плагин CallPhone’r на Wordpress](https://imgs.yagla.ru/blog/1061/01-klikabelnyy-nomer-telefona--plagin-callphoner.jpg)
Там же есть возможность настройки по времени отображения иконки. Это позволит не получать звонки от клиентов в нерабочее время.
Сайт на mottor (LPmotor)
Этот конструктор дает несколько вариантов.
1) Телефон в виде текста.
В этом случае выделите текст телефона в блоке и нажмите кнопку добавления ссылки в панели редактирования:
![Кликабельный номер телефона – копирование номера на LPmotor Кликабельный номер телефона – копирование номера на LPmotor](https://imgs.yagla.ru/blog/1061/02-klikabelnyy-nomer-telefona--kopirovanie-nomera.jpg)
2) Переход к набору номера с кнопки. В панели редактирования блока «Кнопка» необходимо выставить «Переход по ссылке» и указать ваш номер телефона в формате "tel:88005555555".
![Кликабельный номер телефона – добавление номера для кнопки на LPmotor Кликабельный номер телефона – добавление номера для кнопки на LPmotor](https://imgs.yagla.ru/blog/1061/03-klikabelnyy-nomer-telefona--dobavlenie-nomera-dlya-knopki.jpg)
3) Переход к набору номера с иконки/картинки. Здесь в выпадающем меню «Действие» нужно выбрать «Переход по ссылке» и вставить номер в формате "tel:+74957873422".
![Кликабельный номер телефона – добавление номера для картинки на LPmotor Кликабельный номер телефона – добавление номера для картинки на LPmotor](https://imgs.yagla.ru/blog/1061/04-klikabelnyy-nomer-telefona--dobavlenie-nomera-dlya-kartinki.jpg)
4) Также можно вставить кликабельный телефон на сайт в виде html блока.
Тогда в поле «Редактирование HTML-кода» нужно вставить
<a href="tel:+74957873422">Позвонить 8 (495) 787 34 22</a>.
![Кликабельный номер телефона – редактирование HTML-кода на LPmotor Кликабельный номер телефона – редактирование HTML-кода на LPmotor](https://imgs.yagla.ru/blog/1061/05-klikabelnyy-nomer-telefona--redaktirovanie-html-koda.jpg)
Сайт на Wix
1) Чтобы создать кликабельный номер телефона:
— Добавьте текст. Вот инструкция из базы знаний Wix о том, как это сделать;
— Нажмите «Редактировать текст»;
— Введите номер телефона. Не вводите другой текст в том же окне.
![Кликабельный номер телефона – создание кликабельного номера в Wix Кликабельный номер телефона – создание кликабельного номера в Wix](https://imgs.yagla.ru/blog/1061/klikabelnyy-nomer-telefona--vvod-nomera-telefona-v-wix.gif)
2) Чтобы связать текст ссылкой с номером телефона:
— Добавьте текст;
— Нажмите «Редактировать текст»;
— Введите текст, например, «Позвонить сейчас»;
— Выделите текст;
— Нажмите на иконку «Ссылка»;
— Выберите Номер телефона;
— Введите номер телефона в поле «Номер телефона»;
— Нажмите «Готово».
![Кликабельный номер телефона – привязка текста ссылкой к номеру телефона в Wix Кликабельный номер телефона – привязка текста ссылкой к номеру телефона в Wix](https://imgs.yagla.ru/blog/1061/klikabelnyy-nomer-telefona--privyazka-knopki-ssylkoy-k-nomeru-v-wix.gif)
3) Чтобы связать кнопку ссылкой с номером телефона:
— Добавьте кнопку
— Измените текст кнопки
— Нажмите на иконку Ссылка
— Выберите Номер телефона
— Введите номер телефона в поле «Номер телефона»
— Нажмите «Готово».
![Кликабельный номер телефона – привязка кнопки ссылкой к номеру телефона в Wix Кликабельный номер телефона – привязка кнопки ссылкой к номеру телефона в Wix](https://imgs.yagla.ru/blog/1061/klikabelnyy-nomer-telefona--privyazka-teksta-ssylkoy-k-nomeru-v-wix.gif)
Сайт на Tilda
Чтобы при клике на номер телефона начинался звонок или при клике на e-mail открывался почтовый клиент, нужно навесить на них ссылки.
1) Ссылка, которую нужно задать тексту с номером телефона: tel:+71234567890 (все без пробела). Будет работать при просмотре сайта на телефоне.
Например, выбираете блок меню ME301, во вкладке Контент в поле Дополнительно указываете номер телефона, затем выделяете его и с помощью выпадающей панели инструментов для текста добавляете ссылку вида tel:+7123456789.
2) Ссылка, которую нужно задать тексту с адресом почты: yourmail@mysite.com. При добавлении ссылки в Контент блока в поле «Ссылка», нужно указывать ссылку как mailto:yourmail@mysite.com.
Как отслеживать клики по номеру телефона
Это можно делать без вмешательства в код и установки Менеджера тегов Google. В Яндекс.Метрике не так давно появился новый тип цели – «Клик по номеру телефона». Достаточно указать нужные параметры, и данные о звонках будут поступать в Метрику:
![Кликабельный номер телефона – добавление цели «Клик по номеру телефона» Кликабельный номер телефона – добавление цели «Клик по номеру телефона»](https://imgs.yagla.ru/blog/1061/06-klikabelnyy-nomer-telefona--dobavlenie-celi-klik-po-nomeru-telefona.jpg)
Чтобы всё работало, важно указать номер в точности такой же, какой указан в коде сайта. Лучше всего скопировать адрес ссылки прямо с сайта. Для этого:
- Кликните правой кнопкой мыши по номеру на сайте и нажмите в меню «Просмотреть код»;
- В открывшейся консоли разработчика вы увидите нужную ссылку с номером;
![Кликабельный номер телефона – ссылка с номером телефона для Метрики Кликабельный номер телефона – ссылка с номером телефона для Метрики](https://imgs.yagla.ru/blog/1061/07-klikabelnyy-nomer-telefona--ssylka-s-nomerom-telefona-dlya-metriki.png)
- Скопируйте её и вставьте в параметрах цели.
![Кликабельный номер телефона – добавление номера телефона для отслеживания кликов Кликабельный номер телефона – добавление номера телефона для отслеживания кликов](https://imgs.yagla.ru/blog/1061/08-klikabelnyy-nomer-telefona--dobavlenie-nomera-telefona-dlya-otslejivaniya-klikov.png)
Данные по кликам на номер телефона появятся в отчете «Конверсии» уже через несколько минут после создания цели.
285028
1 Читайте ещё статьи по этой теме
Маркетинговый анализ аудитории перед созданием продающего контента Статья
Привет, друзья!Меня зовут Надежда Богданова, я копирайтер-маркетолог, специалист по текстам для лендингов. Еще весной обещала рассказать, как я это делаю…Речь про маркетинговое исследование и анализ для создания продающих текстов.2
Как оптимизировать контекстную рекламу: главные точки роста Статья
Чтобы контекстная реклама работала максимально эффективно, мало её правильно настроить. В теории невозможно предугадать точно, какие вещи сработают, а какие – нет.
Сегментация трафика в Яндекс.Директе: практическое руководство Статья
Когда пользователь видит в объявлении ответ на свой запрос (на поиске) или что-то, что его может заинтересовать (в сетях), высока вероятность, что он перейдет на сайт и всё закончится конверсией. С общими посылами, рассчитанными на широкую аудиторию, это не работает.
Написать комментарий
АннаAugust 7, 2021 в 3:44 PM
нашела похожую статью и было тоже полезно бы прочесть https://karpenko.studio/blog/klikabelnyj-nomer-telefona-na-sajte/
Обсуждаемое
Как юристу вести Telegram канал. Отвечает адвокат Валерий Рогальский Статья
В современном мире цифровых технологий и социальных медиа юристам предоставляется уникальная возможность расширить свою аудиторию и продвигать свои услуги через онлайн-платформы. Telegram – одна из таких платформ, которая предлагает удобный и эффективный способ взаимодействия с клиентами и коллегами.
Кейс клиента Vitamin.tools о продвижении детского лагеря в VK Ads: как получать заявки по 500 рублей 3 месяца подряд Статья
Таргетолог Марк Косых, клиент Vitamin. tools — рекламной экосистемы, возвращающей до 18% с пополнения рекламы, — пробовал запускать рекламу и в старом, и в новом рекламном кабинетах.
Лидогенерация на мероприятия Статья
Я расскажу в целом о том, как выстроить грамотный диджитал для продвижения мероприятий. Это актуально как для онлайна, так и для оффлайна.
Свежее
Пустые бланки резюме для устройства на работу – где взять? Статья
Создать современное резюме с оформлением и структурой можно с помощью готовых шаблонов резюме. Пустые бланки в формате docx и pdf подойдут для заполнения в любом текстовом редакторе: используйте шаблоны, заполняйте их с помощью пошаговой инструкции и привлекайте работодателей.
6 советов от клиента Vitamin.tools по продвижению психолога в TG через Директ Статья
Директолог Ольга Сивцова, клиент Vitamin. tools — рекламной экосистемы, возвращающей до 18% с пополнения рекламы, — отливала бюджет на TG-бота 2,5 месяца.
Работа на фрилансе или в агентстве: плюсы и минусы Статья
Первый плюс работы в агентстве – меньше ответственности, потому что у нас ее нет перед конечным заказчиком, другими сотрудниками, если не нанимаем помощников и ничего не делегируем. У нас есть ответственность только перед нашим работодателем.