Маркетинг | Email маркетинг

Как использовать AMP в электронных письмах

Google анонсировал то, что AMP HTML наконец то стал общедоступным. Но к сожалению, мало кто знает что же это такое. Что вам нужно знать, как email маркетологу? Как кодить письма с AMP?

< Вернуться назад

Оглавление:

Что такое AMP для писем?
Как начать
Руководство по регистрации
Настраиваем ваше AMP HTML письмо
Что произойдет, если ваше письмо сделано неправильно?
AMP компонент
Тестирование ваших AMP HTML писем

Сейчас мы со всем этим разберемся.

Что такое AMP для писем?

AMP (Accelerated Mobile Pages) это пакет инструментов для разработчиков от наших друзей из Google, который поможет вам создать легкую систему с быстрой загрузкой. (Уже интересно как это можно использовать в разработке писем, да?) AMP это фреймворк состоящий из HTML, CSS и JavaScript - классический набор.

Используя некоторые части проекта AMP от Google, мы будем иметь довольно увесистый список компонентов, готовых к использованию.

Как начать:

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

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

Руководство по регистрации

Есть несколько шагов по регистрации в AMP, но к счастью для вас, ниже мы описали всё то, что вам нужно знать в этом плане.

Шаг 1: Используйте инструмент email валидации от Google, который поможет вам убедиться в том, что SPF и DKIM настроены на домене отправителя.

Шаг 2: Отправьте тестовое письмо (об этом подробнее будет позже).

