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

Один из самых простых и популярных элементов интерактивности в письмах – карусель изображений.

Добавить её в редакторе eSputnik достаточно просто как с помощью встроенных блоков, так и с помощью сторонних сервисов.

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

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

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

1. Откройте раздел “Блоки” на панели слева;

2. Перетяните блок “Карусель” в HTML-шаблон, с которым вы работаете;

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

3. Задайте параметры самой AMP HTML-карусели. Для этого:

• Кликните левой кнопкой мыши по блоку, чтобы открыть панель настроек;

Система предложит создать первый слайд. Для этого загрузите картинку также, как вы делаете с блоком “Изображение": выберите файл с компьютера либо вставьте через ссылку.

Т. к. это блок карусели, он подразумевает более одного изображения. Нажмите на кнопку “Добавить слайд” и загрузите еще одну картинку.

• Задайте alt-текст – опишите кратко, что изображено на картинке. Он покажется получателям, пока будет загружаться изображение либо если у них вовсе отключен показ изображений.

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

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

Количество используемых слайдов неограниченно, но каждый добавленный слайд увеличивает вес сообщения. Следите за тем, чтобы он не превышал 80-100 Кб, иначе Gmail обрежет письмо.

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

После того как загрузите и отредактируете изображения, перейдите к доступным настройкам форматирования карусели:

• Показывать превью.

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

• Ширина превью. Укажите ширину для предпросмотра изображений.

• Выберите положение превью “Сверху” или “Снизу” по отношению активной картинке.

• Задайте толщину и цвет активного и неактивного превью.

• Отредактируйте выравнивание картинок по отношению к активному изображению.

• Установите закругление краев превью.

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

Цвет превью настраивается в области под загрузкой слайда:

Результат выглядит так:

Для подстановки картинки на превью выберите Тип превью “Картинка” и загрузите нужное изображение в область под редактированием картинки слайда:

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

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

Создайте запасной HTML-блок, который отобразится у тех пользователей, чей почтовик не поддерживает AMP HTML.

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

FreshInbox – англоязычный сервис с полезными статьями и инструментами для емейлов вроде ролловера и промотабов.

Созданная здесь карусель поддерживается только в iOS Mail, Samsung Mail, Apple Mail, Yahoo Mail, AOL и Outlook 2003.

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

• Минимально возможное количество картинок – одна, максимальное – пять. Чтобы добавлять слайды, нажимайте на кнопку More images.

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

• Настройте ссылки для слайдов:

  • выберите, как будут задаваться ссылки для перехода (одна ссылка всем изображениям или отдельный URL каждому слайду);

  • впишите ссылки в соответствии с выбранными настройками.

• Задайте необходимые размеры вашему блоку с каруселью. Напоминаем, что оптимальная ширина для email – 600-640px. Адаптивность здесь включена по умолчанию.

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

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

• Добавьте в ваше письмо блок HTML там, где должна быть карусель.

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

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

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

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

• В редакторе eSputnik откройте секцию CSS, нажав на соответствующий значок, и вставьте скопированный CSS в конец кода с новой строчки.

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

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

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

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

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

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

В редакторе eSputnik уже есть встроенная валидация кода. Если в шаблоне что-то неправильно, то вы увидите сообщение прямо на панели управления. Чтобы посмотреть ошибки в AMP-контенте, достаточно открыть редактор кода:

А затем кликнуть по красному предупреждению, чтобы получить детализацию.

Либо нажмите на иконку “Предпросмотр письма”:

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

В интерфейсе предпросмотра выведены эти 3 опции:

• Исправить в редакторе,

• Копировать AMP HTML в буфер обмена,

• Открыть AMP Playground.

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