Маркетинг Руководство

Как сделать AMP-письмо: этапы и важные нюансы на примере письма EMAILMATRIX

В марте 2019 года Google выкатили в общий доступ технологию AMP4Email. Она позволяет сделать письма интерактивными, как мини-сайты. Мы сразу же подхватили эту новость и решили освоить новинку и отправить первое письмо подписчикам. Рассказываем, что такое AMP-технология, как готовили письма и какие результаты получили.

Как готовили первое письмо

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

С помощью AMP-технологии в письме можно:

  • использовать разные механики для просмотра товаров — карусели, аккордеоны, лайтбоксы:

Карусель

Аккордеон

Лайтбокс

  • добавлять товары в корзину и корректировать заказы:

  • читать статьи, отзывы, оставлять комментарии, ставить лайки:

  • заполнять анкеты, брифы:

  • отвечать на приглашения и отслеживать количество участников:

  • редактировать контент — даже в отправленном письме вы сможете заменить подборки, даты, акции на актуальные.

После мы начали продумывать общую структуру письма.

Антон Чирков

Руководитель отдела разработки 
EMAILMATRIX

Арина Сычёва

Редактор 
EMAILMATRIX

Прототип письма и тексты

Наши подписчики — маркетологи и клиенты агентства. Им интересно всё, что происходит в мире маркетинга, и особенно инновации и их реализация.

Как только письма стали поддерживать AMP-технологию, об этом заговорили все. Некоторые компании пытались сделать первые AMP-письма, но функций, которые предоставляет технология, в них было мало. Поэтому мы решили сделать своё письмо и показать в нём основные возможности AMP. Так мы бы выступили в роли экспертов и привлекли внимание нашей аудитории.

Мы хотели показать всё самое полезное и востребованное у маркетологов, но в то же время не перегружать письмо.

К тому же надо было продумать, какие механики мы будем использовать и на каких продуктах будем их показывать. При этом мы решили максимально сохранить нашу типичную структуру письма.

Так выглядят наши письма с анонсами статей

По примеру наших стандартных писем, ставим сначала привычную шапку с логотипом и номером телефона. Далее в письмах у нас следует баннер. В этот раз мы сделали их три и оформили в виде карусели (слайдера). Нам нужно было продумать, о чём будут эти баннеры и куда вести пользователей, которые на них кликнули. Идеальным вариантом стали наши услуги и инструменты.

Прежде всего в письме нужно познакомить подписчиков с технологией. Поэтому следующим AMP-элементом решили сделать аккордеон с вопросами и ответами по этой технологии. Это помогло компактно оформить большой блок текста.

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

В конце письма мы разместили блок со статьями, которые автоматически подтягиваются с нашего блога, и сделали аналогичное ему оформление.

Прототип AMP-письма. Посмотреть в полном размере

Дальше появилась проблема: AMP-версию письма смогут увидеть только пользователи Gmail и Mail.ru. Остальные пользователи увидят html-версию, и надо было продумать, что в ней написать. Хотелось, чтобы эти подписчики тоже хоть как-то смогли оценить все плюсы технологии. Поэтому мы вставили в этот имейл ссылку на веб-версию AMP-письма. Так его механику смогли протестировать даже те пользователи, чьи почтовики не поддерживают AMP-технологию.

Html-версия письма

курс

Эффективный email-маркетинг

Узнать больше

  • Научитесь создавать email-стратегии
  • Освоите сервисы рассылок и другие инструменты email-маркетологов
  • Сможете создавать письма и понимать, какой стиль лучше выбрать и какие детали важно учесть

Дизайн

Мы утвердили текст и приступили к дизайну.

Работа над дизайном AMP-письма отличается от работы с обычными письмами и больше похожа на прототипирование лендингов.

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

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

Вот что у нас получилось в итоге:

AMP-письмо. Посмотреть в полном размере и с анимацией

Вёрстка

Дальше немного сложной технической информации, которая будет интересна и понятна тем, кто знаком с вёрсткой и настройкой писем. Если вы боитесь заскучать, то смело переходите к следующему блоку 🙂

AMP-письма состоят из трёх частей:

  • текстовая версия — для консольных почтовиков и текстового режима некоторых почтовых клиентов;
  • html-часть — как и для классических html-писем;
  • AMP-часть, которую будут интерпретировать только современные почтовые клиенты, в то время как устаревшие будут воспроизводить html-часть того же самого письма.

Получается, нам не нужно думать, как подстроить AMP-письмо под почтовые клиенты вроде Outlook 2016. Ведь они не поддерживают технологию в принципе. Не нужно прописывать условные комментарии или придумывать сомнительные конструкции и хаки.

