Принципы создания AMP-писем
AMP-письма используют AMP HTML и специальные AMP-компоненты для создания интерактивного и динамичного контента. Они позволяют пользователю взаимодействовать с письмом прямо в почтовом клиенте.
Основы создания AMP-писем
AMP-письма создаются с использованием AMP HTML — это специальный подмножество HTML с рядом ограничений и дополнительными атрибутами и элементами.
В отличие от стандартных AMP-страниц, для AMP-писем необходимо использовать тег <script type="text/plain" application/json"> для динамического контента, а также компоненты:
В отличие от стандартных AMP-страниц, для AMP-писем необходимо использовать тег <script type="text/plain" application/json"> для динамического контента, а также компоненты:
- <amp-form>
- <amp-bind>
- <amp-list>
Инструменты для отладки AMP-писем
- AMP Validator — проверяет AMP-код на соответствие стандартам. AMP Validator
- Google Search Console — предоставляет информацию о том, как Google видит AMP-страницы. Google Search Console
- AMP Playground — онлайн-инструмент для создания и тестирования AMP-страниц в реальном времени. AMP Playground
- Gmail AMP for Email Playground — онлайн-инструмент для создания и тестирования AMP-писем с более строгой валидацией. Так, как HTML отображается в этом инструменте — так он будет выглядеть при отправке в письме. Gmail AMP for Email Playground
AMP-блоки и шаблоны писем
В официальной документации AMP и репозитории проекта на GitHub представлены примеры AMP-блоков и шаблонов писем, включая:
- AMP email By Examples: AMP email By Examples
- AMP email Introduction: AMP email Start
Общая документация по AMP-письмам
Официальная документация находится на сайте AMP.dev в разделе о почте.
AMP в письмах
AMP-письма отличаются от обычных HTML-писем тем, что поддерживают интерактивность и динамический контент через AMP-компоненты.
Ключевые отличия:
Ключевые отличия:
- AMP-компоненты: используются теги <amp-form>, <amp-list>, <amp-bind> и другие для создания интерактива
- Ограничения: не допускается использование собственного JavaScript
- Безопасность: строгие требования к безопасности, чтобы предотвратить злоупотребления
Важные моменты при создании или редактировании AMP-писем
- Оптимизация производительности: соблюдайте ограничения по объёму CSS и другим параметрам для быстрой загрузки
- Тестирование: используйте валидацию и инструменты проверки AMP
- Совместимость: убедитесь, что письмо корректно отображается во всех почтовых клиентах с поддержкой AMP
- Безопасность: соблюдайте все требования безопасности
- Альтернативный контент: добавляйте HTML- и текстовые версии письма для клиентов, не поддерживающих AMP
Эти принципы и инструменты помогут вам эффективно создавать и управлять AMP-письмами, обеспечивая интерактивность прямо в почтовом клиенте пользователя.
Использование атрибутов data-amp-attrs и data-amp-tag в HTML-редакторе Markeaze
- data-amp-attrs — позволяет добавлять AMP-логику к атрибутам элемента. Принимает строку в формате "ключ|значение", где значение — это AMP-логика. Можно задать несколько атрибутов через ;.
data-amp-attrs="[class]|wish !={{id}} ? 'hidden-img result' : 'visible-img result';[src]|{{imageUrl}}"
- data-amp-tag — позволяет переименовать тег в конкретный AMP-тег.
Например, если у вас есть <div> и вы хотите, чтобы он превратился в <amp-list>, укажите:
data-amp-tag="amp-list"
Пример использования
<div data-amp-attrs="[class]|wish !={{id}} ? 'hidden-img result' : 'visible-img result';[src]|{{imageUrl}}" data-amp-tag="amp-list">
<!-- Content -->
</div>Этот код преобразует тег <div> в <amp-list> и добавляет AMP-логику к атрибутам class и src.