AMP-письмо — это email-рассылка с интерактивными элементами, которые позволяют пользователю взаимодействовать с контентом.
В обычных письмах можно только читать текст, смотреть изображения, кликать на кнопки и переходить по ссылкам. А в AMP-письмах подписчик может:
- листать карусель изображений;
- сравнивать разные модели товаров;
- скрывать и раскрывать текст в блоках FAQ, описания услуг или условиях акции;
- заполнять простые формы, например, чтобы оставить отзыв или выбрать удобное время для звонка;
- оформлять заказ прямо в письме без перехода на сайт.
Интерактивный контент положительно влияет на ключевые метрики рассылки: вовлеченность подписчиков может увеличиться на 225%, а число переходов — на 101,6%.
В новом редакторе Unisender реализована полная поддержка AMP. Редактор на уровне кода распознает интерактивные элементы и позволяет редактировать их контент.
Вы можете создать AMP-письмо с помощью AMP-элементов (карусели и аккордеона), сверстать его самостоятельно или загрузить готовое письмо в сервис.
Также можно настроить отображение интерактивного контента в письме. Например, скрыть его в HTML-версии и заменить статичным изображением. Такое письмо будет корректно отображаться в любом почтовом клиенте, который не поддерживает AMP.
Разберем подробно, как работать с AMP-письмами в новом редакторе.
Что нужно знать про AMP-письма
AMP-технология поддерживается не всеми почтовыми клиентами. На данный момент интерактивный контент отображается только в Gmail, Mail.ru и Yahoo Mail. В остальных сервисах подписчики увидят стандартную HTML-версию письма без AMP-элементов.
Чтобы использовать AMP-элементы в рассылках, отправителю нужно соответствовать требованиям почтовых сервисов и получить разрешение на отправку интерактивных писем.
Подробно об этом рассказали в статье «Как получить разрешение на отправку AMP-писем».
Как создать AMP-письмо с помощью готовых элементов
Способ подойдет пользователям, которые только знакомятся с технологией AMP или хотят быстро создать рассылку с интерактивным контентом, не погружаясь в код.
Можно добавить в письмо:
- AMP-карусель. Дает возможность добавить несколько изображений и листать их как слайды влево или вправо. Подходит для демонстрации товаров, акций и подборок.
- AMP-аккордеон. Позволяет сворачивать и разворачивать текстовые блоки. Можно использовать для FAQ, описания товаров или условий акции.
Разберем подробно оба варианта.
AMP-карусель
Чтобы добавить AMP-карусель, создайте рассылку и письмо любым удобным способом, следуя инструкции.
Затем перейдите на вкладку «Контент» — «Элементы», перетащите элемент «Карусель» на рабочую область редактора и нажмите на элемент, чтобы перейти к его редактированию.
В правой части экрана откроются настройки карусели. Здесь вы можете:
- Добавить к карусели общую ссылку, чтобы при клике на любое изображение подписчик смог перейти на сайт.
- Заменить, отредактировать или удалить текущее изображение в карусели, а также добавить к нему Alt-текст или ссылку на отдельный товар. Подробно об этом можно прочитать в статье «Как работать с картинками».
- Добавить в карусель еще одно изображение, кликнув «Добавить слайд».
- Настроить повтор изображений, чтобы создать эффект бесконечной прокрутки, или автозапуск, чтобы картинки автоматически перелистывались при просмотре письма в почтовике.
- Добавить скругление углов для изображений.
Заранее подготовьте картинки с одинаковыми пропорциями. Карусель лучше всего смотрится при использовании изображений одного размера.
Когда карусель будет готова, останется только настроить видимость блока и подготовить его HTML-версию. Тогда контент будет корректно отображаться у всех пользователей. AMP-версию увидят подписчики, чей почтовый клиент поддерживает технологию, а HTML — остальные. Подробная инструкция по настройке приведена ниже.
AMP-аккордеон
Чтобы добавить AMP-аккордеон, создайте рассылку и письмо любым удобным способом, следуя инструкции.
Затем перейдите на вкладку «Контент» — «Элементы», перетащите элемент «Аккордеон» на рабочую область редактора и замените шаблонный текст.
В хлебных крошках, расположенных внизу экрана, нажмите пункт «Аккордеон». Откроются настройки элемента. Здесь вы можете:
- Задать, чтобы открытым всегда оставался только один раздел. Тогда при открытии нового раздела остальные будут закрываться автоматически. Данная функция включена по умолчанию.
- Настроить плавное открытие и закрытие раздела с помощью переключателя «Анимация». Данная функция включена по умолчанию.
- Добавить новый раздел с текстом.
- Удалить ненужный раздел.
Добавьте в аккордеон нужный контент, а затем перейдите к настройкам блока, чтобы изменить его внешний вид и параметры видимости.
В результате у вас должно получится две версии блока: AMP-версия для почтовых клиентов, которые поддерживают технологию, и HTML-версия для остальных. Подробная инструкция по настройке приведена ниже.
Как создать AMP-письмо с помощью кода
Способ подходит опытным пользователям, которые разбираются в верстке и ранее работали с AMP.
В личном кабинете нажмите кнопку «Создать рассылку».
Как создать и отправить рассылку в новом редакторе
Выберите способ создания «Создать письмо в HTML-редакторе».
Откроется редактор писем в режиме кода, где вы сможете создать письмо самостоятельно.
Тело AMP-письма всегда заключается в HTML-тег <html ⚡4email> или <html amp4email>. Внутри этого тега нужно использовать специальные AMP-компоненты: <amp-img>, <amp-carousel> и другие.
Документация по созданию AMP-писем
Чтобы письмо корректно отображалось у всех получателей, не забудьте добавить в него HTML-версию блока для почтовых клиентов, которые не поддерживают AMP, и настроить видимость контента.
Как загрузить готовое AMP-письмо
Способ подойдет для загрузки готового шаблона, который вы получили от верстальщика или в стороннем сервисе.
В личном кабинете нажмите кнопку «Создать рассылку» и выберите способ создания «Письмо с нуля».
Как создать и отправить рассылку в новом редакторе
Откроется редактор писем. Нажмите в правом углу редактора кнопку «Импортировать» и загрузите файл с устройства.
Импортированное письмо можно будет отредактировать перед отправкой — изменить тексты, картинки, отступы и цвета.
Далее настройте видимость блока с динамическим контентом и создайте его статичную версию, следуя инструкции ниже. В результате у вас получится две версии блока: AMP-версия для почтовых клиентов, которые поддерживают технологию, и HTML-версия для остальных.
Как настроить AMP и HTML-версии письма
Когда AMP-письмо будет готово, измените в настройках блока, содержащего динамический контент, параметр «Видимость в AMP». Выберите значение «AMP». На рабочей области рядом с таким блоком появится значок молнии. Теперь блок будет показываться только в почтовиках, которые поддерживают данную технологию.
Далее нужно после блока с AMP-элементом добавить в письмо блок со статическим контентом и настроить его видимость. Для этого перетащите на рабочую область элемент «Картинка» и загрузите нужное изображение.
Как работать с картинками в редакторе
В настройках блока в параметре «Видимость в AMP» установите «HTML». На рабочей области у статического блока появится значок кода. Теперь этот блок будет показываться только подписчикам, которые отключили динамический контент в настройках почты или используют почтовый сервис, не поддерживающий AMP.
При необходимости вы можете экспортировать готовое AMP-письмо в формате HTML или AMP.
При экспорте в AMP-формат редактор автоматически добавит все необходимые скрипты для корректной работы компонентов. При экспорте в HTML-формат письмо преобразуется в обычный формат без интерактивных элементов.
Чтобы проверить, как письмо будет выглядеть в почтовиках у клиентов, обязательно отправьте тестовое письмо на свои адреса, следуя инструкции.
Затем отправьте рассылку. Для подписчиков, которым доступен динамический контент, письмо будет выглядеть так:
Остальные подписчики увидят следующее письмо:
Как отправить тестовое письмо
Чтобы убедиться, что письмо отобразится корректно у всех получателей, откройте его на разных почтовых сервисах с разных устройств и операционных систем.
На Gmail
Протестировать AMP-письмо можно и до регистрации отправителя в почтовых сервисах. Для этого необходимо добавить свой адрес отправителя в доверенные на сервисе Gmail.
Чтобы это сделать, зайдите на почту Gmail, перейдите в настройки почты (нажав на значок шестеренки в правом верхнем углу) и перейдите в раздел «Все настройки».
На открывшейся странице включите поддержку динамического контента в письмах.
Далее добавьте email, с которого будет отправлен тест, в доверенные. Для этого кликните на «Настройки для разработчиков» и в поле «Всегда показывать динамические письма этого отправителя» впишите ваш email.
Не забудьте нажать на «Сохранить изменения» внизу раздела настроек.
Теперь отправим наше письмо с адреса, который мы указали в качестве доверенного на нашей Gmail почте.
Перейдите на последний шаг создания рассылки и нажмите кнопку «Отправить тестовое письмо».
Укажите email, для которого вы ранее настроили получение динамического контента, после чего нажмите«Отправить тестовое письмо».
На Mail.ru
Информация о том, как включить просмотр AMP-писем в Mail.ru, приведена на странице «AMP письма в Mail.ru».
Также пользователи Mail.ru могут использовать Mail.ru AMP Playground, чтобы отправить себе AMP-письма для тестирования.
Полезные ссылки
Что такое AMP-письма
Документация по созданию AMP-писем
Как получить разрешение на отправку AMP-писем
Новый конструктор писем: основные возможности и особенности
