Всё для рекламы
и про рекламу
Навигация по статье
HTML-кодСайт на WordpressСайт на LPmotorСайт на WixСайт на TildaКак отслеживать клики по номеру телефона
Маркетинг

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

383320
1
Когда пользователь может в один клик по номеру телефона сделать звонок, это в плюс и ему, и вам. Он тратит минимум усилий и времени, чтобы вам дозвониться, а вы получаете +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
 
Там же есть возможность настройки по времени отображения иконки. Это позволит не получать звонки от клиентов в нерабочее время.

Сайт на mottor (LPmotor)

Этот конструктор дает несколько вариантов.
 
1) Телефон в виде текста.
 
В этом случае выделите текст телефона в блоке и нажмите кнопку добавления ссылки в панели редактирования:
 
Кликабельный номер телефона – копирование номера на LPmotor
 
2) Переход к набору номера с кнопки. В панели редактирования блока «Кнопка» необходимо выставить «Переход по ссылке» и указать ваш номер телефона в формате "tel:88005555555".
 
Кликабельный номер телефона – добавление номера для кнопки на LPmotor
 
3) Переход к набору номера с иконки/картинки. Здесь в выпадающем меню «Действие» нужно выбрать «Переход по ссылке» и вставить номер в формате "tel:+74957873422".
 
Кликабельный номер телефона – добавление номера для картинки на LPmotor
 
4) Также можно вставить кликабельный телефон на сайт в виде html блока.
 
Тогда в поле «Редактирование HTML-кода» нужно вставить
 
<a href="tel:+74957873422">Позвонить 8 (495) 787 34 22</a>.
 
Кликабельный номер телефона – редактирование HTML-кода на LPmotor

Сайт на Wix

1) Чтобы создать кликабельный номер телефона:
 
— Добавьте текст. Вот инструкция из базы знаний Wix о том, как это сделать;
— Нажмите «Редактировать текст»;
— Введите номер телефона. Не вводите другой текст в том же окне.
 
Кликабельный номер телефона – создание кликабельного номера в Wix
 
2) Чтобы связать текст ссылкой с номером телефона:
 
— Добавьте текст;
— Нажмите «Редактировать текст»;
— Введите текст, например, «Позвонить сейчас»;
— Выделите текст;
— Нажмите на иконку «Ссылка»;
— Выберите Номер телефона;
— Введите номер телефона в поле «Номер телефона»;
— Нажмите «Готово».
 
Кликабельный номер телефона – привязка текста ссылкой к номеру телефона в Wix
 
3) Чтобы связать кнопку ссылкой с номером телефона:
 
— Добавьте кнопку
— Измените текст кнопки
— Нажмите на иконку Ссылка
— Выберите Номер телефона
— Введите номер телефона в поле «Номер телефона»
— Нажмите «Готово».
 
Кликабельный номер телефона – привязка кнопки ссылкой к номеру телефона в Wix

Сайт на Tilda

Чтобы при клике на номер телефона начинался звонок или при клике на e-mail открывался почтовый клиент, нужно навесить на них ссылки.
 
1) Ссылка, которую нужно задать тексту с номером телефона: tel:+71234567890 (все без пробела). Будет работать при просмотре сайта на телефоне.
 
Например, выбираете блок меню ME301, во вкладке Контент в поле Дополнительно указываете номер телефона, затем выделяете его и с помощью выпадающей панели инструментов для текста добавляете ссылку вида tel:+7123456789.
 
2) Ссылка, которую нужно задать тексту с адресом почты: yourmail@mysite.com. При добавлении ссылки в Контент блока в поле «Ссылка», нужно указывать ссылку как mailto:yourmail@mysite.com.

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

Это можно делать без вмешательства в код и установки Менеджера тегов Google. В Яндекс.Метрике не так давно появился новый тип цели – «Клик по номеру телефона». Достаточно указать нужные параметры, и данные о звонках будут поступать в Метрику:
 
Кликабельный номер телефона – добавление цели «Клик по номеру телефона»
 
Чтобы всё работало, важно указать номер в точности такой же, какой указан в коде сайта. Лучше всего скопировать адрес ссылки прямо с сайта. Для этого:
 
  • Кликните правой кнопкой мыши по номеру на сайте и нажмите в меню «Просмотреть код»;
  • В открывшейся консоли разработчика вы увидите нужную ссылку с номером;
 
Кликабельный номер телефона – ссылка с номером телефона для Метрики
  • Скопируйте её и вставьте в параметрах цели.
 
Кликабельный номер телефона – добавление номера телефона для отслеживания кликов
 
Данные по кликам на номер телефона появятся в отчете «Конверсии» уже через несколько минут после создания цели.
Команды YAGLA и Kokoc Group ведут несколько телеграм-каналов, где публикуются мнения экспертов и авторские лонгриды о бизнесе и маркетинге, многие из которых не попадают на этот сайт. Обязательно подписывайтесь по ссылке: https://t.me/addlist/EhE5LANnrBphMjUy
Опубликовано редакцией Yagla
383320
1
7
Читайте ещё статьи по этой теме

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

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

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

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

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

Когда пользователь видит в объявлении ответ на свой запрос (на поиске) или что-то, что его может заинтересовать (в сетях), высока вероятность, что он перейдет на сайт и всё закончится конверсией. С общими посылами, рассчитанными на широкую аудиторию, это не работает.
Написать комментарий
АннаAugust 7, 2021 в 3:44 PM
нашела похожую статью и было тоже полезно бы прочесть https://karpenko.studio/blog/klikabelnyj-nomer-telefona-na-sajte/
Свежее

Чек-лист приёмки сайта у подрядчика: что проверить до подписания акта Статья

Акт сдачи-приёмки подписывают быстро. Сайт открывается, дизайн совпадает с макетом, подрядчик торопит с закрывающими документами.

Привлечение участников на мероприятие: как конвертировать трафик в регистрации, а регистрации в явку Статья

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

Что сайт должен объяснить до заявки, чтобы привлекать подходящих клиентов Статья

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