Кликабельный номер телефона на сайте: как настроить и почему это важно

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

Кликабельный номер или click-to-call номер — это телефон на сайте, при нажатии на который сразу происходит вызов. Эта опция предназначена специально для пользователей из мобайла. Позвонить можно и с десктопной версии, если на компьютере установлена программа для звонков.

«Если честно, мы не перестаем удивляться. Вроде бы 21 век, мобильный трафик постоянно растет, у многих уже есть адаптивные версии сайта. Но мы все равно сталкиваемся с проектами, у которых не настроен кликабельный номер телефона для мобайла. Люди просто не понимают, насколько важна эта функция. А ведь так бизнес теряет часть клиентов, даже не зная об этом».

— признается Евгений Заступ, руководитель техподдержки Ringostat.

Почему важно использовать кликабельные номера для мобильной версии сайта  

1. Человек, который открыл сайт со смартфона, не настроен долго выбирать и рассматривать товар. Это повышает вероятность, что он именно позвонит, а не напишет в чат или в соцсети.
2. Поведение пользователя мобильного отличается от человека, сидящего за компьютером с полноценной клавиатурой. На небольшом экране неудобно выделять, вставлять и копировать символы. Велика вероятность, что пользователь пойдет искать другую компанию, которой легче позвонить. Тем более, что кликабельные номера уже не редкость, и многие к ним привыкли.
3. 46% людей, у которых был негативный опыт с мобильной версией страницы, говорят, что больше ничего не купят у данной компании. А попытка звонка с сайта — это часть пользовательского опыта.  
4. Свыше 52% посетителей заходят в интернет с мобильных телефонов. В среднем жители планеты проводят 3 часа в сети при помощи смартфона. И эти показатели будут расти — достаточно посмотреть на тенденции: 

Если компания с сайтом без click-to-call номеров обратится в агентство за продвижением, то специалисты, скорей всего, порекомендуют устранить этот недочет. Ведь невозможно говорить о повышении конверсии, если потенциальным клиентам просто неудобно обращаться в компанию. Даже если они этого хотят.

Как проверить, можно ли позвонить с вашего сайта в один клик

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

Либо зайдите на сайт с компьютера и попробуйте кликнуть на номер. Если он в формате click-to-call, то появится окошко с предложением выбрать программу для совершения звонков:

Преимущества Call tracking Ringostat

• Единственный в Украине и Казахстане официальный технологический партнер Google Analytics среди аналогичных сервисов.
• Готовые отчеты по ключевым параметрам и возможность создать собственные по 30+ параметрам.
• 95% настроек вы можете управлять самостоятельно по инструкциям из базы знаний Ringostat.
• По-настоящему быстрая и профессиональная поддержка — скорость ответа менее 4 минут.
• Готовые интеграции с популярными CRM-системами и другими сервисами.

Узнать подробнее

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

Убедитесь, что у вас есть доступ к редактированию кода вашей площадки в конструкторе сайтов, напрямую в панели вебмастера или через FTP.

Откройте панель с кодом и найдите фрагмент кода, где указан номер телефона. Для этого нажмите Ctrl+F и в появившееся окошко поиска введите несколько цифр номера. Вот например, как это можно сделать:

Некликабельный номер может выглядеть так:
<span>+38 (044) 123-45-67</span>

Или так:

<div class=”phone”>+38 (044) 123-45-67</div>

Если у номера на вашем сайте есть стиль для кода оператора и самого номера — т. е. шрифт, цвет, курсив, в коде он может быть прописан так:
<div><span class=”phone-small”>+38 (044)</span> 123-45-67</div>

Перейдите к номеру. Вам нужно будет добавить в коде три элемента:

• тег  <a>...</a>;
• внутри него, вместо троеточия — атрибут href=””, который отвечает за ссылку;
• между кавычками атрибута вставьте параметр tel: ;
• после двоеточия впишите номер в международном формате, со знаком плюс перед ним, без пробелов и тире.

Если номер прописан без стилей, то для примеров, приведенных выше, он в коде должен выглядеть так:

<span>
<a href=”tel:+380441234567”>+38 (044) 123-45-67</a>
</span>

Или так:
<div>
<span class=”phone-small”>
<a href=”tel:+380441234567>+38 (044)</span> 123-45-67</a>
</div>

Как видим, номер телефона прописывается дважды. Первый раз, после атрибута href — это ссылка на номер. Второй телефон — это элемент, который отвечает за то, как номер отображается на сайте.

