Настройка AMP-карусели

Один из самых простых и популярных элементов интерактивности в письмах - карусель изображений. Добавить её в редакторе eSputnik достаточно просто как с помощью встроенных блоков, так и сторонних сервисов.

Создание AMP HTML-карусели

Для создания AMP-карусели необходимо зайти в редактирование любого письма:

1. Зайдите в раздел Блоки

2. Перетащите блок AMP-карусели в HTML-шаблон, с которым вы работаете;

Этот блок по умолчанию будет со значком “⚡HTML”, так как этот элемент будет отображаться только в AMP-письмах, в почтовиках, которые поддерживают эту технологию (Gmail, Mail.ru). В остальных почтовых клиентах этот блок будет скрыт, для них мы позже в настройках зададим альтернативную версию.

3. Задайте параметры самому блоку AMPHTML. Для этого: 

• Кликните дважды по блоку для запуска панели настроек;

• Переключите бегунок “Показывать превью”, чтобы в предпросмотре письма отображались миниатюры всех изображений;

• Укажите ширину для предпросмотра этих изображений;

• Добавить первый слайд, кликнув на значок загрузки;

• Выберите картинку из предзаготовленных картинок или загрузите новую

• Задайте Альт-текст;

• Добавьте соответствующую ссылку;

Чтобы создать остальные слайды карусели, нажмите “Добавить слайд” и повторите все те же действия с загрузкой других картинок. Количество используемых слайдов не ограничено.

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

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

Создание HTML-блока для других получателей

Пользователи Gmail или Mail.ru увидят AMP-блок, а как быть с остальными? Создадим запасной HTML блок, который покажется в случае, если “⚡HTML” не поддерживается.

Вариант 1: Интерактивная карусель с помощью FreshInbox

Поддерживается только устройствами Apple и почтовиком Yahoo! Mail.

• Заходим в Freshinbox и задаём свои картинки, добавляя ссылки на них

• Минимальное количество картинок в карусели три, но можно добавить дополнительные, нажав на кнопку “More images”

• Задайте необходимые размеры этому блоку. Адаптивность здесь включена по умолчанию.

• Протестировать элемент можно отправив на свой емейл-адрес

Перенос блока в eSputnik

• Добавьте в вашем письме блок HTML

• Нажмите на редактор кода, чтобы открылось HTML-окно

• Cкопируйте HTML из Freshinbox

• Вставьте скопированный код в HTML-часть

• Скопируйте CSS из Freshinbox

• В редакторе eSputnik откройте вкладку CSS и вставьте скопированный CSS в конец кода

• Нажимаем ещё раз на иконку, чтобы закрыть редактор кода.

• Кликните на добавленную карусель и в открывшейся панели настроек в строке “Включать” выберите вариант HTML.

Чтобы проверить как работают оба блока, нажмите на предпросмотр:

И переключайтесь между версиями

И ещё несколько нюансов:

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

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

  • добавить текст

  • изменить размеры

  • добавить кнопку и т.д.

Проверка AMP-письма на ошибки

Если вы используете редактор eSputnik, то здесь уже есть встроенная проверка кода. Чтобы проверить ваше письмо с АМП-контентом достаточно нажать в редакторе сообщений на предпросмотр письма

В открывшемся окне вы можете навести курсор на ошибки, чтобы увидеть их описание. Найденные ошибки можно исправить прямо в редакторе, либо скопировать код письма для валидации в Google Playground.
Доступны 3 опции:

• Открыть редактор кода,
• Копировать AMP HTML в буфер обмена,
• Открыть AMP Playground.

Читайте также "Как подать заявку для добавление в белый список отправителей AMP"