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

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

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

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

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

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

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

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

Прежде чем перейти к руководству, я хочу рассказать о преимуществах создания АМР-писем в 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

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

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

  • готово!

Это важно:

Я добавила 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

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

Напоминаем

Для того, чтоб ваши получатели увидели именно АМР-письмо, нужно:

  • получить от Google разрешение на отправку АМР-контента;
  • в случае возникновения каких-либо ошибок, которые можно обнаужить именно в меню «Предпросмотр», их нужно устранить в коде. Хотя письма, созданные с помощью наших АМР-блоков, не будут содержать ошибоок;
  • включить HTML-версию в письмо. В противном случае, оно может быть совсем не доставлено;
  • убедиться, что ваш ESP/CRM поддерживает отправку АМР-контента;
  • учитывать, что на данный момент только Gmail (веб версия и приложение на мобильном, как на Android, так и на iOS) и Mail.ru (веб версия и приложение на мобильном, как на Android, так и на iOS) поддерживают АМР-контент. Yahoo скоро пополнит этот список;
  • письма теряют АМР-контент при пересылке.

В завершение

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

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

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

Elly Peers 2 года назад

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

Анна Кузнецова прокомментировал 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.

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

Предыдущие статьи Следующие статьи
Greatest Examples of GIF animations in Emails_Cover Image
27 октября 2021 · 10 мин читать
Гиф-анимации в письмах: 16 лучших примеров

Гифки отлично будут смотреться в ваших письмах, если вы хотите продемонстрировать продукт, привлечь внимание пользователей к какому-либо элементу письма или же просто ненавязчиво украсить текст. В этой статье мы представили лучшие примеры гиф-анимаций в рассылках. Примеры GIF в письмах В этой подборке собраны лучшие примеры использования GIF в письмах, где каждая анимация выполняет свою миссию. 1. Adidas (Источник: рассылка от Adidas) Adidas использовал анимацию в письме, чтобы показать, в каком еще цвете доступен данный товар. Выглядит аккуратно и просто, но при этом...

Дизайн Маркетинг
24 сентября 2021 · 18 мин читать
Лучшие шрифты для рассылок: советы и хитрости

Одна из самых серьезных проблем при создании электронных писем — правильно выбрать шрифт. Вес, высота, ширина, цвет, форма, интервал… Все ли здесь имеет значение? Да, важно все, но самое главное — выбрать читабельный шрифт. В этой статье мы расскажем, как выбрать лучший профессиональный шрифт для рассылки. Stripo делает работу со шрифтами писем очень простой Начать Шрифты HTML-писем: основные правила, которые нужно соблюдать При выборе оптимального шрифта следует учитывать три базовых правила: 1. Не используйте более двух шрифтов Если вы используете...

Дизайн Шаблоны
08 апреля 2021 · 17 мин читать
Дизайн подписи в письмах: 14 лучших примеров

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

Дизайн Маркетинг Шаблоны
banner9
11 сентября 2020 · 15 мин читать
10 Лучших Бесплатных Редакторов Шаблонов Писем 2021

Все редакторы писем для вас на одно лицо? Вы не можете определиться, какой же из них выбрать для создания email-рассылок? Это неудивительно, ведь их так много. Мы хотим внимательно рассмотреть популярные редакторы, чтобы найти отличительные черты каждого. Для чистоты эксперимента я буду создавать в них шаблоны, используя один набор медиа файлов. Посмотрим, что из этого получится, и есть ли отличия между редакторами.  Для исследования мы выбрали Stripo, само собой разумеется, и его главных конкурентов: BEE Free, CampaignMonitor, EDM Designer, GetResponse, Mailchimp, MailStyler2,...

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