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

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

Что такое кликабельный номер телефона

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

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

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

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

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

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

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

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

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

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

Убедитесь, что у вас есть доступ к редактированию кода вашей площадки в конструкторе сайтов, напрямую в панели вебмастера или через 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, то наш сервис подменяет и такие номера, сохраняя текст.

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

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

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