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

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

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

Пример AMP-карусели

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

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

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

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

Добавление блока AMP-карусель

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

AMP-карусель на панели блоков drag’n’drop

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

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

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

Настройка параметров блока

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

Загрузка изображения для слайда карусели

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

Загрузка картинки для второго слайда карусели

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

Задать альтернативный текст к картинке

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

Добавление ссылки для картинки слайда

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

Добавить ещё один слайд

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

Важно

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

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

Редактирование изображений в письме

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

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

Показывать превью слайдов

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

Отображение превью в карусели

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

Ширина превью

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

Положение превью по отношению к слайдам

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

Толщина и цвет обводки активного и неактивного превью

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

Выравнивание превью по отношению к активному слайду

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

Настройка закругления краев превью

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

Задать свое превью в виде картинки или цвета

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

Выбрать цвет превью

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

Если задать сплошной цвет для превью

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

Настройка пользовательского превью с картинкой

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

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

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

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

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

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

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

Добавление картинок из eSputnik

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

Добавление слайдов в карусель

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

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

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

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

Выбрать настройки ссылок

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

Настроить размеры блока с каруселью

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

Тестирование карусели

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

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

Добавление HTML-карусели

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

Редактор кода в eSputnik

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

Код разметки в Freshinbox

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

Копирование карусели

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

Перенос CSS-стилей

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

Заполнение CSS-стилей

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

Работа с кодом

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

Включение HTML-элементов

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

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

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

Предпросмотр карусели в eSputnik

Важно

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

  • Опция “Включать в ⚡HTML” позволяет показывать элемент в почтовых клиентах, которые поддерживают MIME-тип AMPHTML (text/x-amp-html).

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

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

HTML-элемент – карточка товаров

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

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

Детализация ошибок в AMP-элементах

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

Предпросмотр писем в eSputnik

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

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

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

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

  • Открыть AMP Playground.

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

Остались вопросы?
Специалисты обязательно ответят и помогут решить вашу проблему!
Обратный звонок
Оставьте заявку – и наш специалист свяжется с вами в рабочее время.
Отправить заявку
Консультация в чате
Готовы к вашим вопросам!
Написать в чат
Электронная почта
Напишите в службу поддержки eSputnik.
Отправить email