кейс Inbox Marketing

как мы делали наше первое AMP письмо

CSS Peeling Sticky
AMP

?

как мы делали наше первое
письмо
кейс Inbox Marketing
Интерактивные AMP письма — революция в email-маркетинге. Теперь пользователю не нужно переходить на сайт — многие действия можно совершать прямо в письме!

Это значит, что в письмах можно использовать «карусель», «аккордеон», проводить опросы, получать обратную связь и размещать форму заказа, добавлять и обновлять товары в реальном времени, даже если письмо уже отправлено.

Мы, как и многие email-маркетологи, с нетерпением ждали возможности протестировать новую технологию. И вот наконец, после долгой настройки и всех хитросплетений верстки, мы создали и запустили наше первое интерактивное письмо с игровой механикой!
В статье
В статье
Сделайте это, чтобы начать отправлять AMP письма
Сделайте это, чтобы начать отправлять AMP письма
На эту тему немало подробных статей. Мы коротко обозначим, что сделали, чтобы начать отправлять AMP письма.
Выберите ESP, который поддерживает AMP-контент.
1 —
  • eSputnik — отправляет AMP email с использованием метода API;
  • SendGrid — отправляет AMP письма только методом API;
  • SparkPost — отправляет AMP письма с помощью методов API и SMTP.
  • SendPulse — отправляет AMP письма только методом API.
Сейчас таких ESP всего четыре:
MindBox пока находится в стадии тестирования поддержки AMP-контента.
Проверьте, соответствуете ли вы требованиям — пошагово это сделано в статье email-редактора Stripo (там тоже есть блок про ESP — мы уточнили информацию в техподдержке указанных сервисов рассылок и указали достоверную информацию на сентябрь 2019).
2 —
Выберите тип динамического контента для вашего АМП письма — какая у него будет идея и цель. Под выбранный тип разработайте тексты и дизайн.
3 —
Сверстайте AMP и HTML версии письма. Это нужно, чтобы пользователю отобразилось HTML письмо в случае, если AMP отобразиться не может.
4 —
  • на октябрь 2019 с AMP работают Mail.ru и Gmail, другие почтовики отображают только HTML;
  • не все почтовые клиенты умеют отображать AMP. Это уже не связано с тем, Mail.ru или Gmail использует подписчик, а зависит от того, где он просматривает письмо: в каком приложении, какой оно версии, что у него за устройство.
Проверьте письмо в Песочницах. В коде не должно быть ошибок.
5 —
Для валидации AMP письма в Gmail отправьте его на ampforemail.whitelisting@gmail.com
6 —
Отправьте заявку на разрешение отправки AMP писем в Gmail через гугл-форму и в Mail.ru на адрес postmaster_amp@corp.mail.ru
7 —
В заявке 6 простых вопросов
Если всё сделано правильно, вам ответят. Если нет — значит, есть нарушения требований, пробуйте заново. Ответа нужно ждать несколько дней.
8 —
Пока AMP письма могут получать только пользователи Mail.ru и Gmail. Все остальные получают обычные HTML-письма.
AMP верстка гибче и адаптивнее HTML
AMP верстка гибче и адаптивнее HTML
Сейчас обычные письма верстаются таблицами. Так ничего нигде не едет, но и пространства для маневра особо нет: табличная верстка очень ограничивает возможности расположения элементов в письме и адаптации.

Если же AMP получит широкую поддержку email-клиентов, возможно, получится вообще уйти от топорной табличной верстки и сделать письма такими же крутыми, как сайты.
Возможности AMP верстки:
актуализация данных в письме
(например, вы можете отправить письмо с товарами, и — если у них изменится цена — в письме «подтянутся» актуальные данные);
получение информации от пользователя непосредственно из письма
(без гугл-форм, перехода на сайт и пр.);
действия с товаром в письме:
выбор нужного цвета и размера товара, добавление в корзину, сохранение в избранное и пр.;
возможности для наиболее эффектной демонстрации контента:
лайтбоксы, «карусели», «аккордеоны» и т. д.;
Пример табличной верстки (слева) и flexbox (справа).
Результат будет одинаковый, но вариант справа — экономичнее
Особенности AMP верстки
Особенности AMP верстки
Здесь расскажем про такие особенности верстки, которые обязательно должны быть в письме, чтобы письмо стало динамическим. Без них будет отображаться обычное HTML-письмо.
Особая разметка
В HTML у нас для всего письма используется тег <html>. Чтобы почтовик понял, что ему пришло именно AMP, нужно использовать для AMP версии письма тег <html amp4email>.
AMP теги
Некоторые теги — уникальные, по сравнению с обычным HTML, некоторые — аналоговые.
«аккордеон», разворачиваем контент, скрытый под катом, по клику;
<amp-accordion>
<amp-carousel>
<amp-list>
<amp-sidebar>
<amp-img>
<amp-form>
«карусель», листаем изображения/контент вправо-влево при нажатии на стрелочки;
тег, в который мы заключаем «подтягивающийся» извне контент: название товара, его цену, цвет, разные актуальные данные;
меню навигации;
изображение, по сути аналог обычного img, но здесь нужно обязательно указывать высоту и ширину изображения и ставить закрывающий тег;
форма, по сути аналог обычного form, только со своими требованиями:
  • нужно подключить скрипт для AMP-форм;
  • для метода передачи данных POST используется атрибут action-xhr вместо action;
  • запрет на использование в форме <input type=button>, <input type=image>;
  • обязательное использование https протокола для передачи данных.
AMP атрибуты
позволяет задать какое-то сообщение, пока контент грузится. К примеру, пока изображения карусели еще не прогрузились, ты можешь показать пользователю сообщение: «Не переключайтесь, здесь скоро будет годный контент!»;
fallback
layout
on
sizes
позволяет сказать AMP объекту, как ему вести себя: быть фиксированной ширины и высоты, заполнять все свободное пространство или увеличиваться или уменьшаться вместе с размером экрана, подстраиваясь под него;
этот атрибут позволяет вызвать какое-то событие. Например, по клику на кнопку скрыть какой-нибудь блок;
позволяет задать определенный размер под определенные параметры экрана.
В AMP письма можно (иногда — необходимо) подключать AMP-скрипты. Если почтовики (и некоторые системы рассылок) обычно вырезают скрипты из письма как потенциальную угрозу безопасности данных, то в AMP это становится возможным.

Например, в письмо нужно подключить специальный скрипт, который позволит «оживить» интерактивные элементы на странице. И добавить amp4email-boilerplate — он позволит скрыть содержимое email до полной загрузки AMP контента.
Проведем все настройки, создадим и заверстаем ваше динамическое письмо
#комментарий_верстальщика
#комментарий_верстальщика
Леся
верстальщик Inbox Marketing
«Любая ошибка в коде AMP части письма ведет к тому, что код не проходит валидацию, и, соответственно, у получателя не будет отображаться AMP версия — он увидит обычный HTML.

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

И это тоже, по сути, дополнительная сложность: нужно обязательно продумать, что будет видеть пользователь с AMP, и что будут видеть те, у кого AMP не поддерживается.

В AMP HTML, кроме специальных тегов и атрибутов, есть и другие особенности: некоторые вещи, которые широко распространены в HTML, в AMP редко используются или недопустимы. Например, !important недопустим в AMP HTML, а inline styles — используется реже, чем в HTML.

И напротив, то, что в коде HTML письма не используется (например, закрывающий тег у изображения), может быть необходимым условием, чтобы AMP код работал корректно. Все эти тонкости надо учитывать».
Иии… Встречайте!
Первое в России AMP письмо с игровой механикой
Иии… Встречайте!
Первое в России AMP письмо с игровой механикой
Мы не хотели делать банальные «карусельки» — для нас важно было реализовать нечто действительно интересное. Поэтому выбор остановили на игровой механике.

Но мы маркетологи — и ничего не делаем просто так. Перед нами стояла задача — стимулировать подписчиков продлить платную подписку на сервис Email-Competitors.

В письме пользователям предлагалось угадать слово-промокод, кликая по квадратам мышкой. Всё происходит в самом письме — без перехода на сайт. Если ввести правильное слово, появляется промокод и поздравление. Если неправильное — смешной комментарий и приглашение попробовать снова.
Авторы идеи письма не совсем мы. Нас вдохновило письмо коллег, но оно было реализовано без AMP технологии.
Мы планируем активно использовать AMP механики у наших клиентов при заказе услуги AMP письмо. Уже тестируем реализацию всех доступных видов интерактивных писем в email-рассылке сервиса Email-Competitors, поэтому если вы еще не с нами — вы знаете, что делать!
Делимся опытом внедрения AMP и обсуждаем технические вопросы в отдельном телеграм-чате
автор текста
Ольга Горячева
Редактор Inbox Marketing