Вёрстка AMP-части письма больше похожа на классическую веб-вёрстку, а не на вёрстку писем. Помимо классных функций вроде каруселей и аккордеонов, у AMP-технологии есть три ключевые возможности:

  • работа с состоянием — amp-bind (позволяет сделать страницу интерактивной),
  • работа с удалённым контентом — amp-list (позволяет онлайн подтягивать с сайта текст, картинки и другие данные),
  • работа с формами — amp-form.

Как раз форму мы и разместили в нашем письме после аккордеона — предложили пользователям написать свой комментарий и отправить его. Нам хотелось, чтобы читатель смог сразу увидеть свой комментарий и оценить возможности технологии, так что комментарии мы модерировали постфактум.

Когда пользователь отправлял комментарий в форме, запрос проверялся на сервере. Затем комментарий либо сразу же выводился в живую ленту, либо автор видел ошибку — например, что поле не заполнено. Для оформления комментариев мы использовали шаблон вывода данных amp-mustache. Для вывода же самих комментариев использовали компонент amp-list.

Формы позволяет не просто взаимодействовать с письмом, но и совершать прямо в нём внешние действия.

Самый простой вариант — подтверждение подписки в один клик внутри письма, то есть без перехода на сайт платформы для email-рассылок (ESP) или компании. Для интернет-магазинов ключевым действием в рамках возможности использования форм может быть «положить товар в корзину» — без лишних действий и переходов.

После блока с комментариями мы разместили блок со статьями с возможностью переключения по рубрикам. Компонент amp-bind позволяет видоизменять письмо в зависимости от действий пользователя: вывести информацию о товаре, показать форму заказа или, как в нашем случае, переключить рубрику статей. Можно придумать массу механик: как для описания или заказа товаров или услуг, так и полноценные игровые, вроде мини-игр, квестов и головоломок.

Сами статьи мы подтягивали через amp-list по аналогии с комментариями, плюс прописали шаблон вывода amp-mustache. Таким образом в письмо автоматически подтягивались актуальные статьи с нашего блога.

Использовать amp-list можно и менее автоматизированно — когда json-данные собирают вручную и подставляют в AMP-письмо. Это помогает актуализировать информацию в письме через json-файл уже после его отправки.

Компонент amp-list позволяет всегда показывать пользователю актуальную информацию: корректные цены с сайта, товары, которые есть в наличии и доступны по акции, рейтинг и комментарии, статьи и вебинары — всё что угодно.

Причём сделать так, чтобы пользователи всегда видели актуальные данные, совсем не сложно, нужно только один раз всё настроить — подготовить серверную часть, которая будет возвращать данные с необходимыми http-заголовками в формате json.

Возможность использовать подобные элементы практически стирает грань между дорогой и бюджетной ESP. Потому как все актуальные данные по товарам или статьям можно хранить непосредственно на сайте, а не настраивать через ESP как динамический контент или с помощью данных из внутреннего хранилища, вроде таблиц данных, или импортированием yml-списка товаров.

Проверка, баги и отправка

Когда мы полностью сверстали письмо, нужно было его проверить на отсутствие ошибок AMP-кода. Ведь наличие хотя бы одной ошибки привело бы к полному игнорированию AMP-части письма — все пользователи увидели бы html-версию. С этим нам помогли AMP-Playground и Playground от Mail.ru.

Чтобы просмотреть письмо ещё до получения одобрения от Google, можно отправить его себе на почтовый ящик Gmail. Для этого нужно указать в настройках почты адрес, с которого вы будете слать тестовое письмо:

Чтобы получить разрешение у Mail.ru на отправку письма, мы подали заявку в произвольной форме на адрес [email protected]:

А чтобы получить разрешение у Gmail, мы отправили на [email protected] уже готовое письмо, которое включало в себя AMP- и html-части. Также нужно было заполнить гугл-форму.

Следует учесть, что отправлять готовое письмо надо именно с того адреса, с которого в дальнейшем вы планируете делать рассылку.

Чтобы получить одобрение, должны быть корректно настроены SPF, DKIM, DMARC. Причём DMARC должен быть настроен с запрещающей политикой — quarantine или reject.

Mail.ru одобрили наш запрос уже через день. От Gmail мы получили одобрение примерно через неделю.

После всех этих действий и получения одобрений от Mail.ru и Gmail мы приступили к финальной настройке письма в ESP.

Как оказалось, ESP, объявившие о поддержке AMP, предусмотрели далеко не все сценарии. Все ESP используют трекинг-пиксели для отслеживания открытий. Для AMP-писем критично, чтобы для адреса, по которому находится пиксель, использовался именно защищённый протокол передачи данных HTTPS. Иначе письмо не пройдёт AMP-валидацию и все получатели увидят его html-версию. Но не все ESP используют HTTPS для трекинг-пикселя по умолчанию. Эту проблему мы решали с техподдержкой.

Ещё один момент — это отслеживание кликов. Обычно для этого ESP заменяет все ссылки в письме (то есть содержимое каждого атрибута href тега <а>) на свои ссылки, которые после фиксирования факта перехода перебрасывают по адресу оригинальной ссылки. Вот только в AMP-письмах часто используются шаблоны amp-mustache, где у тега <a> в атрибуте href прописывается переменная, которая в дальнейшем проставляется из json. А замена ссылки со стороны ESP приводит к некорректной работе письма — пользователь переходит на несуществующую ссылку с любого динамически подставленного элемента. Мы сообщили об этой проблеме в техподдержку ESP, и через пару месяцев они всё исправили.

Помимо проблем с ESP, мы обнаружили целый ряд проблем у Mail.ru.

Во-первых, проблема с зацикленными каруселями в мобильном приложении на iOS. Первый AMP-элемент в нашем письме — каруселька с баннерами. Если использовать зацикленный вариант отображения (атрибут loop), то в приложении Mail.ru на iOS при прикосновении к экрану в любом месте все карусели в письме с данным атрибутом начинают бешено крутиться. Mail.ru уже знают об этой проблеме, но пока что её не исправили: вероятно, работают над этим. Чтобы избежать такого неприятного эффекта, мы просто убрали у карусели зацикленность.

Во-вторых, проблема в веб-интерфейсе Mail.ru с amp-bind: когда мы пытались переключить рубрики в блоке со статьями, письмо ломалось и вылезала JavaScript-ошибка. Это не позволяло дальше взаимодействовать с письмом. Мы сообщили об этих проблемах Мail.ru, и они обещали всё исправить.

Чтобы не затягивать с отправкой, мы подготовили отдельную версию для Мail.ru, где переключение осуществлялось за счёт CSS и радиобаттонов.

Примечание редакции 

Всё меняется. Когда вы будете читать эту статью, проблемы могут потерять актуальность.

Какие результаты получили

Для отслеживания расширенной статистики помимо аналитики ESP мы также задействовали трекинг-пиксели гугл-аналитики: повесили отдельные пиксели в html- и АМР-версию письма.

В ноябре 2019 года мобильное приложение Gmail ещё не поддерживало AMP, но даже при этом почти треть наших подписчиков увидели именно AMP-версию. 32,8% из них получили AMP-версию письма, а 67,2% — обычную html-версию. 

Возможность оставлять комментарии сразу вызвала интерес у подписчиков. Они начали не просто писать отзывы, а даже общаться друг с другом прямо в письме:

18% пользователей, получивших и открывших AMP-версию письма, оставили комментарии. Что весьма неплохой показатель, в сравнении с обычными html-письмами. Помимо этого, из тех, кто перешёл на веб-версию письма, комментарии оставили 15%.

Open Rate этого письма был на 34% выше по сравнению с нашим средним показателем открытий. Такой результат мы получили за счёт того, что в теме и прехедере чётко сказали, что сделали своё AMP-письмо. Так как такая тематика сама по себе интересна маркетологам, нам не пришлось придумывать что-то сверхкликбейтное. Достаточно было сказать по факту, что да как 🙂

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

33%

подписчиков получили AMP-письмо

20%

из них совершили целевое действие

74%

Open Rate письма

Стоит отметить, что прошёл уже год после официального запуска технологии, и почтовики ещё не успели нормально её отладить в своих интерфейсах и запустить в приложениях. А ESP ещё толком не научились с ней работать. Да, они могут отправить письмо из трёх частей — текст-html-AMP. Но мало кто ещё собирает раздельную статистику по ним, формирует две соответствующие веб-версии письма или хотя бы предлагает указать при настройке, какую версию в каких ситуациях показывать.

Методом проб и ошибок мы овладели новой крутой технологией, с помощью которой можем теперь создавать более удобные и современные письма.

AMP — это не «карусельки, чтобы поместить больше товаров в письмо». Это возможность вовлечь пользователя в диалог с компанией, предоставить ему удобный и быстрый инструмент для взаимодействия с вашим сервисом или магазином. А также возможность изменить подход к email-маркетингу с точки зрения персонализации и использования динамического контента.



Мнение автора и редакции может не совпадать. Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Антон Чирков

Руководитель отдела разработки EMAILMATRIX

Арина Сычёва

Редактор EMAILMATRIX