Кейс | Сделали интерактивное AMP письмо с игровой механикой. Блог Inbox MarketingCSS Peeling Sticky
Рассказываем, как сделали AMP email: идея и особенности верстки
кейс Inbox Marketing
как мы делали наше первое AMP письмо
AMP
?
как мы делали наше первое
письмо
кейс Inbox Marketing
Интерактивные AMP письма — революция в email-маркетинге. Теперь пользователю не нужно переходить на сайт — многие действия можно совершать прямо в письме!
Это значит, что в письмах можно использовать «карусель», «аккордеон», проводить опросы, получать обратную связь и размещать форму заказа, добавлять и обновлять товары в реальном времени, даже если письмо уже отправлено.
Мы, как и многие email-маркетологи, с нетерпением ждали возможности протестировать новую технологию. И вот наконец, после долгой настройки и всех хитросплетений верстки, мы создали и запустили наше первое интерактивное письмо с игровой механикой!
Сделайте это, чтобы начать отправлять AMP письма
На эту тему немало подробных статей. Мы коротко обозначим, что сделали, чтобы начать отправлять AMP письма.
1
Выберите ESP, который поддерживает AMP-контент.
2
Проверьте, соответствуете ли вы требованиям.
[
Инструкция AMP Email от Gmail
](https://developers.google.com/gmail/ampemail/)
[
Требования Mail.ru
](https://postmaster.mail.ru/amp/?lang=ru#playground)
3
Выберите тип динамического контента для вашего АМП письма — какая у него будет идея и цель. Под выбранный тип разработайте тексты и дизайн.
4
Сверстайте AMP и HTML версии письма. Это нужно, чтобы пользователю отобразилось HTML письмо в случае, если AMP отобразиться не может.
- на октябрь 2019 с AMP работают Mail.ru и Gmail, другие почтовики отображают только HTML;
- не все почтовые клиенты умеют отображать AMP. Это уже не связано с тем, Mail.ru или Gmail использует подписчик, а зависит от того, где он просматривает письмо: в каком приложении, какой оно версии, что у него за устройство.
5
Проверьте письмо в Песочницах. В коде не должно быть ошибок.
[
Инструкция AMP Email от Gmail
](https://developers.google.com/gmail/ampemail/)
[
Требования Mail.ru
](https://postmaster.mail.ru/amp/?lang=ru#playground)
[
Потестить верстку письма Gmail
](https://amp.gmail.dev/playground/)
[
То же, но Mail.ru
](https://postmaster.mail.ru/amp/playground.html#hello-world)
6
Для валидации AMP письма в Gmail отправьте его на ampforemail.whitelisting@gmail.com
7
Отправьте заявку на разрешение отправки AMP писем в Gmail через гугл-форму и в Mail.ru на адрес postmaster_amp@corp.mail.ru
В заявке 6 простых вопросов
8
Если всё сделано правильно, вам ответят. Если нет — значит, есть нарушения требований, пробуйте заново. Ответа нужно ждать несколько дней.
Пока AMP письма могут получать только пользователи Mail.ru и Gmail. Все остальные получают обычные HTML-письма.
AMP верстка гибче и адаптивнее HTML
Сейчас обычные письма верстаются таблицами. Так ничего нигде не едет, но и пространства для маневра особо нет: табличная верстка очень ограничивает возможности расположения элементов в письме и адаптации.
Если же AMP получит широкую поддержку email-клиентов, возможно, получится вообще уйти от топорной табличной верстки и сделать письма такими же крутыми, как сайты.
Возможности AMP верстки:
актуализация данных в письме
(например, вы можете отправить письмо с товарами, и — если у них изменится цена — в письме «подтянутся» актуальные данные);
получение информации от пользователя непосредственно из письма
(без гугл-форм, перехода на сайт и пр.);
действия с товаром в письме:
выбор нужного цвета и размера товара, добавление в корзину, сохранение в избранное и пр.;
возможности для наиболее эффектной демонстрации контента:
лайтбоксы, «карусели», «аккордеоны» и т. д.;
расширенный набор поддерживаемых стилей
Пример табличной верстки (слева) и flexbox (справа).
Результат будет одинаковый, но вариант справа — экономичнее
Особенности 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 технологию (English)
](https://amp.dev/documentation/guides-and-tutorials/develop/amp_email_best_practices/?format=email)
AMP атрибуты
позволяет задать какое-то сообщение, пока контент грузится. К примеру, пока изображения карусели еще не прогрузились, ты можешь показать пользователю сообщение: «Не переключайтесь, здесь скоро будет годный контент!»;
fallback
layout
on
sizes
позволяет сказать AMP объекту, как ему вести себя: быть фиксированной ширины и высоты, заполнять все свободное пространство или увеличиваться или уменьшаться вместе с размером экрана, подстраиваясь под него;
этот атрибут позволяет вызвать какое-то событие. Например, по клику на кнопку скрыть какой-нибудь блок;
позволяет задать определенный размер под определенные параметры экрана.
[
Матчасть про разметку, теги и атрибуты AMP (English)
](https://amp.dev/documentation/guides-and-tutorials/learn/email_fundamentals/?format=email)
В AMP письма можно (иногда — необходимо) подключать AMP-скрипты. Если почтовики (и некоторые системы рассылок) обычно вырезают скрипты из письма как потенциальную угрозу безопасности данных, то в AMP это становится возможным.
Например, в письмо нужно подключить специальный скрипт, который позволит «оживить» интерактивные элементы на странице. И добавить amp4email-boilerplate — он позволит скрыть содержимое email до полной загрузки AMP контента.
[
заказать AMP письма
Проведем все настройки, создадим и заверстаем ваше динамическое письмо
#комментарий_верстальщика
-
Леся
верстальщик Inbox Marketing
«Любая ошибка в коде 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 письмо. Уже тестируем реализацию всех доступных видов интерактивных писем в email-рассылке сервиса Email-Competitors, поэтому если вы еще не с нами — вы знаете, что делать!
Делимся опытом внедрения AMP и обсуждаем технические вопросы в отдельном телеграм-чате
автор текста
-
Ольга Горячева
Редактор Inbox Marketing
Предыдущая
[
узнайте, как привлечь новых клиентов через игру
следующая
[
как тестировать AMP письма в Gmail, не дожидаясь согласования Google
-
[
Как мы делали наше первое AMP письмо
-
[
Сделайте это, чтобы начать отправлять AMP письма
-
[
AMP верстка гибче и адаптивнее HTML
-
[
Особенности AMP верстки
-
[
Комментарии верстальщика
-
[
Первое AMP письмо в России
-
[
Зайти в телеграм-чат
Теория у вас уже есть, переходим к практике!
Сделайте первый шаг к работающему CRM-маркетингу — напишите нам в ТГ
[
Сертифицированный партнер Mindbox
CRM-маркетинг
[
напишите нам в Telegram
[
Что такое CRM-маркетинг
[
Курс CRM-маркетолог
[
[
Разработка программ лояльности
[
Спецпроект: История CRM-маркетинга
email-маркетинг
[
Что такое email-маркетинг
[
Сопровождение email-маркетинга
[
Стратегия email-маркетинга
[
[
Курс email-копирайтер
о нас
[
[
Наши письма
[
Выступления
[
Дизайн-студия
[
Вакансии
Все права защищены.
const thisYear = new Date().getFullYear(); for (let year of document.querySelectorAll('[href="#years"]')) { let span = document.createElement('span'); span.innerHTML = year.innerHTML; year.parentNode.insertBefore(span, year); year.parentNode.removeChild(year); span.innerHTML = thisYear; span.style.color = '#999999'; }