Если вы делаете ссылку на телефон в шапке сайта, убедитесь, что не нарушили стили — шрифт и цвет номера телефона. В противном случае внешний вид телефона изменится, он станет синим и при наведении будет подчеркиваться, как стандартная ссылка.

Иногда в мобильной версии используют вариант, когда номер телефона не указывается, а вместо него пишется «Позвонить». Если вы хотите сделать так же, то в коде это будет выглядеть так:

<button>
<a href=”tel:+380441111111”>+Позвоните нам</a>
</button>
Если вы используете подмену номеров от Ringostat, то наш сервис подменяет и такие номера, сохраняя текст.

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

Зато при настройке коллтрекинга на сайт с кликабельными номерами все шрифты и форматирование сохраняются. Наш сервис автоматически подменяет имеющуюся ссылку и ее содержимое.

Если у вас возникли вопросы и сложности при настройке по инструкции — напишите в чат нашей техподдержке. Ребята подскажут ответы по возникшим вопросам и помогут с рекомендацией для вашего сайта.

Подпишитесь на обновления

Раз в неделю мы отправляем дайджест самых интересных новостей о digital 

Email*

Даю согласие на обработку персональных данных и хочу получать информационно-рекламные письма *

Страница не найдена (ошибка 404)

PHP

HTML/CSS

JS/jQuery

htaccess

Bootstrap

Программы

Разное

Справочники

Как добавить на свой веб-сайт ссылки и призывы к действию с возможностью вызова

На многих бизнес-сайтах указан номер телефона, по которому клиенты могут с ними связаться. Когда настольные компьютеры были самым популярным способом доступа к сайтам, пользователи записывали номер телефона и звонили с отдельного устройства. Конечно, большинство пользователей сейчас заходят на сайт и звонят с одного и того же устройства. Это открывает возможность добавить ссылку для вызова — создать HTML-номер телефона, по которому можно щелкнуть.

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

Подпишитесь на наш канал Youtube

Как работают ссылки вызовов

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

Поскольку это HTML, вы можете добавлять протоколы в любом месте вашего сайта, включая верхний и нижний колонтитулы, боковые панели, содержимое сообщений и страниц, а также виджеты.

Добавление ссылки для вызова телефонного номера в формате HTML на ваш веб-сайт

Добавьте код в виде текста в место, где должна появиться ссылка:

 123-456-7890 

Href=tel: создает ссылку для вызова. Это говорит браузеру, как использовать номер.

«Тел.: 123-456-7890» создает номер телефона в формате HTML. Номер в кавычках — это номер, по которому он будет звонить.

Номер в тегах >< является визуальной частью и может быть чем угодно, включая номер телефона, строку текста, например «Нажмите, чтобы позвонить» или «Позвонить сейчас», или любой другой призыв к действию. ты хочешь. Это должно быть описание того, что произойдет, когда они щелкнут.

Отображение сообщения вместо номера будет выглядеть так:

 НАЖМИТЕ, ЧТОБЫ ЗВОНИТЬ 

Ваши посетители увидят текст, но когда они нажмут на него, они увидят экран набора своих телефонов с вашим номером, готовым для нажатия кнопки вызова.

Добавление расширения

Некоторые телефонные номера имеют расширение. Вы можете добавить код, который будет создавать короткую паузу перед набором внутреннего номера. Добавление P перед расширением добавит паузу в одну секунду. Код может выглядеть так:

 НАЖМИТЕ, ЧТОБЫ ЗВОНИТЬ 

Это набирает номер, ждет одну секунду, а затем набирает добавочный номер.

Вы можете настроить ожидание гудка, используя w вместо p .

Добавление кодов стран

Коды стран можно добавить, добавив + вместе с кодом страны перед номером телефона. Пример может выглядеть так:

 123-456-7890 

Добавление микроданных для локального SEO

Один из моих любимых способов носить смартфон с собой — это когда я ищу местную компанию, и в результате в Google я получаю кликабельный номер телефона. Я могу щелкнуть номер, чтобы позвонить, не записывая его и не пытаясь запомнить. Эта функция теперь является необходимостью. К счастью, вы можете добавить его на свой веб-сайт, чтобы Google мог предоставлять ваш номер телефона при локальном поиске.

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

Например, код может выглядеть так:

 

Тема WordPress
Телефон: 
234567890

 

Другие призывы к действию

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

