Как управлять тем, что автоматическая ссылка Gmail распознает как адрес или номер телефона?
У меня возникают непоследовательные / некорректные проблемы при доставке транзакционных писем (в данном примере - письма с подтверждением покупки) клиентам.
Gmail не только автоматически связывает адрес (в данном случае динамический локальный адрес магазина), но также сопоставляет первые несколько цифр номера телефона под ним как часть адреса. Это приводит к сбрасыванию последующей карты, на которую она ссылается, поскольку код области добавляется к адресным данным, которые Google отправляет в картографический сервис.
Однако автоматическое связывание не всегда работает так, как описано выше. В некоторых случаях телефонный номер (в формате: (xxx) xxx-xxxx) остается неизменным. В других случаях он распознает только часть данного адреса для ссылки. Очевидно, это приводит к ухудшению качества обслуживания клиентов и требует исправления, но мне поручено решить эту проблему, не прибегая к отключению этой функции, поскольку наш отдел маркетинга хочет сохранить функцию в том виде, в каком она была задумана (что справедливо для удобства использования).
Любые идеи о том, почему это может происходить в коде или, возможно, как указать адрес или номер телефона в разметке вручную, чтобы Gmail знал, что конкретно нужно автоматически связывать как что?
Это таблица ДО Gmail:
<table border = "0" cellpadding = "0" cellspacing = "0" width = "100%">
<tbody>
<tr>
<td align = "left" class = "mob_font1" style = "color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none;" valign = "top">Jessica Jones</td>
</tr>
<tr>
<td align = "left" class = "mob_font1" style = "color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none;" valign = "top">123 Main St</td>
</tr>
<tr>
<td align = "left" class = "mob_font1" style = "color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none;" valign = "top">Nixa, MO 65714</td>
</tr>
<tr>
<td align = "left" class = "mob_font1" style = "color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none; pointer-events: none;" valign = "top">(417) 222-2222</td>
</tr>
</tbody>
</table>Это оскорбительная таблица HTML в живом тесте, ПОСЛЕ того, как gmail справится с ней:
<table width = "100%" cellspacing = "0" cellpadding = "0" border = "0">
<tbody>
<tr>
<td class = "m_2777276863125780910mob_font1" style = "color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign = "top" align = "left">Jessica Jones</td>
</tr>
<tr>
<td class = "m_2777276863125780910mob_font1" style = "color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign = "top" align = "left"><a href = "https://maps.google.com/?q=123+Main+St+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+Nixa,+MO+65714+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+(417&entry=gmail&source=g">123 Main St</a></td>
</tr>
<tr>
<td class = "m_2777276863125780910mob_font1" style = "color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign = "top" align = "left"><a href = "https://maps.google.com/?q=123+Main+St+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+Nixa,+MO+65714+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+(417&entry=gmail&source=g">Nixa, MO 65714</a></td>
</tr>
<tr>
<td class = "m_2777276863125780910mob_font1" style = "color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign = "top" align = "left"><a href = "https://maps.google.com/?q=123+Main+St+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+Nixa,+MO+65714+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+(417&entry=gmail&source=g">(417</a>) 222-2222</td>
</tr>
</tbody>
</table>Как видите, Google по какой-то причине объединил все три строки для создания их URL. Я просто не могу найти документацию, которая привела бы к лучшему пониманию того, что они могут использовать для идентификации адреса или номера телефона, чтобы это можно было контролировать или избегать. Их публичные примечания к выпуску за сентябрь 2017 года, к сожалению, не предназначены для разработчиков.
И вот как это отображается в Gmail / Firefox (самая последняя версия):
Думаю, нам понадобится пример отправляемого электронного письма. Это наверняка связано с точной последовательностью символов, которые вы отправляете получателю.
@YaakovAinspan, знаете ли вы, распознает ли Gmail их для автоматического связывания?
Нет, вы можете исследовать это, хотя
Возможный дубликат Подпись электронной почты
Ответы 2
Поместите эти два метатега в ваш <head>:
<head>
<meta name = "format-detection" content = "telephone=no" />
<meta name = "format-detection" content = "email=no" />
</head>
Поместите это в свою таблицу стилей:
<style>
*[x-apple-data-detectors], .x-gmail-data-detectors, .x-gmail-data-detectors *, .aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
</style>
В вашем теле, где находятся данные вашего клиента, добавьте класс и добавьте hrefs к номеру телефона и адресу электронной почты:
<p class = "x-gmail-data-detectors">Herman Munster<br />
1313 Mockingbird Lane<br />
Hollywood, CA 90210<br />
<a href = "tel:+01-(323) 000-0000">(323) 000-0000<br />
<a href = "mailto:[email protected]" target = "_blank">[email protected]
</p>
Что это должно сделать, так это устранить синее подчеркивание в вашем электронном письме, но все же позволить вам, чтобы, если кто-то щелкнул по номеру телефона или адресу электронной почты, он все равно откроет почтовый клиент по умолчанию или запустит приложение для телефона и позволит вам вызвать. .
Вот два ресурса, которые должны предоставить вам дополнительную информацию:
- https://yoast.com/dev-blog/guide-mailto-links/
- https://css-tricks.com/the-current-state-of-telephone-links/
Удачи.
Спасибо за ваш ответ @gwally, но моя проблема заключается не в удалении автоматической ссылки, а в ее контроле, чтобы он не включал дополнительный, несвязанный контент (например, сверх того, что он должен для адреса).
@EmailDharma Как упоминает Тед Гоас, мы не можем помешать Gmail или любому почтовому клиенту делать то, что он хочет, с нашими электронными письмами, когда они получены. Что мы можем сделать, так это помочь этой информации идентифицировать и стилизовать. В вашем примере Gmail объединяет адрес и номер телефона. Я опубликовал методы, которые помогут Gmail понять, что такое адрес, номер телефона или адрес электронной почты. Удачи.
Поздравляю с первым вопросом о Stack Overflow ?!
Как и @gwally упомянул, размещение его в вашем <head> должно решить эту проблему в некоторых почтовых клиентах (в основном, в почте iOS).
<head>
<meta name = "format-detection" content = "telephone=no">
<meta name = "format-detection" content = "email=no">
</head>
После этого мы можем добавить такой класс в область <head><style>:
*[x-apple-data-detectors], /* iOS */
.unstyle-auto-detected-links *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
Размещение класса в родительском <td> - это слишком агрессивно, поскольку он пытается слишком много стилизовать и может в конечном итоге испортить все текст (а не только текст, обнаруженный автоматически по ссылке). Обертывание всего, что мощь включает номер телефона, почтовый адрес или дату в <span class = "unstyle-auto-detected-links">, хорошо масштабируется, правильно наследуется и может использоваться в любом месте электронной почты.
<td>
<span class = "unstyle-auto-detected-links">123 Fake Street, SpringField, OR, 97477 US<br>(123) 456-7890</span>
</td>
Important to note that we can't remove the link, we can only style the link text so it does not appear as a hyperlink (it will still be click-able / tap-able).
В последнее время я использую эту технику в наших электронных письмах на Stack Overflow, и (пока) она работает хорошо. Ваше здоровье!
Спасибо, @Ted Goas! Прошло много времени с конференции TED в Бостоне ... это был 2015 или 2016 год? В любом случае, моя проблема не в стиле автоматической привязки или попытках ее отключить (наш отдел маркетинга хотел бы оставить ее включенной). Я пытаюсь контролировать то, что Gmail идентифицирует как адрес или номер телефона, поскольку он необъяснимо неверно идентифицирует некоторые данные, что, например, вызывает проблемы с последующей ссылкой на карту. Если вы посмотрите на последний <a> во втором фрагменте, вы можете увидеть, как Gmail добавляет часть кода зоны телефонного номера клиента в данные адреса, которые он возвращает для функции карты.
@EmailDharma, о, я не верю, что есть способ точно повлиять на какие, который почтовый клиент определяет как ссылку, поэтому я выбрал «избегающий» угол, чтобы замаскировать это, гм .. ошибка. <a href = "">(417</a>) 222-2222 боже, гугл.
Это был 2015 год, когда вы там выступали. Я был бородатым, длинноволосым, который с радостью присоединился к вам, ребята (вы, Фабио, Эллиот, Роббинс и остальная команда) однажды вечером в Whisky Priest. Хорошие времена.
@EmailDharma да я помню! Вот и мы сзади! :)
Нииче, вот и все! Человеку будет трудно найти более квалифицированную (и веселую) группу почтальонов!
Есть элемент
address, и вы можете использовать<a href='tel:1234567890'>для телефонных номеров.