How to Build AMP Accordion_Cover Image_Stripo
21 сентября 2019

Как создать AMP-аккордеон в Stripo без знаний HTML

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

Создание AMP-аккордеона еще никогда не было настолько простым.

Я с гордостью сообщаю, что 18 сентября мы выпустили совершенно новую функцию: Drag-n-Drop блок AMP-аккордеона.

Навыки программирования не понадобятся. Не нужно добавлять какие-либо скрипты в код письма. Stripo все сделает за вас!!

Как создать AMP-аккордеон в Stripo

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

Понадобится всего несколько простых шагов:

  • перетащите блок AMP-аккордеона в свой шаблон;

Building-AMP-Accordion_AMP-Accordion-Block

  • опция «Анимация разворачивания» включена по умолчанию. Она активирует параметр «Переход», который позволяет вашим секциям открываться и закрываться плавно. Если это не нужно, вы всегда можете выключить опцию, переключив кнопку;

AMP-Accordion_Toggling-Animated-Expansion-Button

  • теперь вам нужно поработать над дизайном аккордеона. Установите цвет фона, ширину и цвет контура, цвет текста секции и размер шрифта. Пожалуйста, не забывайте, что сейчас вы работаете над дизайном аккордеонных секций. Другими словами, это то, что увидят клиенты, когда аккордеон свернут;

AMP-Accordion_Working-on-Accordion-Design

  • добавьте столько секций, сколько вам нужно;

Adding-Sections-to-Accordion RU

  • дайте всем секциям имена. Вы можете ввести до 200 символов. Если вы добавите больше, письмо увеличится в ширину. Но даже 200 символов — как-то многовато, это более 4 строк;

  • теперь включите «Автосворачивание секций», чтобы активировать эту опцию. Она позволяет показывать одну секцию за раз. Когда вы открываете любую другую секцию, то открытая ранее закрывается;

AMP-Accordion_Toggling-Auto-Collapsing-Function RU

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

AMP-Accordion_Expanded-Sections RU

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

  • отредактируйте контент так, как вы обычно это делаете при создании писем в Stripo.

Попробуйте Stripo

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

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

Как создать резервный вариант с помощью Stripo:

Вы делаете всё так, как при создании обычного шаблона в Stripo. Но когда закончите, вам понадобится активировать всю структуру резервного варианта, и на панели настроек нажмите кнопку «Включать в HTML».

The-Include-in-HTML-Button_Building-AMP-Emails

После этого структура будет помечена как HTML, а структура с AMP-аккордеоном соответственно как ⚡HTML:

Stripo-How-to-Build-AMP-Emails-with-StripoShowing-andHiding-Elements-for-Emails

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

Предварительный просмотр вашего AMP-аккордеона

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

  • нажмите кнопку «Просмотреть» над шаблоном;

How-to-Build-Email-with-Stripo-Previewing-Your-Email RU

  • выберите версию AMP HTML;

  • попробуйте взаимодействовать с вашим AMP-аккордеоном.

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

Отсутствующую ссылку тоже можно считать багом.

Stripo поможет вам в этом: на этапе предварительного просмотра наш редактор показывает, есть ли в вашем AMP-письме какие-то ошибки.

Mistakes-in-AMP-Version-of-Your-Emails

Если они есть — в нашем примере аж три — то нажмите красную кнопку, чтобы увидеть, что нужно исправить. Мне пришлось добавить ссылки для лого и вкладок меню.

Если вы создали свое AMP-письмо с помощью нашего Drag-n-Drop блока AMP-аккордеона, не вводили никаких внешних сценариев в код письма и добавили все необходимые ссылки даже для иконок соцсетей, то ваше AMP-письмо будет корректно отображаться во всей почтовиках.

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

Какие почтовики поддерживают AMP

  • Gmail desktop — да;

  • Yahoo и AOL — поддержка будет в ближайшее время;

  • Gmail на Android и iOS — ожидается этой осенью.

Обратите внимание, что для отправки AMP-писем вам необходимо попасть в белый список как доверенный отправитель Google.

Распространенные способы использования AMP-аккордеонов и резервных вариантов

Конечно, есть много способов использования аккордеона в письмах, но мы рассмотрим только наиболее распространенные.

Инструкции

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

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

Building-AMP-Accordion-with-Stripo_Step-by-Step-Guide

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

Резервный вариант

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

Accordion-for-Manuals

(пример от Brighton)

Дайджест-рассылки

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

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

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

Monthly-Investor's-Update

Резервный вариант

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

AMP-Accordion_Example-of-Email-Digest-by-Hubspot.

(пример от Hubspot)

Как вариант вы можете использовать в дайджестах ссылки-анкоры.

Помните, что со Stripo вы можете легко добавлять в письма анкорные ссылки.

Категории товаров

Большинство интернет-магазинов продвигает не один продукт, а целую серию. Тем не менее клиенты могут не интересоваться всем вашим ассортиментом — они хотят посмотреть определенные категории.

Аккордеон хорошо работает, если вам нужно продвигать более 10 позиций одновременно.

AMP-Accordion-for-Categories

Резервный вариант

Здесь в качестве запасного варианта вы можете добавить несколько карточек товаров. Обязательно разместите их по несколько штук в ряд.

Fallback-to-Accordion-with-Product-Snippets

(пример от GAP)

Это также может быть обычное меню со ссылками, которые направляют получателей на ваш сайт.

Напоминаем

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

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

В завершение

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

Чтобы быть уверенными, что получатели увидят ваши AMP-письма, убедитесь в следующем:

  1. в вашем AMP-коде нет багов — Stripo проверит, есть ли ошибки в письме, и даже подскажет, как их исправить;
  2. у вас должны быть резервные варианты для клиентов, чьи почтовики еще не поддерживают AMP4Emails;
  3. вы зарегистрированы как отправитель в топовых почтовиках.

Подробности о создании, тестировании и экспорте AMP-писем вы найдете в статье «Как создать AMP-письма с помощью Stripo» нашего блога.

Была ли статья полезна?
Tell us your thoughts
Спасибо за ваш отзыв!
0 комментариев
Тип
Индустрия
Сезоны
Интеграции
Редактор Stripo
Упростите процесс создания писем.
Плагин Stripo
Интегрируйте Drag-n-Drop редактор Stripo в свое веб-приложение.
Заказать шаблон
Наша команда может разработать и сверстать его для вас. Просто заполните бриф, и мы свяжемся с вами в ближайшее время.