How to Build AMP Carousel with Stripo_Cover Image
13 октября 2022

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

Начните создавать красивые письма на базе AMP
Оглавление
  1. Почему стоит создавать AMP-письма в Stripo:
  2. Гайд по созданию AMP-карусели в Stripo:
  3. Создание AMP-карусели с описанием и «кнопками» поверх изображений
  4. Небольшой совет
  5. Лучшие примеры каруселей в письмах для вдохновения
  6. В завершение
1.
Почему стоит создавать AMP-письма в Stripo:

В марте 2019 года Google выпустил AMP для писем. С июля 2019 года он доступен для пользователей G-Suite и «включен» по умолчанию для всех пользователей Gmail.

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

Сокращение времени, которое вы тратите на создание писем, за счет автоматизации большинства процессов всегда было главной целью Stripo.

Именно поэтому мы разработали конструктор AMP-писем и блок «AMP-карусель» для ускорения процесса дизайна. 

Как добавить drag-n-drop AMP-карусель в письмо с помощью Stripo

Прежде чем перейти к гайду, я хочу рассказать о преимуществах создания AMP-писем в Stripo.

Почему стоит создавать AMP-письма в Stripo:

  1. Вам не нужно добавлять AMPHTML-элементы кода в хедер письма.

  2. Не требуются навыки верстки — вы можете воспользоваться готовыми элементами.

  3. Экономия времени — вы просто вставляете ссылки на свои изображения в модуль контента.

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

Гайд по созданию AMP-карусели в Stripo:

Создание AMP-карусели с изображениями в Stripo состоит из двух шагов:

Шаг 1. Создание непосредственно AMP-карусели

  • перетяните блок AMP-карусели в HTML-шаблон письма, с которым вы работаете;

Блок AMP-карусели

Вы увидите рядом с этим элементом значок «⚡HTML». Это означает, что данный элемент будет отображаться только в AMP-письмах и будет скрыт в почтовых клиентах, не поддерживающих AMP. Нам нужно будет создать запасной вариант для других получателей. Мы поговорим об этом позже.

Модуль AMPHTML в письме

  • кликните на иконку «⚡ HTML», чтобы активировать панель настроек;

  • загрузите изображение 1 для вашего слайда;

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

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

Переключение кнопки превью и настройка ширины превью

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

  • вставьте ссылку на соответствующий товар;

Добавление изображений к слайдам _ AMP-карусель в Stripo

  • нажмите кнопку «Добавить слайд»;

Кнопка добавления слайда _ Создание AMP-карусели с помощью Stripo

  • проделайте то же самое с другими изображениями;

  • проверьте, совпадают ли размеры всех изображений. Если нет, обрежьте их с помощью нашего фоторедактора;

  • переключите кнопку «Автоперелистывание», если вы хотите, чтобы слайды менялись автоматически;

  • переключите кнопку «Цикличное перелистывание», чтобы слайды отображались с самого начала, когда пользователь кликает на последнее изображение;

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

  • найдите раздел «Превью слайдов» и выберите, где оно будет отображаться;

Секция превью слайдов _ Stripo

  • переключите кнопку «Пользовательское превью», чтобы выбрать тип превью (изображение или цвет);

Установка пользовательского превью в Stripo

  • переключите кнопку «Общая ссылка», чтобы добавить единственную ссылку на всю AMP-карусель;

  • готово!

Создайте AMP-карусель с помощью Stripo прямо сейчас
Начать

Важно отметить:

Я добавила 16 слайдов, и все они отлично работали в Gmail на разных устройствах.

Шаг 2. Создание запасного варианта для других получателей

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

AMP-карусель, которую мы только что создали, по умолчанию хорошо работает на десктопах в Gmail. 

Теперь пришло время создать запасной вариант для других. 

В этом случае существует два типа запасного варианта:

Тип 1: Интерактивная карусель

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

  • создайте обычную карусель контента с помощью FreshInbox;

  • скопируйте код встраивания;

  • перетащите HTML-блок в шаблон письма;

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

  • в редакторе кода вставьте код;

  • закройте редактор кода;

Закрытие кнопки редактора кода _ Создание AMP-писем с помощью Stripo

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

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

Кнопка включения в HTML _ Создание AMP-письма

Это означает, что каждый почтовый клиент сам решает, какую версию вашей карусели показывать!

Важно отметить:

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

Подробнее о том, как создать интерактивную карусель изображений, читайте в этой статье блога.

Тип 2. Статические модули контента товара

  • перетащите 2-колоночную структуру в шаблон письма;

  • поместите блок изображения в 1-ую колонку;

  • загрузите необходимое изображение;

  • поместите текстовый блок во 2-ую колонку;

  • оформите этот текст подходящим шрифтом.

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

Модули контента товара _ Создание AMP-писем

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

Важно отметить:

Как только вы установите опцию «Включать в HTML», выбранный элемент будет отображаться в тех почтовых клиентах, которые поддерживают только стандартный тип HTML-mime.

