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

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

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

Как пригнать 551 заявку на 100к бюджета в B2B тематике. Кейс по продаже аккумуляторных батарей

Как за короткий срок получить 551 качественную заявку за 180 рублей в сложной B2B тематике с помощью гиперсегментации– рассказывает Дмитрий Колесников. .2

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

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

Facebook Business Manager: полное практическое руководство Лонгрид

Facebook Business Manager – это инструмент, с помощью которого вы сможете управлять всей рекламой в Facebook в одном месте. Это бесценно в первую очередь для бизнесов, у которых большое количество рекламных аккаунтов и страниц, а также для агентств и фрилансеров, которые ведут рекламу разных клиентов.
Свежее

Как настроить РСЯ: практическое руководство Лонгрид

Задача рекламы в РСЯ–оторвать пользователя от чтения новостей и прочих дел в интернете, чтобы показать продукт, который его, возможно, заинтересует. Возможно–так как он в данный момент не ищет ваш продукт и вряд ли собирается что-либо покупать.

Топ 20 бизнес-идей по производству Лонгрид

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

Яндекс.Аудитории: все возможности с примерами Лонгрид

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