Как сделать кликабельный номер телефона на сайте
Когда пользователь может в один клик по номеру телефона сделать звонок, это в плюс и ему, и вам. Он тратит минимум усилий и времени, чтобы вам дозвониться, а вы получаете +1 целевой звонок. Естественно, это относится к мобильным устройствам.
В этой статье мы покажем, как сделать кликабельный номер телефона на сайте. Алгоритмы отличаются в зависимости от того, на чем создан ваш сайт.
HTML-код
Обычный номер телефона, который пока является простым текстом, в коде может выглядеть так:
+7(999)888-77-66
Или так (если присвоен класс):
Или так (если к этому тексту применены стили: цвет, шрифт, форматирование):
За гипертекст (возможность текста в коде HTML включать в себя гиперссылку) отвечает тег . . Атрибут href=”” отвечает за то, куда будет направлен клиент — внутри кавычек указывается адрес страницы или действие.
За автоматический набор номера по клику отвечает параметр tel:ХХХ, где XXX — номер телефона без пробелов и тире.
Таким образом, для первого примера код будет следующим:
К тексту добавили действие – вызов на конкретный номер.
Сделаем и второй номер кликабельным:
Третий пример тоже без особых усилий становится гипертекстом. При этом сохраняются его изначальные стили:
По этому же принципу вы можете сделать кликабельный email.
Сайт на WordPress
Для Вордпресса есть специальный плагин CallPhone’r. Этот модуль выводит на каждой странице сайта иконку, при нажатии на которую мобильное устройство переходит в режим вызова.
Там же есть возможность настройки по времени отображения иконки. Это позволит не получать звонки от клиентов в нерабочее время.
Сайт на mottor (LPmotor)
Этот конструктор дает несколько вариантов.
1) Телефон в виде текста.
В этом случае выделите текст телефона в блоке и нажмите кнопку добавления ссылки в панели редактирования:
2) Переход к набору номера с кнопки. В панели редактирования блока «Кнопка» необходимо выставить «Переход по ссылке» и указать ваш номер телефона в формате «tel:88005555555».
3) Переход к набору номера с иконки/картинки. Здесь в выпадающем меню «Действие» нужно выбрать «Переход по ссылке» и вставить номер в формате «tel:+74957873422».
4) Также можно вставить кликабельный телефон на сайт в виде html блока.
Тогда в поле «Редактирование HTML-кода» нужно вставить
Сайт на Wix
1) Чтобы создать кликабельный номер телефона:
— Добавьте текст. Вот инструкция из базы знаний Wix о том, как это сделать;
— Нажмите «Редактировать текст»;
— Введите номер телефона. Не вводите другой текст в том же окне.
2) Чтобы связать текст ссылкой с номером телефона:
— Добавьте текст;
— Нажмите «Редактировать текст»;
— Введите текст, например, «Позвонить сейчас»;
— Выделите текст;
— Нажмите на иконку «Ссылка»;
— Выберите Номер телефона;
— Введите номер телефона в поле «Номер телефона»;
— Нажмите «Готово».
3) Чтобы связать кнопку ссылкой с номером телефона:
— Добавьте кнопку
— Измените текст кнопки
— Нажмите на иконку Ссылка
— Выберите Номер телефона
— Введите номер телефона в поле «Номер телефона»
— Нажмите «Готово».
Сайт на Tilda
Чтобы при клике на номер телефона начинался звонок или при клике на e-mail открывался почтовый клиент, нужно навесить на них ссылки.
1) Ссылка, которую нужно задать тексту с номером телефона: tel:+71234567890 (все без пробела). Будет работать при просмотре сайта на телефоне.
Например, выбираете блок меню ME301, во вкладке Контент в поле Дополнительно указываете номер телефона, затем выделяете его и с помощью выпадающей панели инструментов для текста добавляете ссылку вида tel:+7123456789.
2) Ссылка, которую нужно задать тексту с адресом почты: yourmail@mysite.com. При добавлении ссылки в Контент блока в поле «Ссылка», нужно указывать ссылку как mailto:yourmail@mysite.com.
Как отслеживать клики по номеру телефона
Это можно делать без вмешательства в код и установки Менеджера тегов Google. В Яндекс.Метрике не так давно появился новый тип цели – «Клик по номеру телефона». Достаточно указать нужные параметры, и данные о звонках будут поступать в Метрику:
Чтобы всё работало, важно указать номер в точности такой же, какой указан в коде сайта. Лучше всего скопировать адрес ссылки прямо с сайта. Для этого:
- Кликните правой кнопкой мыши по номеру на сайте и нажмите в меню «Просмотреть код»;
- В открывшейся консоли разработчика вы увидите нужную ссылку с номером;
- Скопируйте её и вставьте в параметрах цели.
Данные по кликам на номер телефона появятся в отчете «Конверсии» уже через несколько минут после создания цели.
Похожие статьи
Хотите тоже написать статью для читателей Yagla? Если вам есть что рассказать про маркетинг, аналитику, бизнес, управление, карьеру для новичков, маркетологов и предпринимателей. Тогда заведите себе блог на Yagla прямо сейчас и пишите статьи. Это бесплатно и просто
Опубликовано редакцией Yagla
Читайте ещё статьи по этой теме
Маркетинговый анализ аудитории перед созданием продающего контента Статья
Привет, друзья!Меня зовут Надежда Богданова, я копирайтер-маркетолог, специалист по текстам для лендингов. Еще весной обещала рассказать, как я это делаю…Речь про маркетинговое исследование и анализ для создания продающих текстов. 2
Как оптимизировать контекстную рекламу: главные точки роста Статья
Чтобы контекстная реклама работала максимально эффективно, мало её правильно настроить. В теории невозможно предугадать точно, какие вещи сработают, а какие – нет.
Сегментация трафика в Яндекс.Директе: практическое руководство Статья
Когда пользователь видит в объявлении ответ на свой запрос (на поиске) или что-то, что его может заинтересовать (в сетях), высока вероятность, что он перейдет на сайт и всё закончится конверсией. С общими посылами, рассчитанными на широкую аудиторию, это не работает.
Как сделать кликабельный номер телефона на сайте
Современный мобильный телефон — не просто средство для связи с людьми, а полноценный ежедневник, банк, библиотека и даже рок-концерт. Поэтому большое количество бизнес процессов завязано на приложениях, специально разработанных для смартфонов.
Кликабельный номер на сайте — функция, без которой вы рискуете открыть воронку по утечке клиентов вместо конверсионного действия в мобильной версии сайта. Чтобы нажать на номер и связаться с вами, нужно не больше двух действий. Чтобы связаться с вами без кликабельного номера, нужно не меньше пяти действий: копировать, свернуть браузер, перейти в режим набора, вставить, вызов.
А если человеку нужно позвонить в несколько десятков компаний? Найти свободный столик в ресторане для ужина с семьей или просто срочно найти доставку какой-нибудь еды? Он сэкономит время и найдет похожие условия на сайте конкурентов, которые не заставят его тратить время на copy/past.
Упавшие сервера: самые необыкновенные истории
Если вам все еще нельзя позвонить в один клик, эта инструкция для вас. Как сделать номер телефона кликабельным, не потерять при этом стили оформления и таким образом поднять конверсию сайта — об этом и пойдет речь.
Код сайта
В первую очередь рассмотрим вариант, когда у вас есть доступ к HTML-коду сайта.
Обычный номер телефона, который пока является простым текстом, в коде может выглядеть так:
+7(999)888-77-66
Или так (если присвоен класс):
+7(999)888-77-66
За гипертекст (возможность текста в коде HTML включать в себя гиперссылку) отвечает тег . . Атрибут href=”” отвечает за то, куда будет направлен клиент — внутри кавычек указывается адрес страницы или действие. За автоматический набор номера по клику отвечает параметр tel:ХХХ, где XXX — номер телефона без пробелов и тире.
Таким образом, для первого примера код будет следующим:
Мы не только оставили сам текст на сайте, но и добавили к нему действие: вызов на конкретный номер.
Сделаем и второй номер кликабельным:
Сохраняем код — вуаля, телефон стал кликабельным!
CMS/конструктор сайтов
Если вы пользуетесь CMS/конструктором сайтов, вероятнее всего в функционале конструктора есть специальные инструменты, чтобы сделать номер телефона активным — подробнее об этом нужно узнавать в FAQ каждой платформы (например, LP, Wix, Tilda). Но есть небольшой лайфхак на случай, если этот функционал вы так и не найдете.
Инструмент гиперссылка при форматировании текста есть в любом конструкторе сайтов. Номер — это текст, значит вы вводите его в текстовом редакторе платформы. Чтобы сделать номер телефона кликабельным, выделите текст номера, создайте из него гиперссылку, в поле адрес укажите:
tel:+7XXXXXXXXXX
где «+7XXXXXXXXXX» — номер телефона, на который должен происходить дозвон.
У меня коллтрекинг. Как быть?
Уух! А вы сильны, раз дочитали до этого момента. Здорово, что вы используете динамический коллтрекинг с подменой номера на сайте, но это не значит, что подменный номер не может быть кликабельным!
Что такое коллтрекинг и как он работает: объясняем простыми словами
Разберем на примере коллтрекинга Callibri (хотя вообще эти правила примерно так же работают для любого сервиса подмены номера).
За подмену номера отвечает атрибут Если у вас есть активный настроенный проект, на сайте установлен скрипт и каждому номеру телефона в коде присвоен атрибут подмена происходит автоматически. Скрипт Callibri сам находит нужные элементы с номерами телефонов и подменяет их.
считает звонки с онлайн и офлайн рекламы,
показывает, с каких объявлений приходят клиенты,
помогает оптимизировать рекламу.
В случае, если номер телефона на сайте не кликабельный, то и подменяться будет обычный номер в виде текста. Но если на ваш номер уже можно позвонить в один клик, скрипт Callibri c помощью подменит и номер, указанный в атрибуте «href=»tel:XXX», на который происходит вызов. Если клиент нажмет на подменный номер, звонок также пройдет на подменный номер — вы не потеряете лид и сможете узнать откуда к вам пришёл клиент.
Код, в котором подменяется не только текст номера на сайте, но и номер для вызова, выглядит так:
В этом случае, кроме потери оформления, подмена произойдёт только для элемента
.
. Таким образом, видимый телефон в коде сайта подменится. А при клике элемент будет ссылаться на основной номер телефона, без подмены. То есть вы не узнаете, откуда пришел клиент: вместо подменного номера он позвонит по вашему основному телефону.
Финал
Поздравляем, теперь вы достойны посвящения в мастера HTML.
Обновление номера до кликабельного — большой плюс для мобильной версии сайта. С ним вы намного ближе к своему клиенту — буквально в паре кликов.
А можно все это не настраивать и просто установить на сайт обратный звонок Callibri. Так вам смогут позвонить даже пользователи, которые зашли на сайт с компьютера.
Бонус
Кстати, по этому же принципу вы можете сделать кликабельный email на своем сайте! Это важно для B2B — даже если доля мобильного трафика на сайт не очень высокая, все равно есть процент людей, которые захотят отправить вам вопрос, запросить коммерческое предложение или отправить спецификацию через мобильные устройства (смартфон или планшет).
Чтобы email стал кликабельным, вам нужно поставить атрибут . А если вы пользуетесь email-трекингом, не забудьте правильно расположить атрибуты, чтобы подменялся не только текст на сайте, но и адрес отправки письма:
У Callibri есть телеграм-канал — присоединяйтесь, чтобы не пропустить свежие кейсы, материалы блога и обновления сервисов.
Как сделать кликабельный номер телефона на сайте?
Почему возникает такой вопрос? Не секрет, что большинство пользователей интернета посещают сайты со своих мобильных устройств. Чтобы вы не потеряли своего клиента, у него должна быть возможность позвонить вам прямо сейчас, просто кликнув по номеру телефона. Для реализации этой задачи предлагается специальная html-разметка: «>+7 (4012) 52 44 07 Результатом такой работы будет текст в виде номера +7 (4012) 52 44 07, кликнув по которому в телефоне в поле вызова номера, появится номер+74012524407. И пользователь вашего сайта сможет позвонить вам, не делая никаких лишних действий. Примечание: Текст между тегами может быть произвольным. А текст после tel: должен содержать телефонный номер в том формате, который вам нужен (с 8, +7, городской и т.д.) .
Инструкция 2
Как сделать кликабельный номер телефона на сайте? Почему возникает такой вопрос? Не секрет, что большинство пользователей интернета посещают сайты со своих мобильных устройств. Чтобы вы не потеряли своего клиента, у него должна быть возможность позвонить вам прямо сейчас, просто кликнув по номеру телефона. Чтобы добавить кликабельный номер телефона нужно: 1) Перейти в режим редактирования блока или ноды, где содержится редактируемый номер (При этом, ваш номер телефона будет расположен в текстовом поле страницы. 2) Выделить мышью номер. (в данное поле также можно вписать любой произвольный номер и текст) 3) В панели инструментов, щелкнуть по значку «Вставить/Редактировать ссылку» 4) Заполнить пустые окошки в открывшемся редакторе Тип ссылки: Ссылка Протокол: Другой В поле ссылка написать ваш номер в формате: Городской: tel:+74012304541 Мобильный: tel:+79118638675 5) Нажать кнопку «ок» 6) Пролистать страничку до самого низа, нажать кнопку «Сохранить блок» 7) Теперь ваша ссылка кликабельна Телефон в ссылке должен содержать телефонный номер в том формате, который нужен вам (с 8, +7, городской и т.д.). Теперь кликнув по вашему номеру, пользователь мобильного устройства будет иметь возможность мгновенно позвонить вам со своего мобильного устройства. Для вас это может быть полезно: Как сделать кликабельным скайп?
Зачем и как делать номер телефона на сайте кликабельным
Почему важно использовать кликабельные номера?
Помните момент, когда вам нужно позвонить в компанию, а телефон на сайте указан обычным текстом? Достаточно неудобно, правда? Особенно, если на сайте у конкурентов можно позвонить в один клик. Что же такое кликабельний номер?
Это телефон на сайте, на который при нажатии сразу идет вызов.
Не используя эту функцию вы рискуете потерять часть клиентов, даже не зная об этом.
Как сделать номер кликабельным на сайте?
Для начала, нужно убедиться, что у вас есть доступ, чтобы редактировать код страницы в конструкторе сайтов.
После чего нужно открыть панель с кодом и найти строчку, где указан номер мобильного. Для этого нужно нажать Ctrl+F и в всплывающем окне для поиска начните вводить номер. Например:
Настроить кликабельность можно с помощью ссылки со специальным адресом:
В атрибуте href должно быть указано: tel: и номер телефона в формате, который вам нужен.
Выглядеть это будет так:
В результате посетители сайта, зайдя на него с телефона или планшета, смогут просто кликнуть на номер и сразу же позвонить.
HTML-код
Чтобы понять, что такое HTML, достаточно открыть любую страницу в браузере и посмотреть на ее исходный код. Эта графика и текст, что вы видите на экране и есть HTML-код. Простыми словами это язык, с помощью которого текстом прописывается веб-страница и после чего ее может уже обрабатывать браузер.
Для установки кликабельности мы обращаемся именно к HTML-коду.
Пример как выглядит строчка до кликабельности:
Сайт на WordPress
Для начала разберемся, что это такое. WordPress — это один из самых популярных на сегодняшний день самая популярная система управления контентом и сайтом.
Большинство последних моделей смартфонов автоматически распознают номер телефона. По крайней мере, если вы написали этот номер в правильном формате, содержащем коды страны и города. Также, у WordPress есть отличный плюс, бесплатный плагин с кнопкой “Позвонить сейчас”. Это еще больше упростит жизнь вам и вашим клиентам. Плагин называется “ Call Now Button”.
Заключение
Используйте функцию кликабельного номера телефона на вашем сайте и облегчите связь с вашей компанией клиенту.
Удобство для клиента — дополнительные конверсии для вашего бизнеса!
Надеемся, что статья была вам полезна. Эту и другие услуги вы можете заказать у нас сайте, заполнив форму.
Последние новости
Посетите наш блог — мы пишем для вас
Как создать прототип лендинга
Прототип лендинга – это схема, на которой изображены все элементы страницы и другого контента на ней. Это поможет вам увидеть готовую.
5 причины использовать автоправила в Google Ads
Автоматизированные правила в два раза облегчает вам управление Google Ads. Она устраняет ошибки и помогает сэкономить ваше время на.
Виральный контент
Виральность — это тип контента, который определяет вероятность, с которой читатели захотят поделиться этой публикацией. Этот.