Как правильно использовать интерактивный номер телефона в формате HTML
Время чтения 8 минут
Монитор кампании — 29 марта 2019 г.
Когда-то мобильные устройства в основном использовались для звонков друзьям и родственникам. Однако те дни давно прошли, и с тех пор мы перешли на использование наших iPhone и Android для всего: от игры в Angry Birds до серфинга в Интернете. Тем не менее, голосовые вызовы по-прежнему занимают свое место в мире. Вот почему вам нужен интерактивный HTML-номер телефона в ваших электронных письмах.
Существует множество предприятий, которые до сих пор полагаются на телефонные звонки, чтобы зарабатывать на жизнь — от тайских ресторанов на вынос до вашего местного салона. Возможно, даже вы и ваши клиенты тоже относитесь к этой категории.
Читайте дальше, чтобы узнать, как заставить своих подписчиков звонить из электронной рассылки в формате HTML, полученной в почтовом клиенте для настольных компьютеров, в Интернете или на мобильных устройствах.
Как работает интерактивный номер телефона в формате HTML?
В создании ссылок для удобного звонка нет ничего нового. До того, как эти ссылки использовались кем-либо из вышеперечисленных, URL-адреса Skype были обычным явлением в Интернете. Skype — это программа, которую можно установить на машины Windows и Mac, а также на телефоны iOS и Android. По состоянию на 2017 год у Skype было в среднем 300 миллионов активных пользователей в месяц.
Эти методы можно адаптировать для использования в электронной почте в формате HTML. Полученные ссылки можно настроить, а это означает, что вы можете превратить номер телефона или имя пользователя Skype в смелый призыв к действию. Чтобы продемонстрировать, посмотрите пример шаблона (щелкните, чтобы просмотреть):
Кнопка «Позвонить:» отключена в большинстве браузеров, и об этом будет рассказано далее в этой статье.
Как создать интерактивный номер телефона в формате HTML?
При изучении того, как сделать телефонные номера кликабельными, все зависит от того, насколько вы опытны в кодировании HTML.
Кодирование — это то, что сейчас преподается в школах как часть их обычной учебной программы. Однако так было не всегда, поэтому для многих кодирование может показаться довольно сложным.
Однако существует довольно много инструментов, позволяющих упростить этот процесс. Например, такие веб-сайты, как Wix и WordPress, позволяют выполнять простую настройку веб-сайта без каких-либо предварительных знаний в области кодирования.
То же самое доступно и для маркетинговых инструментов. Здесь, в Campaign Monitor, например, мы разрешаем клиентам доступ и редактирование HTML-кода электронной почты, чтобы помочь им создавать интерактивные кампании по электронной почте. Этот вариант требует знания кодирования HTML. Однако клиенты всегда могут воспользоваться нашим конструктором писем, если у них нет опыта в этой области.
Как создать ссылку «Нажми и позвони» с помощью HTML-кода?
Хотя есть и другие варианты для тех, кто не имеет опыта кодирования HTML, очень важно иметь общее представление о том, как должен выглядеть ваш код, прежде чем вы начнете над ним работать.
Один из самых основных HTML-кодов, с которым маркетологи электронной почты захотят ознакомиться, — это как сделать интерактивный номер телефона в своих электронных письмах, информационных бюллетенях и других рекламных материалах.
Перед тем, как подробно изучить кодирование, необходимое для таких вещей, как номера Skype и другой контент, мы рассмотрим базовый HTML-код, необходимый для создания кликабельного номера телефона.
Для этого откройте HTML-редактор и выполните следующие действия по порядку:
- Начните свой код с
- Запишите, где находятся кавычки, потому что теперь вы будете вводить свой рабочий номер телефона между кавычками. Обязательно введите его без дефисов и введите «тел:», прежде чем начать вводить свой номер.
Например: - Далее вы добавите любой текст, который хотите связать. Этот текст будет находиться между >
- Далее вы добавите любой текст, который хотите связать. Этот текст будет находиться между >
Например: Ниже показано, как выглядит весь код после того, как вы соберете его вместе:
Некоторые почтовые клиенты вызывают головную боль при написании кода
При тестировании рассылок по электронной почте на iPhone и в Gmail мы обнаружили, что оба почтовых клиента автоматически заключают телефонные номера в теги , как в следующем примере:
555-666-7777
Эти теги могут сильно раздражать дизайнеров электронной почты, так как эти «новые» ссылки tel:, как правило, выделяются жирным шрифтом, ярко-синим цветом и часто трудно стилизуются с помощью CSS.
Избавьтесь от головной боли: привязка к телефонным номерам и именам пользователей Skype
Для этой проблемы существует универсальное решение: упреждающее добавление собственных ссылок tel: в HTML-код.
Используя этот метод, вы также можете добавлять ссылки на номера телефонов везде, где считаете нужным. Например, это может быть ваш призыв к действию или окружение строки «Позвоните нам сейчас» в вашем тексте:
Чтобы заказать пиццу, позвоните нам сейчас.
То же самое можно сделать со ссылками на Skype:
Свяжитесь с нами по телефону 555-666-7777. Не забудьте добавитьabcpizza в свои контакты!
Недостатком этого метода является то, что для того, чтобы ссылки можно было обнаружить в почтовых клиентах, мы не можем преобразовать их в ссылки для отслеживания для использования в отчетах о кампаниях Campaign Monitor. Чтобы отключить отслеживание именно для этих ссылок, мы используем атрибут cm_dontconvertlink :
.Чтобы заказать пиццу, позвоните нам сейчас.
Однако не все почтовые клиенты умеют работать с тел: ссылками.
Skype должен быть на компьютере получателя, чтобы Skype: ссылки работали. Имея это в виду, вот как выглядит поддержка в основных почтовых клиентах:
| Настольные почтовые клиенты | Тел: Поддержка | Скайп: Поддержка |
| Перспективы 2007/2010 | № | Да |
| Перспектива 2003 | № | Да |
| Apple Mail | № | Да |
| Почта Windows Live | № | Да |
| Тандерберд | № | Да |
| Клиенты веб-почты | Тел: Поддержка | Скайп: Поддержка |
| Горячая почта | № | № |
| Yahoo! Почта | № | Да |
| Gmail | Да | № |
| АОЛ | № | № |
| Мобильные почтовые клиенты | Тел: Поддержка | Скайп: Поддержка |
| Айфон | Да | Да |
| Android (Gmail) | Да | № |
| Android (по умолчанию) | Да | № |
| BlackBerry 6 ОС | Да | № |
| Windows Mobile 7 | Да | № |
Несмотря на то, что поддержка по телефону: отлично работает в мобильных клиентах, она может быть ненадежной на настольных компьютерах и в клиентах веб-почты.
И наоборот, поддержка Skype: чрезвычайно эффективна в клиентах для настольных ПК, но неэффективна в клиентах для мобильных устройств и веб-почты (если у вас не установлена веб-панель инструментов Skype).
Отключение тел: ссылок в настольных и веб-почтовых клиентах
Учитывая проблемы, связанные с размещением ссылок tel: в любых почтовых клиентах, кроме мобильных, лучше всего отключить их. Это можно сделать, вложив текст ссылки в блочный элемент (например, в таблицу), обернув его ссылкой tel:, а затем применив следующий CSS:
a.disable-ссылка {
события-указатели: нет;
курсор: по умолчанию;
}
...
<таблица>
Звоните: +1800-ABC-ПИЦЦА
Ссылка tel: выше неактивна в Outlook, Apple Mail, Thunderbird и большинстве комбинаций браузер/веб-почта. Однако Google Voice по-прежнему улавливает тел: ссылки, даже при использовании описанных выше обходных путей.
В мобильных почтовых клиентах мы активируем ссылку с помощью запроса:
@media только экран и (max-device-width: 480px) {
[класс = «отключить ссылку»] {
события-указатели: auto !important;
курсор: авто !важно;
}
} Красиво сделано, если я сам так говорю.
Шаблон, который вы можете загрузить и настроить
Это не идеальное решение из-за отсутствия отслеживания и ограничений с поддержкой тел:. Однако, если ваш бизнес опирается на телефонные запросы, вы можете создавать очень инновационные кампании на основе этой техники.
Большое спасибо vlanzoiz за вдохновение и раннее тестирование, а также Panic за то, что позволили мне снова использовать их дизайн. Если у вас есть какие-либо вопросы или комментарии об инициировании телефонных звонков из рассылок по электронной почте, мы будем рады услышать их в комментариях ниже.
Опять же, ниже приведен HTML-код для создания кликабельного номера телефона, который вы можете использовать и настраивать по своему усмотрению.
Подведение итогов
Одна только мысль о HTML-кодировании может вызвать у некоторых моментальную головную боль. Однако со всеми доступными технологиями так быть не должно.
Благодаря HTML-редакторам и программам, созданным специально для маркетологов, вставка HTML-кода в электронные письма, информационные бюллетени и другие маркетинговые материалы может быть простой.
HTML-кодирование может помочь вам добавить в свои почтовые кампании следующее:
- Простые в использовании призывы к действию для потребителей
- Интерактивные телефонные номера
- Интерактивные адреса электронной почты, которые открываются прямо в заданном почтовом приложении
- Интерактивные номера Skype
- Разрешить потребителям отправлять текстовые сообщения на заданный номер
Хотите вывести свои кампании по электронной почте на новый уровень? С конструктором электронной почты Campaign Monitor и редактором HTML добавление интерактивных телефонных номеров и других CTA становится проще простого!
HTML/Tutorials/Links/Verweise auf Mailadressen – SELFHTML-Wiki
Text-Info
- 10min
- einfach
- • Referenzieren in HTML
• Einstieg in HTML
Verlinkte E-Mailadressen können mit dem mailto: Zusatz versehen werden.
Bei einem Klick auf einen solchen E-Mail-Verweis öffnet sich gleich das E-Mail-Programm wie MS Outlook или Thunderbird, wenn es im Betriebssystem als Standardprogramm festgelegt ist.
Бичтен Номер: In den letzten Jahren hat sich aber gezeigt, dass immer mehr Menschen ihre Mails online verwalten, часто sogar auf dem Handy. Deshalb wird der mailto:-Zusatz nicht mehr so часто verwendet.
Sie können auf jede beliebige E-Mail-Adresse im Internet-Format einen Verweis setzen. Eine Internet-gerechte E-Mail-Adresse erkennen Sie u. а. an dem Zeichen @ innerhalb der Adresse. Wenn der Anwender auf den Verweis klickt, kann er eine E-Mail an den betreffenden Empfänger absetzen.
Beispiel
Выходные данные
Verantwortlich für den Inhalt dieser Seiten Фриц Эйерсхейл, [email protected]
E-Mail-Verweise beginnen immer mit mailto: (ohne // dahinter!).
Der Verweis ist bei Anwendern nur ausführbar, wenn der Web-Browser das Erstellen und Absenden von E-Mails unterstützt oder wenn bei solchen Verweisen autotisch ein E-Mail-Programm или Webmail-Service aufgerufen wird. Es ist sinnvoll, im Verweistext die E-Mail-Adresse noch einmal explizit zu nennen (so wie im obigen Beispiel), damit Anwender, bei denen der E-Mail-Verweis nicht ausführbar ist, auf Wunsch separat eine E-Mail senden können.
Бичтен Номер: Wenn Sie eine eine real existsierende E-Mail-Adresse im Klartext im Internet veröffentlichen, können Sie sicher sein, dass diese Adresse früher oder später jede Menge Spam erhält.
Optionen bei E-Mail-Verweisen[Bearbeiten]
Die iter beschriebenen Optionen sind nicht im HTML-Standard verrankert, widesprechen diesem aber auch nicht unbedingt, solange die Kodierungsregeln für URIs eingehalten werden. Da sie von vielen Browsernterpretiert werden, sollen sie hier erwähnt werden.
Sie können:
- E-Mail-Verweise and mehrere Empfänger senden, wahlweise cc (sichtbare Kopienempfänger) или bcc (unsichtbare Kopienempfänger),
- anstelle einer einfachen Адрес электронной почты ein vollständiges Empfängerschema angeben wie
Fritz Eierschale
[email protected]> - ein Subject vordefinieren, sodass beim Öffnen des E-Mail-Editors das Betreff-Feld bereits mit einem Text Ihrer Wahl ausgefüllt ist,
- einen Body-Inhalt vordefinieren, sodass beim Öffnen des E-Mail Editors bereits Text im Nachrichtentext der E-Mail steht, z. Б. Эйне Андреде,
- Все комбинированные варианты.
Es besteht jedoch keinerlei Garantie, dass alle Möglichkeiten in allen Browsern und allen Kombinationen mit E-Mail-Programmen funktionieren. Einige Clients übernehmen die Parameter, wenn der Link geklickt wird. Wird jedoch die Funktion «Link-Adresse kopieren» angewendet, поэтому wird часто nur die Mail-Adresse ohne Параметр übernommen.
ein Hauptempfänger, ein sichtbarer Kopienempfänger
Почта с копией
ein Hauptempfänger, ein unsichtbarer Kopienempfänger
[email protected]"> Mail mit Geheimkopie
vordefinierter Betreff
Почта мит Бетрефф
vordefinierter Nachrichteninhalt
Почта с телом
комбинированный вариант
Почта с копией и почтой
zwei Hauptempfänger
Отправить по почте
vollständiges Adressierungsschema
Почта с адресной схемой
Die Optionen werden im href -Attribut notiert.
Он также содержит специальные HTML-атрибуты для опциональных опций, которые можно использовать в качестве вспомогательных средств. Zuerst wird wie üblich der Empfänger notiert. In den obigen Beispielen (mit Ausnahme des letzten) geschieht das jeweils durch mailto:[email protected] . Dahinter wird ein Fragezeichen ? нотариус. Das ist in der URI-Syntax das übliche Zeichen, um Parameter an eine aufgerufene Adresse zu übergeben. Hinter dem Fragezeichen folgen die Parameter. Jede Option ist so ein Parameter und besteht aus einem Namen, einem Gleichheitszeichen und einem zugewiesenen Wert. Альтернативные названия опций:
-
куб.см(Sichtbarer Kopienempfänger), -
bcc(unsichtbarer Kopienempfänger), -
Тема(Betreff) и -
корпус(Nachrichtentext).
Ein Konstrukt wie [email protected] ist также ein vollständiger Parameter und bedeutet: «sichtbare Copy an heidi.
[email protected]».
Bei den Wertzuweisungen an die Parameter können Zeichen vorkommen, die in einer URL eine besondere Bedeutung haben, beispielsweise leitet das Fragezeichen ? den Bereich mit den Parametern ein, man darf es folglich nur kodiert in einer URL benutzen, wenn man das Zeichen selbst und nicht seine besondere Bedeutung erzielen möchte. Die sogenannte URL-Codierung besteht darin, ein Prozentzeichen zu notieren, gefolgt von der hexadezimal ausgedrückten Zeichennummer des gewünschten Zeichens.
Die folgende Tabelle listet Zeichen auf, die in URLs kodiert werden müssen. Sie ist für auf ASCII aufbauenden Zeichenkodierungen gültig, wie z. B. Верните UTF-8 или ISO-8859-1. Ссылки steht das Zeichen, rechts die Zeichenkette, die sie an Stelle des gewünschten Zeichens verwenden müssen.
| Цайхен | Zeichenkette für Codierung |
|---|---|
| [новая Цайле] | %0А |
| [Вагенрюклауф] | %0D |
| [Лерцайхен] | %20 |
| ! | %21 |
| # | %23 |
| % | %25 |
| * | %2А |
| / | %2F |
| < | %3C |
| > | %3E |
| ? | %3F |
Für das Kodieren dieser reservierten Zeichen bieten die meisten Programmiersprachen eingebaute Funktionen oder Erweiterungen an.
Auch sind passende Converter zu Hauf im Internet zu finden.
Wenn Sie mehrere Optionen kombinieren Wollen, а также z. B. zugleich cc и bcc , müssen Sie die Optionen durch ein kaufmannisches Und (&) voneinander trennen. Dieses Zeichen darf in HTML nicht – auch nicht bei einer Wertzuweisung an ein Attribut – unkodiert vorkommen. Für correktes HTML muss es также als & geschrieben werden. Die folgende Zeichenkette: [email protected]&subject=Hallo%20Fritz,%20hallo%20Heidi kombiniert также die Optionen für cc и предмет .
Das letzte der obigen Beispiele zeigt, wie Sie ein vollständiges Adressierungsschema gemäß RFC 822 als mailto-Adresse angelen. Ein solches Schema, wie Sie es vermutlich aus Ihrer E-Mail-Korrespondenz kennen, lauet beispielsweise: Фриц Айерсхейл В einem E-Mail-Verweis muss die Zuweisung an das href-Attribut so aussehen: mailto:Fritz%20Eierschale%20%3Cfritz.
