Дизайн Шаблоны How-to
~ 8 мин читать
2 комментарии
2143 просмотры
оценить
23 июня

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

Stripo / Blog / Как создать AMP-карусель изображений с помощью Stripo

В марте этого года состоялся релиз технологии Google AMP для писем. А со 2 июля он станет доступен даже для пользователей G-Suite и будет включен по умолчанию для всех пользователей Gmail.

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

Это новая эра в email-маркетинге, которая на самом деле влечет за собой большие изменения: ESP-провайдерам теперь придется изменить свои типы протоколов, получателям предстоит узнать, что письма являются лайт-версиями сайтов и почти настолько же функциональны, а мы как email-маркетологи должны овладеть новыми навыками кодирования. Все эти изменения займут много времени.

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

Поэтому мы стремимся автоматизировать создание AMP-писем. 18 июня состоялся релиз нашего drag-and-drop блока “AMP-карусель изображений”.

Building-AMP-carousel-with-Stripo_Simple-Carousel

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

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

  1. Вам не нужно добавлять какие-либо элементы кода AMPHTML в шапку письма;
  2. Навыки программирования не потребуются – вы используете уже готовый элемент;
  3. Экономия времени – вы просто вставляете ссылки на ваши изображения в этот контент-модуль;
  4. Для каждого изображения в AMP-карусели, которую вы создаете вместе с нами, вы можете добавить ссылки и кнопки, которые будут перенаправлять читателей на соответствующие страницы вашего сайта.

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

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

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

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

Building-AMP-carousel_Dragging-AMP-carousel-into-template_Stripo_RU

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

AMPHTML-odule-in-Email

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

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

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

Toggling-Preview-Button-and-Setting-Preview-Width_RU

Adding-Images-to-Slides_AMP-Carousel-with-Stripo_RU

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

Add-Slide-Button_Building-AMP-Carousel-with-Stripo_RU

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

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

  • готово!

Dragging-Image-AMP-carousel

Это важно:

Я добавила 16 слайдов, и все они довольно хорошо работали в Gmail на нескольких устройствах.

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

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

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

Нам нужно создать резервный вариант для других.

Здесь есть два типа запасного варианта:

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

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

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

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

  • в Stripo перетащите блок HTML в свой шаблон;

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

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

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

The-Close-the-Code-Editor-Button_Building-AMP-Emails-with-Stripo_RU

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

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

The-Include-in-HTML-Button_Building-AMP-Emails_RU

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

Это важно:

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

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

Тип 2. Статические карточки товара

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

  • добавьте в первую колонку блок изображения;

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

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

  • оформите этот текст соответствующим шрифтом;

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

Product-Content-Modules_Building-AMP-Emails

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

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

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

Если вы выберете опцию “Включать в AMPHTML” (⚡HTML), то элемент будет показан во всех клиентах, которые поддерживают MIME-type AMPHTML (text-x-amphtml).

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

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

А если вам нужна комплексная карусель с более информативными картинками и кнопками на них? Вы тоже можете сделать это у нас, так как наш редактор позволяет добавлять текст поверх изображений и применять разные фильтры ;)

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

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

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

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

Buildng-AMP-Emails-with-Stripo-Editing-Images_RU

  • на панели настроек фоторедактора выберите опцию A+ТЕКСТ, чтобы добавить текст поверх изображения. Редактор предлагает около 1000 шрифтов;

Embedded-Photo-Editor_Stripo_RU

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

  • в правом верхнем углу редактора нажмите кнопку “Объединить” для сохранения этих параметров.

б) добавление “кнопки” CTA поверх изображений

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

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

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

Adding-CTA-Button-as-an-Image_Stripo_RU

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

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

  • установите размеры;

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

The-Save-Button_Working-with-the-Editor_RU

Итак, вот что у нас с вами получилось:

Building-AMP-carousel-with-Stripo-Images-with-Button

Какие почтовики поддерживают AMP на текущий момент:

  • Gmail desktop – уже;

  • Mail.ru – уже;

  • Yahoo, AOL и Outlook — ожидаем в ближайшее время.

В завершение

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

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

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

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

Зарегистрироватья в Stripo

Elly Peers 2 месяца назад

How does this look / functon in other non-AMP compatible email providers? Like older Outlooks for exmaple? Thanks

Hanna Kuznietsova прокомментировал Elly Peers 2 месяца назад

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.

Вас также может заинтересовать

← Предыдущие статьи Следующие статьи →
27 августа
Емейл-кампании к Черной Пятнице и Киберпонедельнику

В этом году Черная пятница, а вместе с ней и начало грандиозных распродаж в сотнях магазинов выпадают на 23 ноября. Это значит, что приближается пора, когда каждый маркетолог мечтает побить прошлогодний рекорд по продажам, а его клиент — ухватить товары по невероятным скидкам. И, чем ближе к ноябрю,  тем сложнее и интереснее становится охота на покупателей в сезон Черной пятницы, Дня благодарения, Киберпонедельника и предрождественских распродаж. 9 советов для подготовки к Черной Пятнице и Киберпонедельнику Не стоит бояться, ведь благодаря...

Дизайн Маркетинг Шаблоны How-to
HR Email Templates_How to Create Beautiful Templates_Featured Image_Stripo
13 августа
Шаблоны писем для HR-менеджеров: как сделать привлекательную рассылку

Итак, вы менеджер по персоналу в поисках подходящего шаблона, чтобы сэкономить время? Как говорят в Одессе, их есть у нас. А еще есть полезные советы по дизайну и контенту электронных писем. Что бы вы ни делали – приветствуете нового сотрудника, сообщаете команде какие-то новости… - вы тратите много времени, если создаете письмо с нуля. Stripo предлагает несколько готовых шаблонов специально для HR, с которыми вы существенно сэкономите время. Общайтесь с сотрудниками проще и намного быстрее. Редактируйте контент наших шаблонов и...

Структура Шаблоны How-to
Будьте всегда в курсе последних новостей в области email маркетинга!