Как мы делали наше первое AMP письмо
Интерактивные AMP письма — революция в email-маркетинге. Теперь пользователю не нужно переходить на сайт — многие действия можно совершать прямо в письме!
Это значит, что в письмах можно использовать «карусель», «аккордеон», проводить опросы, получать обратную связь и размещать форму заказа, добавлять и обновлять товары в реальном времени, даже если письмо уже отправлено.
Мы в Inbox Marketing, как и многие email-маркетологи, с нетерпением ждали возможности протестировать новую технологию. И вот наконец, после долгой настройки и всех хитросплетений верстки, мы создали и запустили наше первое интерактивное письмо с игровой механикой!
Сделайте это, чтобы начать отправлять AMP письма
На эту тему немало подробных статей. Мы коротко обозначим, что сделали, чтобы начать отправлять AMP письма.
1. Выберите ESP, который поддерживает AMP-контент.
Сейчас таких ESP всего три:
MindBox находится в стадии тестирования поддержки AMP-контента.
2. Проверьте, соответствуете ли вы требованиям — пошагово это сделано в статье email-редактора Stripo (там тоже есть блок про ESP — мы уточнили информацию в техподдержке указанных сервисов рассылок и указали достоверную информацию на сентябрь 2019).
3. Выберите тип динамического контента для вашего АМП письма —какая у него будет идея и цель. Под выбранный тип разработайте тексты и дизайн.
4. Сверстайте AMP и HTML версии письма. Это нужно, чтобы пользователю отобразилось HTML письмо в случае, если AMP отобразиться не может.
- на октябрь 2019 с AMP работают Mail.ru и Gmail, другие почтовики отображают только HTML;
- не все почтовые клиенты умеют отображать AMP. Это уже не связано с тем, Mail.ru или Gmail использует подписчик, а зависит от того, где он просматривает письмо: в каком приложении, какой оно версии, что у него за устройство.
5. Проверьте письмо в Песочницах. В коде не должно быть ошибок.
6. Для валидации AMP письма в Gmail отправьте его на ampforemail.whitelisting@gmail.com
7. Отправьте заявку на разрешение отправки AMP писем в Gmail через гугл-форму и в Mail.ru на адрес postmaster_amp@corp.mail.ru
8. Если всё сделано правильно, вам ответят. Если нет — значит, есть нарушения требований, пробуйте заново. Ответа нужно ждать несколько дней.
Пока AMP письма могут получать только пользователи Mail.ru и Gmail.
Все остальные получают обычные HTML-письма.
AMP верстка гибче и адаптивнее HTML
Сейчас обычные письма верстаются таблицами. Так ничего нигде не едет, но и пространства для маневра особо нет: табличная верстка очень ограничивает возможности расположения элементов в письме и адаптации.
Если же AMP получит широкую поддержку email-клиентов, возможно, получится вообще уйти от топорной табличной верстки и сделать письма такими же крутыми, как сайты.
Возможности AMP верстки:
- актуализация данных в письме (например, вы можете отправить письмо с товарами, и — если у них изменится цена — в письме «подтянутся» актуальные данные);
- получение информации от пользователя непосредственно из письма (без гугл-форм, перехода на сайт и пр.);
- действия с товаром в письме:выбор нужного цвета и размера товара, добавление в корзину, сохранение в избранное и пр.;
- возможности для наиболее эффектной демонстрации контента: лайтбоксы, «карусели», «аккордеоны» и т. д.
Особенности AMP верстки
Здесь расскажем про такие особенности верстки, которые обязательно должны быть в письме, чтобы письмо стало динамическим. Без них будет отображаться обычное HTML-письмо.
Особая разметка
В HTML у нас для всего письма используется тег <html>. Чтобы почтовик понял, что ему пришло именно AMP, нужно использовать для AMP версии письма тег <html amp4email>.
AMP теги
Некоторые теги — уникальные, по сравнению с обычным HTML, некоторые — аналоговые.
<amp-accordion> — «аккордеон», разворачиваем контент, скрытый под катом, по клику;
<amp-carousel> — «карусель», листаем изображения/контент вправо-влево при нажатии на стрелочки;
<amp-list> — тег, в который мы заключаем «подтягивающийся» извне контент: название товара, его цену, цвет, разные актуальные данные;
<amp-sidebar> — меню навигации;
<amp-img> — изображение, по сути аналог обычного img, но здесь нужно обязательно указывать высоту и ширину изображения и ставить закрывающий тег;
<amp-form> — форма, по сути аналог обычного form, только со своими требованиями:
- нужно подключить скрипт для AMP-форм;
- для метода передачи данных POST используется атрибут action-xhr вместо action;
- запрет на использование в форме <input type=button>, <input type=image>;
- обязательное использование https протокола для передачи данных.
AMP атрибуты
fallback — позволяет задать какое-то сообщение, пока контент грузится. К примеру, пока изображения карусели еще не прогрузились, ты можешь показать пользователю сообщение: «Не переключайтесь, здесь скоро будет годный контент!»;
layout — позволяет «сказать» AMP объекту, как ему вести себя: быть фиксированной ширины и высоты, заполнять все свободное пространство или увеличиваться или уменьшаться вместе с размером экрана, подстраиваясь под него;
on — этот атрибут позволяет вызвать какое-то событие. Например, по клику на кнопку скрыть какой-нибудь блок;
sizes — позволяет задать определенный размер под определенные параметры экрана.
В AMP письма можно (иногда — необходимо) подключать AMP-скрипты. Если почтовики (и некоторые системы рассылок) обычно вырезают скрипты из письма как потенциальную угрозу безопасности данных, то в AMP это становится возможным.
Например, в письмо нужно подключить специальный скрипт, который позволит «оживить» интерактивные элементы на странице. И добавить amp4email-boilerplate — он позволит скрыть содержимое email до полной загрузки AMP контента.
Любая ошибка в коде AMP части письма ведет к тому, что код не проходит валидацию, и, соответственно, у получателя не будет отображаться AMP версия — он увидит обычный HTML.Плюс, при создании письма нужно обязательно учитывать тех пользователей, почтовые клиенты которых пока что не поддерживают технологию.
Т. е. письмо должно обязательно содержать в себе и AMP HTML, и просто HTML версии. И это тоже, по сути, дополнительная сложность: нужно обязательно продумать, что будет видеть пользователь с AMP, и что будут видеть те, у кого AMP не поддерживается.В AMP HTML, кроме специальных тегов и атрибутов, есть и другие особенности: некоторые вещи, которые широко распространены в HTML, в AMP редко используются или недопустимы.
Например, !important недопустим в AMP HTML, а inline styles — используется реже, чем в HTML. И напротив, то, что в коде HTML письма не используется (например, закрывающий тег у изображения), может быть необходимым условием, чтобы AMP код работал корректно. Все эти тонкости надо учитывать.
Иии... Встречайте! Первое в России AMP письмо с игровой механикой
Мы не хотели делать банальные «карусельки» — для нас важно было реализовать нечто действительно интересное. Поэтому выбор остановили на игровой механике.
Но мы маркетологи, и ничего не делаем просто так. Перед нами стояла задача — стимулировать подписчиков продлить платную подписку на сервис Email-Competitors.
В письме пользователям предлагалось угадать слово-промокод, кликая по квадратам мышкой. Всё происходит в самом письме — без перехода на сайт.
Если ввести правильное слово, появляется промокод и поздравление. Если неправильное — смешной комментарий и приглашение попробовать снова.
Мы планируем активно использовать AMP механики у наших клиентов при заказе услуги AMP письмо.
Круто, не знал что AMP теперь и в письма можно пихать
можно, хотя ограничений хватает. Надеюсь, это временно - технологии AMP в письмах и года нет еще
SendPulse давно поддерживает АМП- технологию, а вы говорите только 3 ESP :)
Спасибо за уточнение!
Добавили SendPulse в статью :)
А как с видео в mp4 и webm в amp? я нашел эту статью как раз изучаю как лучше всего встраивать небольшие видео в письма. Может в этом вопросе что то посоветуете
Спасибо за интересный вопрос!
На данный момент ситуация с видео в AMP такая: существует специальный тег <amp-video> для этих целей, но именно в amp4email он пока что, к сожалению, не поддерживается.