RU
Войти
19 января 2026 г.

AMP-письма: как различается их обработка в Gmail и Mail.ru

Время чтения: 6 минут

AMP

Рассылки

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

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

Состояния (amp-state) и их начальные значения

Состояния в AMP-письмах используются как переменные, где можно хранить любые данные и строить на их базе условную логику отображения. Эти значения подставляются в атрибуты ([text], [class] и другие) и обновляются в ответ на действия пользователя.

Важно учитывать, что значение внутри <amp-state> применяется только после инициализации состояния через AMP.setState. Если какие-либо данные необходимо показать сразу после открытия письма, их можно задать как обычный контент элемента или значение атрибута:

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

В данном случае изначально будет отображаться default value, а после действия пользователя — значение myItem.el. При этом само действие может быть любым, в том числе формальным. Например:

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

В Gmail этот процесс работает в соответствии со стандартом. Здесь при клике на кнопку инициализируется состояние, и в элементе <span> появляется текст new value.

Mail.ru, в свою очередь, не учитывает начальные значения, заданные в <amp-state>. Из-за этой особенности атрибуты, которые рассчитывают на данные по умолчанию, после инициализации будут отображаться как null.

Для обхода этого ограничения вместо <amp-state> используйте setState, чтобы значения динамически обновлялись в момент действия пользователя:

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

Ограничение на размер выражений

Хотя в amp-bind стандартом не предусмотрены какие-либо ограничения, Mail.ru устанавливает строгий лимит на длину выражений — не более 100 единиц. В частности, команда Pixcraft столкнулась с этим ограничением во время разработки AMP-игры «Змейка». При клике на кнопку в письме Mail.ru отображал ошибку:

1
amp-bind: Expression eval failed. Expression size (194) exceeds max (100)

В то же время с Gmail подобных сложностей не возникало.

Здесь практическое решение — проектировать логику письма с учётом лимита в Mail.ru: оптимизировать вычисления таким образом, чтобы не выходить за установленные рамки.

Работа AMP‑каруселей

<amp-carousel> — полезный инструмент для создания интерактивных галерей изображений. Он работает предсказуемо в большинстве клиентов с поддержкой AMP, однако в Gmail для iOS при нажатии на стрелку навигации письмо прокручивается вверх, а контекст просмотра теряется. Исправить проблему настройками самого <amp-carousel> нельзя, так как она не связана с параметрами type, layout или размерами компонента.

Надёжным решением для этой ситуации становится сборка собственной карусели с использованием amp-bind. В этом варианте письмо при взаимодействии не смещается самопроизвольно. Ниже — пример такой AMP‑карусели, включающий 4 слайда:

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
<style amp-custom>
.carousel-wrapper {
position: relative;
width: 500px;
height: 400px;
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%); }
.slide-3 { transform: translateX(-300%); }
.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="pic1.jpg" width="500" height="400" class="carousel-slide"></amp-img>
<amp-img src="pic2.jpg" width="500" height="400" class="carousel-slide"></amp-img>
<amp-img src="pic3.jpg" width="500" height="400" class="carousel-slide"></amp-img>
<amp-img src="pic4.jpg" width="500" height="400" class="carousel-slide"></amp-img>
</div>
</div>
<button on="tap:AMP.setState({carouselState: {index: (carouselState.index - 1 + 4) % 4}})">
Previous
</button>
<button on="tap:AMP.setState({carouselState: {index: (carouselState.index + 1) % 4}})">
Next
</button>

Базовая логика здесь следующая:

  • индекс текущего слайда хранится в состоянии;

  • контейнер со слайдами сдвигается через transform: translateX(...);

  • навигация реализуется через AMP.setState по кнопкам «вперёд» и «назад».

Поддержка CSS

Восприятие AMP-CSS в Gmail и Mail.ru заметно различается. Например, Gmail следует спецификации AMP for Email максимально строго, что проявляется в нескольких аспектах:

  • Разрешён только ограниченный набор CSS-свойств. Конструкции, выходящие за рамки спецификации, приводят к тому, что письмо не проходит валидацию.

  • Запрещено использование псевдоэлементов :before и :after. Это критично для привычных приёмов вёрстки, таких как декоративные иконки, маркеры списков, оверлеи и тени, реализуемые через псевдоэлементы.

  • Анимация и переходы сильно ограничены на уровне рендеринга. Поддерживаются только базовые CSS-анимации, без сложных таймингов и цепочек эффектов.

Mail.ru на практике предъявляет более мягкие требования к использованию CSS. Здесь:

  • шире поддержка CSS-анимаций;

  • меньше ограничений на декоративные приёмы и визуальные эффекты;

  • допустимы решения, которые Gmail блокирует или игнорирует при рендеринге.

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

  • основная вёрстка с учётом ограничений Gmail: только разрешённые свойства, без псевдоэлементов, с минимальными анимациями;

  • контрольная проверка, что AMP стабильно отображается в Gmail;

  • аккуратное расширение под Mail.ru: использование дополнительных анимаций и визуальных приёмов поверх базовой вёрстки, уже прошедшей проверку в Gmail.

Тёмная тема в AMP‑письмах

На работу тёмной темы влияют как сам почтовый клиент, так и используемая платформа. Из-за этого один и тот же AMP-шаблон может выглядеть по-разному в Mail.ru, Gmail на Android и Gmail на iOS.

Mail.ru не перекрашивает AMP-письма автоматически. Цвета, фоны и контраст здесь задаются через CSS. Для управления темами используется meta-тег:

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

Также задействуются CSS-селекторы в style:

  • :root[data-ogsc] — тёмная тема;

  • :root:not([data-ogsc]) — светлая тема.

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

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

Таким образом, полноценная поддержка светлой и тёмной темы доступна только для Mail.ru. Поэтому при жёстких требованиях к цветам рекомендуется использовать нейтральный или базовый тёмный дизайн, а проверку письма стоит проводить отдельно в каждом клиенте.

Тестирование AMP‑писем

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

Для этого Gmail предлагает инструмент Gmail AMP for Email Playground, с помощью которого можно:

  • проверять разметку на соответствие спецификации AMP for Email;

  • обнаруживать недопустимые компоненты или атрибуты;

  • отправлять тестовые письма на собственный адрес @gmail.com.

Playground Gmail

Если после отправки в клиенте отображается AMP-версия — значит, проверка пройдена. Если же вместо неё открывается HTML-версия, над письмом появится уведомление: код ошибки (например, недопустимый компонент) и ссылка на документацию.

Собственный Playground есть и у Mail.ru. В нём также можно выявить ошибки, связанные с нарушением спецификации или внутренних ограничений почтового клиента, и отправить тестовую рассылку себе на почту.

Playground Mail.ru

Таким образом, оптимальным решением становится тестирование в обоих клиентах:

  • сначала общая проверка валидности AMP-кода;

  • затем тестирование интерактива и логики в Gmail;

  • после этого обязательная проверка рендеринга и поведения в Mail.ru.

Подробнее о том, как подготовить AMP-письмо к тестированию и отправке, читайте в нашей подробной инструкции.

Заключение

Поведение AMP-писем зависит не только от реализации кода, но и от правил его обработки в почтовом клиенте. Учёт особенностей Gmail и Mail.ru помогает сохранить контроль над интерактивом и визуальной частью письма. В этом контексте различия между клиентами задают понятные рамки, на основании которых строится реализация email-кампаний.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш Telegram-канал. Там мы делимся полезными материалами, лайфхаками и идеями для работы.

Поделиться:

Мы обрабатываем данные посетителей и используем куки согласно 

политике