Создание AMP-карусели
Один из самых простых и популярных элементов интерактивности в письмах – карусель изображений.
Добавить её в редакторе eSputnik достаточно просто как с помощью встроенных блоков, так и с помощью сторонних сервисов.
Чтобы при отправке рассылки AMP-карусель отображалась у получателей - подайте заявку на подтверждение отправителя.
Создание AMP HTML-карусели
Для создания AMP-карусели зайдите в редактирование любого письма:
Откройте раздел “Блоки” на панели слева;
Перетяните блок “Карусель” в HTML-шаблон, с которым вы работаете;
Этот блок в письме по умолчанию имеет значок ⚡HTML, так как карусель будет отображаться только в AMP-письмах, в почтовиках, которые поддерживают эту технологию (Gmail, Mail.ru). В остальных почтовых клиентах блок будет скрыт, позже в статье мы расскажем, как создать альтернативную версию для них.
Задайте параметры самой 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 MIME и не поддерживают AMP.
Опция “Включать в ⚡HTML” позволяет показывать элемент в почтовых клиентах, которые поддерживают MIME-тип AMPHTML (text/x-amp-html).
Если же для элемента ничего не выбрано, то он будет отображаться на всех устройствах и во всех почтовиках. А если почтовый клиент не поддерживает выбранный вами вид интерактивности, получатель увидит только первое изображение.
Поэтому вместо интерактивной HTML-карусели можно добавить, например, обычную карточку товара и для нее активировать опцию “Включать HTML”. Это статический блок в письме для подстраховки. Благодаря этому ваша карточка товаров будет отображаться только в тех почтовиках и на тех устройствах, которые не поддерживают AMP.
Проверка AMP-письма на ошибки
В редакторе eSputnik уже есть встроенная валидация кода. Если в шаблоне что-то неправильно, то вы увидите сообщение прямо на панели управления. Чтобы посмотреть ошибки в AMP-контенте, достаточно открыть редактор кода:
А затем кликнуть по красному предупреждению, чтобы получить детализацию.
Либо нажмите на иконку “Предпросмотр письма”:
В открывшемся окне вы можете кликнуть курсором по предупреждению, чтобы увидеть описание ошибок. Их можно исправить прямо в редакторе либо скопировать код письма для валидации в Google Playground.
В интерфейсе предпросмотра выведены эти 3 опции:
Исправить в редакторе,
Копировать AMP HTML в буфер обмена,
Открыть AMP Playground.
Читайте также "Как подать заявку для добавление в белый список отправителей AMP"