Содержание
как настроить и почему это важно
Вспомните, каково звонить в компанию, если телефон на сайте указан без ссылки, как обычный текст. Выделяешь номер, копируешь, закрываешь браузер, открываешь меню для набора номера, вставляешь, звонишь. Такой процесс осилит не каждый. Особенно, если времени мало, а на сайте конкурента можно позвонить в один клик. Подобный недочет довольно легко исправить — добавить на сайт кликабельный номер. Как сделать это — мы написали детальную инструкцию.
Время чтения: 8 минут
- Что такое кликабельный номер телефона
- Почему важно использовать кликабельные номера для мобильной версии сайта
- Как проверить, можно ли позвонить с вашего сайта в один клик
- Как сделать номер телефона на сайте кликабельным
Что такое кликабельный номер телефона
Кликабельный номер или click-to-call номер — это телефон на сайте, при нажатии на который сразу происходит вызов.
Эта опция предназначена специально для пользователей из мобайла. Позвонить можно и с десктопной версии, если на компьютере установлена программа для звонков.
«Если честно, мы не перестаем удивляться. Вроде бы 21 век, мобильный трафик постоянно растет, у многих уже есть адаптивные версии сайта. Но мы все равно сталкиваемся с проектами, у которых не настроен кликабельный номер телефона для мобайла. Люди просто не понимают, насколько важна эта функция. А ведь так бизнес теряет часть клиентов, даже не зная об этом».
Евгений Заступ,
руководитель техподдержки Ringostat
Почему важно использовать кликабельные номера для мобильной версии сайта
- Человек, который открыл сайт со смартфона, не настроен долго выбирать и рассматривать товар. Это повышает вероятность, что он именно позвонит, а не напишет в чат или в соцсети.
- Поведение пользователя мобильного отличается от человека, сидящего за компьютером с полноценной клавиатурой. На небольшом экране неудобно выделять, вставлять и копировать символы.
Велика вероятность, что пользователь пойдет искать другую компанию, которой легче позвонить. Тем более, что кликабельные номера уже не редкость, и многие к ним привыкли. - 46% людей, у которых был негативный опыт с мобильной версией страницы, говорят, что больше ничего не купят у данной компании. А попытка звонка с сайта — это часть пользовательского опыта.
- Свыше 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, то наш сервис подменяет и такие номера, сохраняя текст.
ВАЖНО: Если вы хотите подключить коллтрекинг, мы рекомендуем сначала сделать номера на сайте кликабельными. В противном случае, при подключении кода отслеживания будет сложней предусмотреть, чтобы стили не нарушились.
Зато при настройке коллтрекинга на сайт с кликабельными номерами все шрифты и форматирование сохраняются.
Наш сервис автоматически подменяет имеющуюся ссылку и ее содержимое.
Если у вас возникли вопросы и сложности при настройке по инструкции — напишите в чат нашей техподдержке. Ребята подскажут ответы по возникшим вопросам и помогут с рекомендацией для вашего сайта.
Как сделать кликабельный номер телефона на сайте | Блог YAGLA
Когда пользователь может в один клик по номеру телефона сделать звонок, это в плюс и ему, и вам. Он тратит минимум усилий и времени, чтобы вам дозвониться, а вы получаете +1 целевой звонок. Естественно, это относится к мобильным устройствам.
В этой статье мы покажем, как сделать кликабельный номер телефона на сайте. Алгоритмы отличаются в зависимости от того, на чем создан ваш сайт.
HTML-код
Обычный номер телефона, который пока является простым текстом, в коде может выглядеть так:
<span>+7(999)888-77-66</span>
Или так (если присвоен класс):
<pnumber» 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>
К тексту добавили действие – вызов на конкретный номер.
Сделаем и второй номер кликабельным:
<pnumber» name=»phone_number»>
<a href=”tel:+79998887766”>+7(999)888-77-66</a>
</p>
По этому же принципу вы можете сделать кликабельный email.
Чтобы email стал кликабельным, поставьте атрибут <a href=”mailto:XXX”>.
Сайт на WordPress
Для Вордпресса есть специальный плагин CallPhone’r.
Этот модуль выводит на каждой странице сайта иконку, при нажатии на которую мобильное устройство переходит в режим вызова.
Там же есть возможность настройки по времени отображения иконки. Это позволит не получать звонки от клиентов в нерабочее время.
Сайт на mottor (LPmotor)
Этот конструктор дает несколько вариантов.
1) Телефон в виде текста.
В этом случае выделите текст телефона в блоке и нажмите кнопку добавления ссылки в панели редактирования:
2) Переход к набору номера с кнопки. В панели редактирования блока «Кнопка» необходимо выставить «Переход по ссылке» и указать ваш номер телефона в формате «tel:88005555555».
3) Переход к набору номера с иконки/картинки. Здесь в выпадающем меню «Действие» нужно выбрать «Переход по ссылке» и вставить номер в формате «tel:+74957873422».
4) Также можно вставить кликабельный телефон на сайт в виде html блока.
Тогда в поле «Редактирование HTML-кода» нужно вставить
<a href=»tel:+74957873422″>Позвонить 8 (495) 787 34 22</a>.
Сайт на Wix
1) Чтобы создать кликабельный номер телефона:
— Добавьте текст. Вот инструкция из базы знаний Wix о том, как это сделать;
— Нажмите «Редактировать текст»;
— Введите номер телефона. Не вводите другой текст в том же окне.
2) Чтобы связать текст ссылкой с номером телефона:
— Добавьте текст;
— Нажмите «Редактировать текст»;
— Введите текст, например, «Позвонить сейчас»;
— Выделите текст;
— Нажмите на иконку «Ссылка»;
— Выберите Номер телефона;
— Введите номер телефона в поле «Номер телефона»;
— Нажмите «Готово».
3) Чтобы связать кнопку ссылкой с номером телефона:
— Добавьте кнопку
— Измените текст кнопки
— Нажмите на иконку Ссылка
— Выберите Номер телефона
— Введите номер телефона в поле «Номер телефона»
— Нажмите «Готово».
Сайт на Tilda
Чтобы при клике на номер телефона начинался звонок или при клике на e-mail открывался почтовый клиент, нужно навесить на них ссылки.
1) Ссылка, которую нужно задать тексту с номером телефона: tel:+71234567890 (все без пробела). Будет работать при просмотре сайта на телефоне.
Например, выбираете блок меню ME301, во вкладке Контент в поле Дополнительно указываете номер телефона, затем выделяете его и с помощью выпадающей панели инструментов для текста добавляете ссылку вида tel:+7123456789.
2) Ссылка, которую нужно задать тексту с адресом почты: [email protected]. При добавлении ссылки в Контент блока в поле «Ссылка», нужно указывать ссылку как mailto:[email protected].
Как отслеживать клики по номеру телефона
Это можно делать без вмешательства в код и установки Менеджера тегов Google. В Яндекс.Метрике не так давно появился новый тип цели – «Клик по номеру телефона». Достаточно указать нужные параметры, и данные о звонках будут поступать в Метрику:
Чтобы всё работало, важно указать номер в точности такой же, какой указан в коде сайта. Лучше всего скопировать адрес ссылки прямо с сайта.
Для этого:
- Кликните правой кнопкой мыши по номеру на сайте и нажмите в меню «Просмотреть код»;
- В открывшейся консоли разработчика вы увидите нужную ссылку с номером;
- Скопируйте её и вставьте в параметрах цели.
Данные по кликам на номер телефона появятся в отчете «Конверсии» уже через несколько минут после создания цели.
Хотите тоже написать статью для читателей Yagla? Если вам есть что рассказать про маркетинг, аналитику, бизнес, управление, карьеру для новичков, маркетологов и предпринимателей. Тогда заведите себе блог на Yagla прямо сейчас и пишите статьи. Это бесплатно и просто
Как добавить на свой веб-сайт ссылки и призывы к действию
На многих бизнес-сайтах указан номер телефона, по которому клиенты могут связаться с ними. Когда настольные компьютеры были самым популярным способом доступа к сайтам, пользователи записывали номер телефона и звонили с отдельного устройства. Конечно, большинство пользователей сейчас заходят на сайт и звонят с одного и того же устройства.
Это открывает возможность добавить ссылку для вызова — создать HTML-номер телефона, по которому можно щелкнуть.
В этой статье мы рассмотрим, как добавить ссылку для вызова, а также несколько других интерактивных ссылок, таких как электронная почта и другие CTA.
Подпишитесь на наш канал Youtube
- 1
Как работают ссылки на звонки- 1.1
Добавление ссылки для вызова номера телефона в формате HTML на ваш веб-сайт - 1,2
Добавление расширения - 1,3
Добавление кодов стран - 1,4
Добавление микроданных для локального SEO - 1,5
Другие призывы к действию - 1,6
Добавление кода на страницу контактов - 1,7
Создание кода для ссылки или URL-адреса электронной почты - 1,8
Добавление кода для открытия URL-адресов - 1,9
Отключить на рабочем столе и планшете - 1. 10
Добавление кода в верхний или нижний колонтитул - 1.11
Стилизация ссылок - 1.12
Добавление кода во вторичное меню Divi - 1.13
Тестирование на мобильных устройствах
- 1.1
- 2
Добавление ссылок на вызовы с помощью плагинов- 2.1
Кнопка «Позвонить сейчас» - 2.2
Липкие боковые кнопки - 2.3
Панель управления скоростью - 2,4
Мобильная панель контактов
- 2.1
- 3
Последние мысли
10Как работают ссылки вызовов
Сделать номер телефона интерактивным легко с помощью 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.0083 Осмотреть . В левом верхнем углу экрана вы увидите список устройств.
Выберите один, чтобы увидеть, как ваш сайт выглядит на этом экране. Если щелкнуть ссылку с номером телефона в формате HTML, должно открыться диалоговое окно с предложением выбрать приложение. Если вы видите это, ссылка работает. Я по-прежнему рекомендую попробовать его на реальном смартфоне, но это хороший признак того, что ссылка что-то делает.
Добавление ссылок на звонки с помощью плагинов
Вы также можете добавить ссылку на звонок в шапку с помощью плагина. Обычно они включают в себя функции для стилизации, добавления нескольких призывов к действию и возможность включения или выключения в зависимости от устройства посетителя. Их также легко настроить и использовать. Это отличный выбор, если вы не хотите обрабатывать код. Вот несколько лучших вариантов.
Кнопка вызова сейчас
Кнопка «Позвонить сейчас» добавляет кнопку вызова в нижней части экрана для мобильных посетителей. На других устройствах не отображается. Вы также можете добавить текст, если хотите.
Кнопка представляет собой значок телефона, поэтому легко понять, для чего она предназначена. Все, что вам нужно сделать, это активировать кнопку и ввести свой номер телефона. Вы можете изменить поведение по умолчанию в дополнительных настройках.
Дополнительная информация
Липкие боковые кнопки
Этот плагин позволяет добавлять кнопки, которые прикрепляются сбоку вашего веб-сайта и остаются на экране, когда пользователь прокручивает страницу. Вы можете добавить интерактивный номер телефона, адрес электронной почты, значки социальных сетей и адреса магазинов. Установите их справа или слева, выберите стили анимации и прокрутки, настройте цвета и выберите, где они будут отображаться.
Дополнительная информация
Контактная планка скорости
Добавляет панель контактов, которая включает интерактивные ссылки для номера телефона, номера факса, заголовка, адреса, электронной почты, социальных сетей и настраиваемых URL-адресов.
Установите панель вверху или внизу и отрегулируйте размер, цвет, цвет текста и ссылок, а также реакцию панели. Вы также можете настроить размер. вы можете добавить больше контента, используя перехватчики фильтров.
Дополнительная информация
Мобильная контактная панель
Этот плагин добавляет ссылки на ваш сайт при просмотре на мобильных устройствах. Вы можете выбрать отображаемые ссылки из 13 вариантов, включая телефон, электронную почту, Skype, настраиваемые URL-адреса и социальные сети. Он имеет интеграцию FontAwesome для значков. Вы можете стилизовать ссылки и выбрать размер, границу, непрозрачность и т. д. Установите меню вверху или внизу экрана. Меню остается на экране при прокрутке пользователем. Он также включает прокрутку вверх и корзину WooCommerce с кнопками счетчика товаров.
Дополнительная информация
Последние мысли
Популярность смартфонов для доступа к веб-сайтам растет с каждым днем. Эта популярность превращает ссылки для звонков из простого удобства в полную необходимость. Добавление интерактивных телефонных номеров может иметь значение между пользователями, звонящими в вашу компанию или вашим конкурентам. К счастью, создать интерактивные ссылки для добавления телефонных номеров в формате HTML в верхние и нижние колонтитулы, виджеты, страницы и записи вашего веб-сайта WordPress не так сложно.
Мы хотим услышать от вас. Вы добавили ссылки для звонков на свой сайт? Сообщите нам о своем опыте в комментариях ниже.
Избранное изображение через Джейн Келли / Shutterstock.com
Телефонные номера с гиперссылками с якорными тегами
Маркетинг для мобильных устройств и планшетовКонтент-маркетинг
Дуглас Карр 77 947 2 минуты чтения
На работе , мы часто садимся за ноутбук или рабочий стол, чтобы просмотреть наши корпоративные веб-сайты на большом экране… но если вы посмотрите на мобильные посещения вашего веб-сайта, вы можете быть поражены тем, что большинство посетителей приходят с мобильных устройств.
Если вы начнете разбивать свой трафик по источникам перехода, вы, вероятно, еще больше удивитесь тому, что пользователи поисковых систем преимущественно мобильные.
Пожалуйста, включите JavaScript
Как использовать ссылки в HTML — Внутренние и внешние ссылки в HTML Учебное пособие 7
63% поисковых запросов в США осуществляются с помощью мобильных технологий. 48 % посещений веб-сайтов – с мобильных устройств.
Zippia Mobile vs Desktop Статистика
Теперь, когда компании видят, что значительная часть их посетителей заходит с мобильных устройств, наличие веб-сайта, готового для мобильных устройств, больше не вариант, а необходимость.
Одним из элементов, который часто упускается из виду при создании мобильного интерфейса, является гиперссылка на ваши телефонные номера в HTML, чтобы мобильные пользователи могли просто щелкнуть по ним и начать телефонный звонок. Теги привязки — это активные теги, которые интерпретируются браузерами и позволяют пользователям нажимать на них.
Типичный тег привязки для веб-сайта:
Martech Zone
Тег привязки, который открывает электронное письмо:
Нажмите здесь, чтобы написать нам!
С помощью mailto вы можете по желанию включить тему и текст электронного письма в ссылку. Однако я бы убедился, что вы URL кодируете текст. Некоторые браузеры прерываются на пробел:
Нажмите здесь, чтобы написать нам!
Номер телефона: гиперссылка Click To Call
Синтаксис гиперссылки на номер телефона в HTML подобен синтаксису mailto, только используется тел: вместо:
Нажмите здесь, чтобы позвонить нам!
Синтаксис вашего номера телефона не имеет большого значения. Я проверил значение со знаками плюс, круглыми скобками, точками и тире и без них, и все работает как на iPhone, так и на Android.
Я стараюсь поддерживать чистоту, удаляя все, кроме цифр. Я бы также рекомендовал включать код страны в номер телефона со знаком плюс, особенно если вы привлекаете бизнес на международном уровне.
Когда мы оптимизируем сайты наших клиентов, мы обеспечиваем наличие гиперссылок на все номера телефонов. Если это призыв к действию, мы обычно форматируем ссылку как кнопку, чтобы было очевидно, что по ней можно щелкнуть.
Номер телефона: гиперссылка Click To Text
Вы также можете использовать гиперссылку, которая автоматически создает SMS-сообщение:
Нажмите здесь, чтобы написать нам!
Вы может дополнительно включать сообщение:
Нажмите здесь, чтобы написать нам!
Как зафиксировать номер телефона Click In Analytics
Мы также гарантируем, что мы регистрируем эти события в Google Аналитика! Если вы хотите измерить, сколько людей нажимают на эти ссылки, вы можете прочитать нашу статью о том, как добавить событие Google Analytics с помощью Диспетчера тегов Google.