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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Попробуйте Stripo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Gmail desktop — да;

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

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

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

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

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

Инструкции

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

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

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

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

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

(пример от Brighton)

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

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

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

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

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

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

(пример от Hubspot)

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

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

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

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

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

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

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

(пример от GAP)

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

Напоминаем

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

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

В завершение

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

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

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

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