Маркетинг
Inbox Marketing
1522

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

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

В закладки

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

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

Сделайте это, чтобы начать отправлять AMP письма

На эту тему немало подробных статей. Мы коротко обозначим, что сделали, чтобы начать отправлять AMP письма.

1. Выберите ESP, который поддерживает AMP-контент.

Сейчас таких ESP всего три:

  • eSputnik — отправляет AMP email с использованием метода API;
  • SendGrid — отправляет AMP письма только методом API;
  • SparkPost — отправляет AMP письма с помощью методов API и SMTP.

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

​В заявке 6 простых вопросов Скриншот Inbox Marketing

8. Если всё сделано правильно, вам ответят. Если нет — значит, есть нарушения требований, пробуйте заново. Ответа нужно ждать несколько дней.

Пока AMP письма могут получать только пользователи Mail.ru и Gmail.

Все остальные получают обычные HTML-письма.

AMP верстка гибче и адаптивнее HTML

Сейчас обычные письма верстаются таблицами. Так ничего нигде не едет, но и пространства для маневра особо нет: табличная верстка очень ограничивает возможности расположения элементов в письме и адаптации.

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

Возможности AMP верстки:

  • актуализация данных в письме (например, вы можете отправить письмо с товарами, и — если у них изменится цена — в письме «подтянутся» актуальные данные);
  • получение информации от пользователя непосредственно из письма (без гугл-форм, перехода на сайт и пр.);
  • действия с товаром в письме:выбор нужного цвета и размера товара, добавление в корзину, сохранение в избранное и пр.;
  • возможности для наиболее эффектной демонстрации контента: лайтбоксы, «карусели», «аккордеоны» и т. д.
​Пример табличной верстки (слева) и flexbox (справа). Результат будет одинаковый, но вариант справа — экономичнее Скриншот Inbox Marketing

Особенности 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 код работал корректно. Все эти тонкости надо учитывать.

Леся
Верстальщик Inbox Marketing

Иии... Встречайте! Первое в России AMP письмо с игровой механикой

Мы не хотели делать банальные «карусельки» — для нас важно было реализовать нечто действительно интересное. Поэтому выбор остановили на игровой механике.

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

В письме пользователям предлагалось угадать слово-промокод, кликая по квадратам мышкой. Всё происходит в самом письме — без перехода на сайт.

Если ввести правильное слово, появляется промокод и поздравление. Если неправильное — смешной комментарий и приглашение попробовать снова.

​Авторы идеи письма не совсем мы. Нас вдохновило письмо коллег, но оно было реализовано без AMP технологии Inbox Marketing

Мы планируем активно использовать AMP механики у наших клиентов при заказе услуги AMP письмо.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Inbox Marketing", "author_type": "self", "tags": [], "comments": 10, "likes": 17, "favorites": 37, "is_advertisement": false, "subsite_label": "marketing", "id": 89969, "is_wide": false, "is_ugc": true, "date": "Mon, 28 Oct 2019 14:30:36 +0300", "is_special": false }
0
{ "id": 89969, "author_id": 383022, "diff_limit": 1000, "urls": {"diff":"\/comments\/89969\/get","add":"\/comments\/89969\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/89969"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199113, "last_count_and_date": null }
10 комментариев
Популярные
По порядку
Написать комментарий...
3

Круто, не знал что AMP теперь и в письма можно пихать

Ответить
2

можно, хотя ограничений хватает. Надеюсь, это временно - технологии AMP  в письмах и года нет еще

Ответить
3

SendPulse давно поддерживает АМП- технологию, а вы говорите только 3 ESP :)

Ответить
0

Спасибо за уточнение!

Ответить
0

Добавили SendPulse в статью :)

Ответить
1

А как с видео в mp4 и webm в amp? я нашел эту статью как раз изучаю как лучше всего встраивать небольшие видео в письма. Может в этом вопросе что то посоветуете

Ответить
1

Спасибо за интересный вопрос!
На данный момент ситуация с видео в AMP такая: существует специальный тег <amp-video> для этих целей, но именно в amp4email он пока что, к сожалению, не поддерживается.

Ответить
0

Даниил, расскажите о показателях рассылки.

Ответить
2

сложный вопрос. И сложность в том, что геймификация в данном случае нацелена на удержание и увеличение времени контакта, а эти метрики не измерить. Коммерчески рассылка из общего ряда не сильно выделяется, но этого никто и не ждал - письмо ориентировано на профи, эмоции тут не фактор покупки. Но есть другой эффект - AMP-письмо  прозрачнее - мы видим кто как играл в письме и какой промокод себе накликал.
Это письмо для нас "тестовый полигон". Мы уже после него попробовали несколько писем с AMP попроще (карусели, аккордеоны). Уже вот вот пойдут полноценные клиентские проекты

Ответить
0

UPDATE: SendPulse тоже поддерживает AMP контент 
https://sendpulse.com/ru/blog/amp-emails

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }