Основы AMP для писем

Если вы уже знакомы с AMP, это отличные новости, так как AMP-письма создаются с помощью специализированной версии библиотеки AMP HTML. Если вы не знакомы с AMP, ничего страшного: данный урок содержит всю необходимую информацию, которая позволит вам приступить к созданию правильно сформированных AMP-писем!

Необходимая разметка

AMP-письма выглядят как классические HTML-письма, но с некоторыми отличиями. Ниже приведена минимальная разметка, необходимая для того, чтобы письмо считалось правильно оформленным AMP-письмом.

<!DOCTYPE html>
<html ⚡4email data-css-strict>
  <head>
    <meta charset="utf-8" />
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <style amp4email-boilerplate>
      body {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    Hello, AMP4EMAIL world.
  </body>
</html>

Поставщики услуг электронной почты, поддерживающие AMP-письма, задействуют ряд проверок, чтобы сделать чтение писем приятным и безопасным. Письмо, созданное с использованием AMP, должно отвечать ряду требований, а именно:

Начинаться с тега <!doctype html>. Этот тег является стандартным и для HTML.
Содержать тег верхнего уровня <html amp4email> — или, для большей эффектности, <html ⚡4email>. Это идентифицирует документ как AMP-письмо, чтобы он мог быть обработан соответствующим образом.
Одновременно содержать теги <head> и <body>. В HTML это является опциональным, однако AMP предъявляет более строгие требования.
Включать тег <meta charset="utf-8> в качестве первого дочернего элемента тега <head>. Этот тег используется для определения кодировки страницы.
Импортировать библиотеку AMP при помощи тега <script async src="https://cdn.ampproject.org/v0.js"></script>, размещенного внутри <head>. В противном случае полезная динамическая функциональность, которую предлагает AMP, не будет работать. Рекомендуется размещать это действие как можно раньше внутри тега <head> — сразу после тега <meta charset="utf-8">.
Первоначально скрывать контент письма, пока библиотека AMP не будет загружена, что реализуется размещением в теге <head> шаблонного кода AMP для писем.

<head>
  ...
  <style amp4email-boilerplate>
    body {
      visibility: hidden;
    }
  </style>
</head>

Замена тегов специальными тегами AMP

Поскольку библиотека AMP для писем является подмножеством библиотеки AMP HTML, на нее во многом распространяются те же правила; ресурсозатратные теги HTML заменяются специальными тегами AMP, которые требуют явного указания ширины и высоты. Это позволяет шаблонному коду AMP скрывать контент до тех пор, пока не станет понятно, как он будет выглядеть на устройстве пользователя.

Изображения

Чтобы отрисовка страницы была эффективной, все теги <img> заменяются на <amp-img>. Тег <amp-img> требует указания ширины и высоты и поддерживает систему макетов AMP

<amp-img src="https://link/to/img.jpg"
    width="100"
    height="100"
    layout="responsive">
</amp-img>

Тег <amp-img> предоставляет мощные встроенные средства для управления адаптивным дизайном и установки резервных изображений.

Читайте подробнее об использовании в AMP макетов и медиа-запросов, а также о том, как устанавливать резервные изображения.

Изображения GIF

В AMP есть специальный тег <amp-anim> для GIF-изображений, который позволяет среде выполнения AMP снижать нагрузку на процессор, когда анимация находится вне экрана. Как и в случае с <amp-img>, ширина и высота должны быть заданы явно и элемент должен иметь закрывающий тег.

<amp-anim
    width="400"
    height="300"
    src="my-gif.gif">
</amp-anim>

Кроме того, элемент обладает поддержкой опционального дочернего элемента placeholder (элемент-заполнитель, который отображается во время загрузки файла из src), а также поддерживает систему макетов AMP.

<amp-anim width=400 height=300 src="my-gif.gif" layout="responsive">
  <amp-img placeholder width=400 height=300 src="my-gif-screencap.jpg">
  </amp-img>
</amp-anim>

Стилизация писем

Как и все почтовые клиенты, AMP разрешает использование встроенных атрибутов style, но он также поддерживает CSS внутри тега <style amp-custom>, расположенного в теге head письма.

...
<style amp-custom>
  /* any custom styles go here. */
  body {
    background-color: white;
  }
  amp-img {
    border: 5px solid black;
  }
</style>
...
</head>

Как и письма HTML, AMP для писем поддерживает ограниченный набор селекторов и свойств CSS.

Полный список возможностей CSS, поддерживаемых различными почтовыми клиентами при просмотре AMP-писем, см. в статье Поддержка CSS в AMP для писем.

AMP устанавливает для стилей ограничение по размеру — 75 000 байт.

Разрешенные компоненты AMP

Динамические, визуальные и интерактивные функции компонентов AMP — это именно то, благодаря чему AMP-письма могут считаться будущим электронной почты.

Полный список компонентов, поддерживаемых в AMP для писем, доступен в тексте спецификации «AMP для писем».

Аутентификация запросов

Письма с динамическим персонализированным контентом зачастую требуют аутентификации пользователя, однако в целях защиты пользовательских данных все HTTP-запросы, отправляемые из AMP-писем, могут пропускаться через прокси-сервер с удалением всех файлов cookie.

Для аутентификации запросов, отправляемых из AMP-писем, можно использовать токены доступа.

Токены доступа

Для аутентификации пользователя можно использовать токены доступа. Токены доступа выдаются и проверяются отправителем письма. Отправитель использует их, чтобы гарантировать, что только тот, у кого есть доступ к AMP-письму, сможет выполнить содержащиеся в нем запросы. Токены доступа должны быть криптографически безопасными и иметь ограниченное время и область действия. Они включаются в URL-адрес запроса.

Приведенный ниже пример демонстрирует использование <amp-list> для отображения данных, для доступа к которым требуется аутентификация:

<amp-list
  src="https://example.com/endpoint?token=REPLACE_WITH_YOUR_ACCESS_TOKEN"
  height="300"
>
  <template type="amp-mustache"> ... </template>
</amp-list>

Тот же принцип действует и при использовании компонента <amp-form>: добавьте токен доступа к URL-адресу action-xhr.

<form
  action-xhr="https://example.com/endpoint?token=REPLACE_WITH_YOUR_ACCESS_TOKEN"
  method="post"
>
  <input type="text" name="data" />
  <input type="submit" value="Send" />
</form>

Пример

Пример, приведенный ниже, — часть гипотетического сервиса заметок, позволяющего пользователям, выполнившим вход, добавлять в свой аккаунт заметки и просматривать их позже. Предположим, что сервис хочет отправить пользователю jane@example.com письмо со списком ранее добавленных заметок. Список заметок текущего пользователя доступен в конечной точке https://example.com/personal-notes в формате JSON.

Перед отправкой письма сервис генерирует криптографически защищенный токен доступа ограниченного использования для jane@example.com: A3a4roX9x. Токен доступа подставляется в поле exampletoken URL-адреса запроса:

<amp-list
  src="https://example.com/personal-notes?exampletoken=A3a4roX9x"
  height="300"
>
  <template type="amp-mustache">
    <p></p>
  </template>
</amp-list>

Конечная точка https://example.com/personal-notes отвечает за проверку параметра exampletoken и поиск пользователя, связанного с токеном.

Токены доступа ограниченного использования

Токены доступа ограниченного использования предоставляют защиту от подделки запросов и атак повторного воспроизведения, гарантируя, что действие будет выполнено именно адресатом сообщения. Для обеспечения защиты к параметрам запроса добавляется уникальный токен, который затем используется для подтверждения действия.

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

Для отправки пользователю токенов доступа используйте свойство url обработчика HttpActionHandler. Например, если ваше приложение обрабатывает запросы на одобрение по адресу http://www.example.com/approve?requestId=123, возможно, вам следует включить в URL-адрес дополнительный параметр accessToken и следить за запросами, отправляемыми на адрес http://www.example.com/approve?requestId=123&accessToken=xyz .

Сочетание параметров requestId=123 и accessToken=xyz необходимо сгенерировать заранее, позаботившись о том, чтобы accessToken нельзя было рассчитать, зная только requestId. Любые запросы на одобрение с requestId=123 и без указания accessToken (или с accessToken, отличным от xyz) следует отклонять.

Тестирование в различных почтовых клиентах

Почтовые клиенты, поддерживающие AMP для писем, предоставляют собственную документацию и инструменты тестирования, чтобы помочь вам в интеграции.

См. Тестирование AMP-писен для получения дополнительной информации и ссылок на документацию по отдельным почтовым клиентам.

Written by @CrystalOnScript