Создать AMP-письмо с каруселью

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

В Unisender вы можете создать AMP-письмо с каруселью изображений. Это один из самых популярных AMP-элементов в письмах, который позволяет добавить в один блок несколько картинок с прокруткой. С его помощью можно лучше презентовать товар, показав его с разных ракурсов, или разместить сразу несколько акционных предложений. Такой подход в подаче визуальной информации помогает увеличить продажи, а также делает письмо более уникальным и запоминающимся.

9 примеров, как использовать карусель изображений в письме

В этой статье мы подробно расскажем, как создать AMP-письмо с каруселью изображений в конструкторе Unisender.

Что нужно знать про AMP-письма

Поддержка AMP почтовыми сервисами

На сегодняшний день технологию AMP поддерживают Gmail, Mail.ru и Yahoo. Яндекс и другие менее популярные почтовые провайдеры пока не показывают AMP-элементы в письмах. При этом около 80% подписчиков в России открывают почту через Mail.ru и Gmail, а значит, AMP-контент будет доступен большинству контактов в вашей базе.

Если почтовый сервис, на котором зарегистрирована почта получателя, не поддерживает AMP-письма, то подписчик получит HTML-версию письма, в котором не будет блока с AMP-элементом. Чтобы все ваши клиенты получили корректное письмо с полноценным контентом, обязательно создайте альтернативную версию письма. Для этого в макете, помимо блока с каруселью, нужно создать блоки со статичными картинками. Как это сделать, расскажем далее.

Разрешение для отправки AMP-писем

Чтобы делать рассылки с АМP-элементами, нужно предварительно получить разрешение от почтовых сервисов.

Интерактивное письмо содержит в коде скрипт. А почтовые провайдеры запрещают доставлять письма с активным содержимым или же просто вырезают его из писем. Такое ограничение действует, чтобы спамеры не могли распространять с помощью рассылок вирусы. Поэтому каждый, кто хочет использовать скрипты в письме, должен доказать, что он добросовестный отправитель.

Как получить разрешение на отправку AMP-писем

Как создать AMP-письмо с каруселью

Шаг 1. Создайте письмо в конструкторе

Чтобы создать AMP-письмо с каруселью, нажмите на кнопку «Создать рассылку» на любой странице личного кабинета и в выпадающем списке выберите «Email».

Переходим в раздел создания email-рассылки

На вкладке «Шаблоны» вы можете выбрать готовые шаблоны Unisender с AMP-элементами, которые вынесены в отдельный раздел.

Как создать письмо на основе шаблона

При создании рассылки можно выбрать готовый шаблон с AMP-элементом

Чтобы создать письмо самостоятельно, перейдите на вкладку «Письмо с нуля» и выберите «Конструктор».

Выбираем конструктор для создания письма с AMP

 

AMP-элементы можно использовать только в конструкторе писем. HTML-редактор не поддерживает AMP-верстку.

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

Шаг 2. Заполните письмо контентом

Для начала создайте основу письма. Добавьте хедер с логотипом, ссылку на веб-версию письма, текст и футер с социальными сетями (подвал). Каждый блок добавьте в отдельную строку, чтобы можно было применять разные настройки для каждой из них.

Создание письма в конструкторе

Создаем текст письма, хедер и футер

Шаг 3. Добавьте блок «Карусель»

В то место, где должен находиться баннер, перетаскиваем блок «Карусель».

Перетаскиваем блок «Карусель» на рабочую область

Чтобы добавить первое изображение для карусели, кликните на кнопку «Обзор» внутри блока.

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

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

Выбираем нужные изображения для карусели

После создания первого слайда нажмите «ADD NEW SLIDE» и выберите оставшиеся изображения для карусели. Лимита на количество слайдов нет, но не стоит перенасыщать блок контентом. Достаточно 3-5 изображений.

Добавляем еще несколько слайдов, выбирая для них нужные изображения

 

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

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

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

Готовая карусель с тремя слайдами

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

Рекомендации: как повысить доставляемость

Настраиваем изображения для карусели