Совет. Если вы собираетесь включить динамическую информацию в письмо с использованием XMLHttpRequests (XHR's), то домен XHR отправителя (from: joe@company.com) и XHR с того же домена или поддомена (company.com) должны совпадать.

Шаг 3: Следуйте правилам для массовых рассылок от Gmail, таким образом вы минимизируете риск попадания в спам. Помните, что крайне полезно держать домен в белом списке.

Помните, что для дальнейшей валидации писем, вам надо постоянно отправлять их с вашего домена, вне зависимости от размера вашей организации.

Процесс регистрации занимает довольно много времени и может заставить вас ждать довольно продолжительный период. Иногда до недели или больше. В общем надо сказать спасибо наплыву компаний, которые тоже стремятся зарегистрироваться. Что говорит о том, что это стоящая штука.

Шаг 4: После того, как вы выполните все требования, вы можете отправить AMP письмо с правильным типом MIME (Multi-purpose Internet Mail Extensions) на ampforemail.whitelisting@gmail.com с домена, который вы только что что настроили. Для того, чтобы получить результаты лучше, отправляйте письмо напрямую, а не переправляя его.

Шаг 5: И в конце отправьте форму регистрации и наберитесь терпения, прочитав фразу от Google - "ожидайте нашего ответа".

Создаем письмо на AMP

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

Вам понадобится отправить три раздельные версии письма: текстовую, HTML и AMP HTML. Таким образом, если AMP не поддерживается, то почтовик отобразит HTML фолбэк и текстовую версию.

Если у вас есть вопросы, то AMP HTML email секция на официальном сайте довольно подробна.

Настраиваем ваше AMP HTML письмо

Будучи модным и минималистичным, каждое AMP HTML письмо имеет минимальное количество кода, необходимого для верной работы.
Вот то, что прямо совсем необходимо:

Тип документа должен быть в HTML5 форме: <!doctype html>

Далее сразу в <html> должен быть указан amp4email. Таким образом. <html ⚡4email> или <html amp4email>.

Далее, укажите <head>, где первым потомком будет <meta charset="utf-8">

Далее идёт тег amp4email бойлерплейта без пробелов:
<style amp4email-boilerplate>body{visibility:hidden}</style>

И под конец, у нас будет тег скрипта, содержащий ampproject информацию. Во всей документации AMP HTML Email, компонентно ориентированные теги скриптов находятся дальше:

<script async src="https://cdn.ampproject.org/v0.js"></script>

А теперь веселье начинается. Настало время кодить в <body> письма.

Ниже вы видите то, как выглядит полная правильная базовая структура AMP HTML письма:

Создавая письмо, каждый AMP компонент должен соответствовать скрипту в <head> письма.

Есть два сценария при которых ваше AMP письмо может неправильно отрендериться:

Компонент находится в <head>, но не в теле письма или наоборот.

AMP HTML не поддерживается.

Что произойдет, если ваше письмо сделано неправильно?

Приедет AMP полиция и заберёт вашу клавиатуру. Шутка конечно, но AMP HTML письмо не отобразиться. Это конечно же не конец света, так как в этом моменте ваше письмо переключится на HTML или текстовую версию, как мы упоминали выше.

Разработка писем на AMP только немного отличается от HTML подхода. Все стили должны быть в одном блоке внутри <style amp-custom> </style>. Инлайновые стили, к сожалению, недопустимы и у этого блока есть лимит 50000 байт. Валидатор это проверит.

AMP HTML письмо поддерживает те же стили, что и обычные почтовые клиенты. Вообще, посмотрите удобный Гайд по CSS от Campaign Monitor https://www.campaignmonitor.com/css/media-queries/not/, чтобы посмотреть поддержку стилей в разных местах. Некоторый CSS заблокирован в AMP, например такой:

!important

<link>

Класс начинающиеся с -amp или i-amp-

Под ограничения также попали transition и @keyframes. https://www.ampproject.org/docs/design/responsive/style_pages

Хоть вы и не можете ссылаться на внешние стили, но вы можете использовать кастомные шрифты, как и во всех почтовых клиентах. AMP позволяет вам использовать @font-face, с http или https адресами или <link> с этими доверенными сайтами:

Typography.com
Fonts.com
Google Fonts
Adobe Typekit
Font Awesome (и еще один https://fontawesome.com/?from=io)

Помните, что рекомендованная максимальная ширина AMP письма - 800px.

Отслеживание и аналитика работают также, как и в HTML, и пиксель трекинга можно использовать. Однако, продвинутый трекинг, который нормально работает на AMP страницах - невозможен в amp4email. Что говорит о том, что аналитика все ещё показывает, какие пользователи взаимодействовали с вашим письмом и их взаимодействия с информацией, такой как изображения в <amp-carousel> или в <amp-list>.

AMP компоненты

Огромный плюс при использовании AMP в том, что вы можете использовать те же подходы, что и при создании обычных HTML писем, включая применение таблиц. Как упоминалось выше, стили должны находиться в <head> документа, так что только это может быть небольшим изменением, если вы привыкли использовать инлайновые стили.

Использование семантической разметки, с такими тегами, как <h1> и <p> дадут вашим письмам организованную структуру, сделают их доступными и легкими в стилизации. Главное изменение, которое вы заметите от обычного HTML в том, что нужно будет добавлять 'amp-' почти каждому тегу. (Например, <amp-img>, вместо <img>).

<amp-img>
Это "встроенный" компонент и ему не нужен отдельный скрипт в начале документа. Что вам с ним нужно сделать, так это указать ширину и высоту для каждого <amp-img> вместе с другими атрибутами, такими как alt, layout и src. Атрибут layoutуказывает поведение изображения.

Есть два типа layout для работы:
Фиксированный, то есть изображение будет иметь фиксированные размеры.

Адаптивный, что говорит о том, что изображение будет масштабироваться по размеру контейнера.

В адапативном варианте вы можете выставить соотношение сторон для изображения, вместо пикселей, что позволит вам сделать масштабирование (вместо изображения с width="100px" height="150px", смасштабируйте его height="1" width="2" и так вы заресайзите изображение пропорционально, вне зависимости от используемого устройства или почтового клиента).

Стилизацию изображения можно сделать в теге <style amp-custom> :

Далее, уже внутри HTML:

<amp-carousel>
В AMP есть галерея изображений, которую можно использовать для показа нескольких amp-img в виде карусели или слайдера, а также он даёт несколько шаблонов на выбор. <amp-carousel> позволяет вам добавлять контент для горизонтального отображения. Этот функционал не встроен, поэтому не забудьте добавить соответствующий скрипт в <head>:

Далее, уже внутри HTML:

Внутри открывающего тега вы выставляете ширину и высоту карусели, вместе с layout (адаптивный или фиксированный). Теперь вам надо указать тип галереи, которую вы хотите отобразить. Для пользы эксперимента давайте укажем type="slides".

Вот тут простой пример использования этих компонентов, прошедших валидацию в AMP HTML. https://codepen.io/emailjay/pen/oObPXb Сравнивая с количеством кода, требуемого для обычного HTML, включая карусель и время на его создание, это способ куда короче. Можете спокойной разобрать этот код и сами что-нибудь скреативить.

Полная библиотека AMP компонентов находится тут. https://www.ampproject.org/docs/interaction_dynamic/amp-email-format

Но помните, что далеко не все из них доступны для AMP HTML Email, так что больше тестируйте, так как amp4email документация постоянно развивается и скоро будет доступна в полном объеме.

Наши друзья из amp.dev предоставили несколько удобных таблиц, которые мы посмели доработать, чтобы вам было удобнее разрабатывать письма. Вот несколько подтвержденных компонентов:

Компоненты раскладки доступные в AMP HTML email:

Динамические компоненты доступные в AMP HTML email:

Тестирование ваших AMP HTML

Хорошие новости. С помощью AMP HTML фреймворка, тестирование писем должно быть более стандартизированным. Дизайн компонентов позволяет им работать в поддерживаемых почтовых клиентах. Однако, все таки будут разные уровни CSS поддержки и всякие странности в каждом почтовом клиенте, так что тестирование остаётся важным шагом.

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

Вот некоторые популярные ошибки:

Валидатор не может распознать ваш ESP код:

Требуются нужные базовые компоненты:

Неверный URL протокол 'http' внутри AMP, ссылкам нужно быть 'https:'

Я очень рад, что вы прочитали статью. Надеюсь, что наш сервис и наш блог помогут вам развивать ваш бизнес.

Антон Столповский

основатель Pagecard.me

Узнавайте первыми о выходе новых функций и получайте скидки на создание сайтов

Подписаться на рассылку

Узнавайте первыми о выходе новых функций
и получайте скидки на создание сайтов