• тел: – позвоните по номеру
• mailto: — открыть приложение электронной почты
• вызов: открыть Skype
• смс: – отправить текстовое сообщение
• факс: – отправить факс

Все эти протоколы используются так же, как мы видели выше. Давайте рассмотрим несколько примеров.

Добавление кода на страницу контактов

Одним из лучших мест для добавления ссылки для вызова является контактная информация на странице «Контакты».

Независимо от того, используете ли вы классический редактор или новый редактор Gutenberg, вам необходимо просмотреть текстовую версию страницы. В классическом редакторе перейдите на вкладку Text . В Гутенберге нажмите три точки в правом верхнем углу и выберите Редактор кода .

Добавьте код вместо своего номера телефона.

Выйдите из редактора кода или просмотрите страницу, и вы увидите, что ваш номер телефона теперь является активной ссылкой.

Создание кода для ссылки электронной почты или URL-адреса

HTML-код для электронной почты — mailto: адрес электронной почты добавляется в конец, например:

  [электронная почта защищена] 
Как и в случае с телефонной ссылкой, вы можете использовать визуальную часть для добавления сообщения, например:
 Нажмите здесь, чтобы отправить мне электронное письмо 

Так же, как и телефонная ссылка, вы можете использовать визуальную часть для добавления сообщения, например:

 < href="mailto: [электронная почта защищена]"; Нажмите здесь, чтобы отправить мне электронное письмо 

Вот пример со страницы контактов пакета компоновки Spa. Я добавил модуль аннотации со значком и текстом «Отправить электронное письмо». Я выбрал вкладку «Текст» и добавил HTML-код электронной почты. Текст теперь доступен для кликов и откроет ваше почтовое приложение.

Добавление кода для открытия URL-адресов

Вы можете иметь HTML для открытия любого URL-адреса, который вы хотите. Это хорошо, если вы хотите отправить читателей на страницы для подписки на рассылку новостей, событий и т. д. Чтобы сделать ссылку на них, ваш HTML-код будет включать URL-адрес. Например:

  См. образец страницы> 

Я добавил еще одну аннотацию с кодом для просмотра страницы событий.

Отключить на ПК и планшетах

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

Здесь я создал два модуля с номером телефона: один включает HTML-номер телефона, а другой — нет. Я отключил тот, у которого кликабельный номер на планшетах и ​​компьютерах, поэтому они никогда не увидят ссылку. Я также отключил модуль без ссылки для телефонов, поэтому пользователи телефонов будут видеть только модуль со ссылкой.

Добавление кода в верхний или нижний колонтитул

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

В Личном кабинете выберите Внешний вид > Редактор > Верхний колонтитул темы (или Тема Нижний колонтитул ). Поместите код в часть кода. Я искал закрывающий тег , нажал Enter, чтобы добавить несколько дополнительных строк, и вставил свой код. Вы можете увидеть код здесь, в строках 28 и 29..

Вот как это выглядит, когда я поместил ссылку на звонок и ссылку на электронную почту в заголовок темы Twenty Nineteen. =»mailto:»] {
оранжевый цвет;
текстовое оформление: нет;
поле справа: 0,8em;
}

Указывает CSS, как стилизовать текст для tel: и mailto:. Он меняет шрифт номера телефона на коричневый, шрифт электронной почты на оранжевый и добавляет небольшое поле справа от каждой ссылки.

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

Добавление кода во вторичное меню Divi

Divi может указать ваш номер телефона и адрес электронной почты в дополнительном меню над заголовком. Кнопка электронной почты уже активна по умолчанию, но номер телефона — нет. Номер телефона можно превратить в ссылку для вызова, используя аналогичный номер телефона в формате HTML, который мы использовали в предыдущих примерах.

Перейдите к Настройщику темы > Заголовок и навигация > Элементы заголовка . Это даст вам текстовое поле, где вы можете добавить свой номер телефона. К счастью, вы не ограничены только цифрами. Вы также можете добавить HTML. Я добавил HTML из предыдущих примеров. Я также увеличил размер шрифта номера телефона, чтобы его было легче увидеть на изображениях.

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

 123-456-7890 НАЖМИТЕ, ЧТОБЫ ЗВОНИТЬ 

В этом примере показан только текст.

В этом я добавил номер телефона вместе с текстом.

Тестирование на мобильных устройствах

Я рекомендую протестировать ссылки с мобильных устройств, чтобы убедиться, что они работают. Если у вас нет доступа к смартфону, вы можете использовать инструменты разработчика Google Chrome.

