Топ-8 тонкостей при создании AMP-писем

AMP в email-рассылках — это способ добавить в письмо интерактив: формы, карусели, смену контента без перехода на сайт. Однако, как и в случае с обычными html-письмами, здесь есть свои особенности отображения и поведения, которые важно учитывать при верстке и тестировании.

В этой статье разбираем 8 распространённых проблем, с которыми сталкиваются верстальщики при работе с AMP-письмами, — и показываем, как их решать на практике: с примерами, кодом и пояснениями.

1. Проблема AMP-карусели в Gmail на iOS

При использовании стандартного компонента <amp-carousel> в Gmail на iOS возникает неприятный баг — при переключении слайдов письмо резко прокручивается вверх. Проблема известна давно, но поведение так и не было исправлено.

Решение: Не использовать <amp-carousel>, а реализовать его имитацию с помощью состояний (amp-bind). Ниже — рабочий пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<amp-state id="carouselState">
  <script type="application/json">
    {
        "index": 0
    }
  </script>
</amp-state>

<style amp-custom>
  .carousel-wrapper {
    position: relative;
    width: 450px;
    height: 300px;
    overflow: hidden;
  }
  .carousel-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  .slide-0 { transform: translateX(0%); }
  .slide-1 { transform: translateX(-100%); }
  .slide-2 { transform: translateX(-200%); }
  .carousel-slide {
    min-width: 100%;
    flex: 0 0 auto;
  }
</style>

<div class="carousel-wrapper">
  <div class="carousel-container" [class]="'carousel-container slide-' + carouselState.index">
    <amp-img src="https://amp.dev/static/inline-examples/images/image1.jpg" width="450" height="300" class="carousel-slide"></amp-img>
    <amp-img src="https://amp.dev/static/inline-examples/images/image2.jpg" width="450" height="300" class="carousel-slide"></amp-img>
    <amp-img src="https://amp.dev/static/inline-examples/images/image3.jpg" width="450" height="300" class="carousel-slide"></amp-img>
  </div>
</div>

<button on="tap:AMP.setState({carouselState: {index: (carouselState.index - 1 + 3) % 3}})">
  Previous
</button>

<button on="tap:AMP.setState({carouselState: {index: (carouselState.index + 1) % 3}})">
  Next
</button>

2. Проблема начальных AMP-состояний в Mail.ru

Начальное состояние, заданное через <amp-state>, не применяется при загрузке письма — оно подставляется только после действия пользователя (setState). Mail.ru же полностью игнорирует содержимое <amp-state>. Рассмотрим на примере:

1
2
3
4
5
6
7
8
9
<amp-state id="myItem">
  <script type="application/json">
    {
        "el":"some value"
    }
  </script>
</amp-state>
<span [text]="myItem.el"></span>
<button on="tap:AMP.setState({})">Кнопка</button>

При загрузке письма мы не увидим текста. В Gmail он появится только после клика на кнопку. Mail.ru же после клика на кнопку вместо текста отобразит null.

Решение:

1. Добавьте значение по умолчанию в HTML, чтобы текст отображался сразу.

1
<span [text]="myItem.el">some value</span>

2. Для корректной работы в Mail.ru, нициализируйте состояние вручную по действию пользователя. Не используйте <amp-state> для начальной инициализации, а задайте значение через setState:

1
2
3
4
<button on="tap:AMP.setState({ myItem: { el: 'some value' } })">
  Кнопка
</button>
<div [text]="myItem.el"></div>

3. Ограничение длины выражений в Mail.ru

Ещё одна особенность AMP в Mail.ru — ограничение на сложность/длину выражений, используемых в bind. Максимальный размер выражения — 100 единиц. Если выражение превышает этот лимит, Mail.ru выдаёт ошибку вида:

1
amp-bind: Expression eval failed. Expression size (194) exceeds max (100). Please reduce number of operands.

С такой ошибкой мы столкнулись при разработке игры «Змейка» в AMP-письме: вычисления для движения и логики игры требовали выражений длиннее 100, что приводило к их блокировке на стороне Mail.ru.

Решение:

Лучшим вариантом будет учитывать это ограничение, чтобы выражения не превышали данный лимит. Также можно выявить, что письмо открыто в Mail.ru, и предоставить более простую версию интерактива или попросить пользователя перейти на веб-версию.

4. Переменные ESP и шаблоны AMP (конфликт синтаксиса)

Многие ESP (сервисы рассылок) позволяют вставлять переменные персонализации или условные конструкции в шаблон письма. Нередко синтаксис таких переменных пересекается с синтаксисом шаблонов AMP (amp-mustache), которые используют двойные фигурные скобки {{ }}. Это приводит к тому, что платформа-рассыльщик «подменяет» или искажает AMP-шаблон, считая его своими переменными. В результате письмо может сломаться или вовсе не отправиться (если ESP сочтёт шаблон некорректным).