После выбора опции «Включать в AMPHTML» (⚡HTML) выбранный элемент будет отображаться в тех почтовых клиентах, которые поддерживают AMPHTML MIME-типа (text-x-amphtml).

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

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

Но что если вам нужна сложная карусель с более информативными картинками и «фальшивыми» кнопками над ними? Вы можете сделать это с помощью Stripo, так как наш редактор позволяет добавлять текст поверх изображений и применять множество фильтров ;).

Создание AMP-карусели с описанием и «кнопками» поверх изображений

Итак, в первую очередь необходимо построить обычную AMP-карусель, как описано в абзаце выше. Теперь перейдем к дизайну слайдов:

a) написание текста поверх изображений

  • после загрузки изображения откройте фоторедактор;

Создание AMP-письма с помощью Stripo _ Редактирование изображений

  • в панели настроек фоторедактора выберите опцию «Текст», чтобы поместить текст поверх ваших изображений. Редактор предлагает около 1000 шрифтов;

Встроенный фоторедактор

  • выберите тип шрифта и цвет;

  • в правом верхнем углу редактора нажмите кнопку «Применить», чтобы сохранить эти параметры.

б) размещение «кнопки» CTA поверх изображений

  • для начала необходимо подготовить эту кнопку — формат изображения должен быть SVG или любой другой с прозрачным фоном;

  • в левом верхнем углу панели настроек нажмите кнопку «Открыть»;

  • выберите опцию «Наложенное изображение»;

Добавление CTA-кнопки в виде изображения

  • загрузите изображение кнопки;

  • разместите его именно там, где вы хотите видеть его на своем слайде;

  • задайте размеры;

Добавление CTA-кнопки на слайд

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

Кнопка сохранения _ Работа с редактором

Итак, вот то, что мы только что создали вместе с вами:

Небольшой совет

Это просто дружеское напоминание. Чтобы иметь возможность отправлять AMP-контент, вам необходимо:

  • попасть в вайтлист Google;

  • исправить все ошибки, если таковые возникнут. Вы увидите их в режиме предварительного просмотра (в противном случае пользователи увидят HTML-письмо);

  • добавьте к этому письму запасной вариант — HTML-версию;

  • убедитесь, что ваш ESP/CRM способен отправлять AMP-письма;

  • учитывать, что в настоящее время только Gmail (как веб-приложения, так и мобильные приложения на всех ОС) и Yahoo! Mail способны отображать AMP-письма;

  • AMP-письма теряют свои AMP-компоненты, если вы их пересылаете.

Лучшие примеры каруселей в письмах для вдохновения

Теперь, когда вы поняли, как создавать AMP-карусели в считанные минуты, давайте посмотрим, как популярные компании пользуются этой возможностью. 

Вот 5 лучших примеров каруселей, которые могут наполнить вас творческими идеями:

1. Stripo

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

(Источник: письмо от Stripo)

2. Breguet

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

Пример email-карусели от Breguet

(Источник: письмо от Breguet)

3. MamaGourmand 

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

(Источник: письмо от MamaGourmand)

4. Offset

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

(Источник: письмо от Offset)

5. HP

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

В этом примере карусель сделана с помощью HTML5, но вы можете создать то же самое, используя AMP.

(Источник: письмо от HP)

В завершение

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

Чтобы узнать, как просматривать и экспортировать AMP-письма, прочитайте соответствующие параграфы в нашей статье блога.

Создание писем на базе AMP может быть проще простого, если вы используете конструктор AMP-писем Stripo ;).

Начните создавать красивые письма на базе AMP с помощью Stripo уже сегодня
Была ли статья полезна?
Tell us your thoughts
Спасибо за ваш отзыв!
2 комментариев
Elly Peers 4 года назад
How does this look / functon in other non-AMP compatible email providers? Like older Outlooks for exmaple? Thanks
Анна Кузнецова 4 года назад
Hello, Elly. Thank you for your question. If your ESP or a recipient's email client is not on the list, he or she will see just the traditional HTML version of your email. And AMP element will be just cut off. List of ESPs that currently support AMP: 1. eSputnik — via the API method only. The SMTP method will be added soon; 2. Amazon SES and PinPoint — via the API method only; 3. SparkPost — via the SMTP and API methods; 4. SendGrid — via the API method only; As for email clients, only two do support AMP today: Gmail; Mail.ru. Outlook says they are about to release AMP support this summer. In this blog post, we show how to build and add a fallback in your email to make sure all recipients see your promo emails. Thank you. Hope this helps.
Тип
Индустрия
Сезоны
Интеграции
Редактор Stripo
Упростите процесс создания писем.
Плагин Stripo
Интегрируйте Drag-n-Drop редактор Stripo в свое веб-приложение.
Заказать шаблон
Наша команда может разработать и сверстать его для вас. Просто заполните бриф, и мы свяжемся с вами в ближайшее время.

Редактор Stripo

Для команд специалистов по email-маркетингу и индивидуальных разработчиков писем.

Плагин Stripo

Для продуктов, которые могут эффективно использовать интегрированный white label конструктор писем.