Шаг 4. Настройте карусель

Если необходимо изменить очередность изображений в карусели, в свойствах блока перетащите нужное изображение вверх или вниз.

Меняем очередность слайдов в карусели

Добавим автовоспроизведение — автоматическую смену слайдов в карусели. Для этого в «Свойствах блока» включите чекбокс «Автовоспроизведение» и укажите для него нужный интервал (в секундах).

Включаем автовоспроизведение слайдов с интервалом в 4 секунды

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

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

Включаем навигацию для ручного переключения слайдов в карусели

Шаг 5. Добавьте описание к карусели

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

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

Добавим небольшой текст над каруселью, который будет служить подсказкой. Поскольку этот блок нужен только для AMP-версии письма, скроем его для HTML-версии. Для этого нажмите на сам текст и в свойствах блока в параметре «Скрыть» выберите «HTML».

Скрываем блок с подсказкой для HTML-версии письма

Шаг 6. Создайте блоки со статичными картинками для HTML-версии письма

Далее добавим блоки со статичными картинками, которые будут отображаться у тех получателей, кто отключил динамический контент в настройках почты или чья почта не поддерживает AMP.

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

Добавляем 3 отдельные статичные картинки под блок «Карусель»

Чтобы они были видны только тем получателям, у которых AMP-элементы отображаться не будут, отключим отображение этих блоков для AMP-письма. Для этого нажмите на каждый блок с картинкой и в свойствах блока выберите условие «Скрыть» — «AMP».

В правом верхнем углу блока появится значок с перечеркнутым глазом и подписью «AMP».

Скрываем отображение блоков со статичными картинками для AMP-версии письма

Шаг 7. Проверьте, как письмо будет выглядеть

Посмотреть, как именно письмо будет выглядеть у получателей AMP-версии и у получателей HTML-версии, можно в предпросмотре. Для этого в левом верхнем углу нажмите на «Действия» — «Предпросмотр».

Переходим в режим предпросмотра письма

Здесь можно посмотреть AMP-письмо и его HTML версию при отображении на компьютере и мобильном телефоне.

Предпросмотр разных версий письма

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

Как адаптировать письмо под мобильные устройства

Шаг 8. Отправьте тестовое AMP-письмо

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

Протестировать письмо с каруселью можно и до регистрации в почтовых сервисах как отправителя AMP. Для этого необходимо добавить свой адрес отправителя в доверенные на сервисе Gmail.

Чтобы это сделать, зайдите на почту Gmail, перейдите в настройки почты (нажав на значок шестеренки в правом верхнем углу) и перейдите в раздел «Все настройки».

Переходим в настройки почты Gmail

На открывшейся странице включите поддержку динамического контента в письмах.

Включаем поддержку динамического контента на почте Gmail

Далее добавьте email, с которого будет отправлен тест, в доверенные. Для этого кликните на «Настройки для разработчиков» и в поле «Всегда показывать динамические письма этого отправителя» впишите ваш email.

Добавляем наш адрес отправителя в доверенные отправители на Gmail

Не забудьте нажать на «Сохранить изменения» внизу раздела настроек.

Теперь отправим наше письмо с адреса, который мы указали в качестве доверенного на нашей Gmail почте. Чтобы отправить тестовое письмо прямо из редактора, нажмите на «Действия» — «Отправить тест» в левом верхнем углу.

Переходим в раздел для отправки тестового письма из конструктора

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

Отправляем тестовое письмо на почту Gmail

Вот, как выглядит письмо на почте Gmail с поддержкой AMP.

Тестовое письмо с AMP-каруселью на Gmail

А так письмо выглядит на почте, которая AMP не поддерживает.

HTML-версия письма с AMP на почте

Полезные ссылки:

Что такое AMP-письма
Гид по AMP: нужны ли вам интерактивные письма
Основные возможности конструктора писем
Адаптировать письмо под мобильные устройства
9 примеров, как использовать карусель изображений в письме
Создать креативы для рассылки в конструкторе писем

Вы нашли ответ?

0
0