Решения:

Altcraft: В Altcraft шаблоны тоже используют фигурные скобки, поэтому для обозначения AMP-шаблона нужно добавить префикс $. Например, вместо {{success}} пишем ${{success}}. Символ $ предотвратит интерпретацию платформой, и на выходе в отправленном письме останется чистый {{success}} для AMP. То есть Altcraft пропустит такой фрагмент, позволив AMP-механизму обработать его уже на стороне клиента.

Пример:

<template type="amp-mustache">$\{\{success\}\}</template> — Altcraft не тронет содержимое внутри $ {{ }}, а AMP при отображении увидит стандартный {{success}}.

Mailganer: В Mailganer для таких случаев предусмотрены специальные теги {% verbatim %} ... {% endverbatim %}. Любой код, заключённый в {% verbatim %}, платформа не будет менять. Поэтому AMP-шаблон можно обернуть этими тегами.

Пример:

1
2
3
 <template type="amp-mustache">
  {% verbatim %}{{success}}{% endverbatim %}
</template>

Unisender: В Unisender, наоборот, ничего дополнительно делать не нужно, так как внутри тега <template> платформа вообще не пытается подставлять свои переменные. Unisender по умолчанию игнорирует содержимое <template type="amp-mustache">, полагая, что это для клиентской стороны. Это упрощает жизнь — можно прямо писать {{variable}} — но есть ограничение: вы не сможете вставить персонализацию внутрь amp-mustache.

5. Особенности работы тёмной темы в разных клиентах

AMP-письма в тёмной теме отображаются по-разному в зависимости от почтового клиента. Где-то письмо перекрашивается автоматически, где-то — остаётся как есть, а в некоторых случаях разработчик может сам задать стили.

Разберем подробнее:

Mail.ru. Не перекрашивает AMP-письма сам, но поддерживает кастомные стили для тёмной и светлой темы. Добавьте в <head>:

1
<meta name="supported-color-schemes" content="light dark">

В стилях используйте селекторы с префиксом:

:root[data-ogsc] — для тёмной темы,
:root:not([data-ogsc]) — для светлой.

Gmail на Android. Перекрашивает светлые письма в тёмные автоматически.

Gmail на iOS. Не перекрашивает письмо и не даёт его кастомизировать.

Yahoo. Поведение похоже на Gmail: на Android — автоинверсия, на iOS — письмо остаётся без изменений.

6. Время жизни AMP-письма

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

Решения:

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

7. Ограничение размера письма в Gmail

В Gmail действуют два разных лимита на размер письма:

• HTML-часть: максимум 102 КБ. Если превышен, письмо обрезается, и Gmail показывает ссылку «Показать полностью». Это нарушит верстку и скроет часть контента.

• AMP-часть: максимум 200 КБ. Если превышен, AMP-версия просто не будет отображена — пользователь увидит HTML-версию.
  

Решения:

• Сжимайте код. Удалите комментарии, пробелы, дублирующиеся стили. Используйте специальные инструменты (например, htmlminifier.com).

• Убирайте лишнее. Сократите трекинг-ссылки, очистите шаблон от неиспользуемых элементов и скрытых блоков.

• Оптимизируйте стили: общие — в <style amp-custom>, инлайн — только по необходимости.

8. Проблемы с аналитикой AMP-писем

AMP позволяет взаимодействовать с контентом прямо внутри письма — например, нажимать кнопки, заполнять формы или листать карусели — без переходов на сайт. Такие действия не фиксируются обычными трекерами, поскольку внутри AMP нельзя использовать JavaScript, а компонент <amp-analytics> не поддерживается в AMP для email. В результате клики и события остаются «невидимыми» для систем аналитики вроде Google Analytics, «Яндекс.Метрики» и большинства ESP.

Решение:

Для реализации такой аналитики можно использовать сервисы, поддерживающие сбор событий с помощью трекинг-пикселей. Один из надёжных вариантов — Pixcraft, который предоставляет API для трекинга AMP-событий через обычные GET-запросы.

Заключение

При вёрстке AMP-писем важно учитывать, как они ведут себя в разных почтовых клиентах. Даже у таких крупных платформ, как Gmail и Mail.ru, поведение отличается: где-то ломается карусель, где-то игнорируются состояния.

Обязательно тестируйте рассылки в Gmail (веб, Android, iOS), Mail.ru, Yahoo. Главное — не полагаться на «работает в одном месте — значит, везде». Потратьте время на тестирование, и интерактив в письмах будет работать стабильно, независимо от платформы.

Если работаете в Figma, загляните к нам. Здесь мы выкладываем много полезных материалов и инструментов для дизайнеров.