Как контролировать, что автоматическая ссылка Gmail распознает как адрес или номер телефона? - PullRequest
0 голосов
/ 04 мая 2018

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

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&amp;entry=gmail&amp;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&amp;entry=gmail&amp;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&amp;entry=gmail&amp;source=g">(417</a>) 222-2222</td>
    </tr>
  </tbody>
</table>

Как видите, Google почему-то объединяет все три строки, чтобы создать их URL. Я просто не могу найти документацию, которая позволила бы лучше понять, что они могут использовать для определения адреса или номера телефона, чтобы их можно было контролировать или избегать. Их публичные заметки о выпуске в сентябре 2017 года, к сожалению, не были предназначены для разработчиков.

А вот как это отображается в Gmail / Firefox (самая последняя версия):

В папке "Входящие"

Ответы [ 2 ]

0 голосов
/ 07 мая 2018

Эй, поздравляю с первым вопросом о переполнении стека ?!

Как упоминалось @ 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>

Важно отметить, что мы не можем удалить ссылку, мы можем только стиль текст ссылки, чтобы он не отображался как гиперссылка (он все равно будет доступен для щелчка мышью) / возможность нажатия).

В последнее время я использовал эту технику в наших электронных письмах в Stack Overflow, и (до сих пор) она работала хорошо. Ура!

0 голосов
/ 05 мая 2018

Поместите эти два мета-тега в <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:herman@munster.com" target="_blank">herman@munster.com
</p>

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

Это два ресурса, которые должны дать вам больше информации:

Удачи.

...