Щелкните правой кнопкой мыши на главной странице и выберите 9.0037 Проверить . В левом верхнем углу экрана вы увидите список устройств. Выберите один, чтобы увидеть, как ваш сайт выглядит на этом экране. Если щелкнуть ссылку с номером телефона в формате HTML, должно открыться диалоговое окно с предложением выбрать приложение. Если вы видите это, ссылка работает. Я по-прежнему рекомендую попробовать его на реальном смартфоне, но это хороший признак того, что ссылка что-то делает.

Добавление ссылок на вызовы с помощью плагинов

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

Кнопка «Позвонить сейчас»

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

Дополнительная информация

Липкие боковые кнопки

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

Дополнительная информация

Контактная планка скорости

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

Дополнительная информация

Мобильная контактная панель

Этот плагин добавляет ссылки на ваш сайт при просмотре на мобильных устройствах. Вы можете выбрать отображаемые ссылки из 13 вариантов, включая телефон, электронную почту, Skype, настраиваемые URL-адреса и социальные сети. Он имеет интеграцию FontAwesome для значков. Вы можете стилизовать ссылки и выбрать размер, границу, непрозрачность и т. д. Установите меню вверху или внизу экрана. Меню остается на экране при прокрутке пользователем. Он также включает прокрутку вверх и корзину WooCommerce с кнопками счетчика товаров.

Дополнительная информация

Последние мысли

Популярность смартфонов для доступа к веб-сайтам растет с каждым днем. Эта популярность превращает ссылки для звонков из простого удобства в полную необходимость. Добавление интерактивных телефонных номеров может иметь значение между пользователями, звонящими в вашу компанию или вашим конкурентам. К счастью, создать кликабельные ссылки для добавления телефонных номеров в формате HTML в верхние и нижние колонтитулы, виджеты, страницы и сообщения вашего веб-сайта WordPress не так сложно.

Мы хотим услышать от вас. Вы добавили ссылки для звонков на свой сайт? Сообщите нам о своем опыте в комментариях ниже.

Избранное изображение через Джейн Келли / Shutterstock.com

Телефонные номера с гиперссылками с якорными тегами

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

63% поисковых запросов в США осуществляются с помощью мобильных технологий. 48 % посещений веб-сайтов – с мобильных устройств.

Zippia Mobile vs Desktop Статистика

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

Одним из элементов, который часто упускают из виду при создании мобильного приложения, является гиперссылка на ваши телефонные номера в HTML, чтобы мобильные пользователи могли просто щелкнуть по ним и начать телефонный звонок. Теги привязки — это активные теги, которые интерпретируются браузерами и позволяют пользователям нажимать на них. Типичный тег привязки для веб-сайта:

 Martech Zone 

Тег привязки, который открывает электронное письмо:

 Нажмите здесь, чтобы отправить нам электронное письмо! 

С помощью mailto вы можете по желанию включить тему и текст электронного письма в ссылку. Однако я бы убедился, что вы URL кодируете текст. Некоторые браузеры разбиваются на пробел:

 Нажмите здесь, чтобы написать нам! 

Номер телефона: Нажмите, чтобы позвонить по гиперссылке

Синтаксис гиперссылки на номер телефона в HTML похож на синтаксис mailto, только вместо него используется тел: :

 Нажмите здесь, чтобы позвонить нам! 

Синтаксис вашего номера телефона не имеет большого значения. Я проверил значение со знаками плюс, круглыми скобками, точками и тире и без них, и все работает как на iPhone, так и на Android.

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

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

Номер телефона: нажмите, чтобы перейти к текстовой гиперссылке

У вас также может быть гиперссылка, которая автоматически генерирует SMS-сообщение:

 Нажмите здесь, чтобы написать нам! 

Вы также можете добавить сообщение:

 Нажмите здесь, чтобы написать нам! 

Как получить номер телефона Click In Analytics

Мы также гарантируем, что эти события фиксируются в Google Analytics ! Если вы хотите измерить, сколько людей нажимают на эти ссылки, вы можете прочитать нашу статью о том, как добавить событие Google Analytics с помощью Диспетчера тегов Google.

Связанные статьи

Проверка также

Закрыть

• Промо: онлайн -редактор видео с более чем 3000 настраиваемых и привлекательных шаблонов для социальных сетей и рекламных объявлений

  Вторник, 15, 2022

• .

  This entry was posted in Популярное