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

Пользовательские данные

Email

Омниканальность

Автоматизация

Отслеживание событий и поведения

Создание AMP-аккордеона

Аккордеон - это блок, который позволяет открывать/ скрывать часть содержимого при клике на этот блок. Такой подход даёт возможность экономить место и не отвлекать клиента информацией, которая, возможно, ему не нужна. Такой эффект можно встретить на сайтах, а теперь ещё и использовать в email-рассылках.

Пример аккордеона в письме

Важно!

Чтобы при отправке рассылки AMP-аккордеон отображался у получателей - подайте заявку на подтверждение отправителя.

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

Подготовьте предварительно письмо, в которое хотите добавить этот блок.

  1. Зайдите в редакторе во вкладку «Контент»‎ → «Блоки»‎.

Создание письма с AMP-аккордеоном

  1. Найдите блок «Аккордеон»‎

Блок Аккордеона

  1. Перетащите его в пустую или заранее оформленную Структуру в письме.

Добавление блока в письмо

Настройка блока аккордеон

Теперь переходим непосредственно к настройкам, которые открываются, когда вы кликните на выбранный блок.

Настройки блока Аккордеон

  1. Автосворачивание секций.

Автосворачивание секций

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

Открытие аккордеона в письме

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

Автоматическое скрытие аккордеона в письме

  1. Чтобы переходы при клике по вкладкам аккордеона открывались плавно, по умолчанию включена «Анимация разворачивания». При необходимости можете его отключить, перетащив ползунок влево.

«Анимация разворачивания»

  1. Далее идут настройки, которые касаются общего оформления секций.

    Настройки оформления секций аккордеона

Здесь вы можете установить:

  • Цвет фона. Можно выбрать один из стандартных или указать свой HEX-код.

Цвет названия структуры

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

Создание контуров для блоков

  • Цвет текста секций. По умолчанию указан HEX-код #659c35, но вы легко его сможете изменить, выбрав один из стандартных или прописать свой.

Цвет текста секции

  • Размер шрифта для названия секции.

Размер шрифтов секций

  1. Чтобы у вас было несколько секций в аккордеоне - нажмите кнопку «Добавить секцию».

Добавление новой секции

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

Название секций

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

Сворачивание секций

Далее можете возвращаться к этому блоку в письме и заполнять разделы своим контентом.

Заполнение блоков контентом

Это может быть что угодно:

Важно: 

1. Аккордеон будет отображаться только для тех почтовых клиентов, которые поддерживают технологию AMP:

  • Gmail на десктопе,
  • Mail.ru на десктопе,
  • Yahoo и AOL планируют, но ещё не поддерживают,
  • Gmail на Android и iOS.

2. Аккордеон будет отображаться только если вы подавали заявку и стали доверенным отправителем у Google, Mail.ru и Outlook.

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

Альтернативный блок HTML

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

Чтобы проверить как выглядит ваше письмо с обеими версиями, нажмите кнопку «Предварительный просмотр» в верхней панели. 

Предпросмотр писем
 

По умолчанию откроется версия «AMPHTML», все действия в письме можно будет выполнять и на предпросмотре.

AMPHTML

Также переключитесь в верхнем меню на HTML-версию, чтобы проверить альтернативный вариант письма.

Письмо с HTML

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

Проверка ошибок в AMP

Чтобы проверить корректность кода письма, нажмите в редакторе сообщений на предпросмотр письма

Редактор сообщений eSputnik

В открывшемся окне вы можете навести курсор на ошибки, чтобы увидеть их описание. Найденные ошибки можно исправить прямо в редакторе, либо скопировать код письма для валидации в Google Playground.
Доступны 3 опции:

  • Открыть редактор кода,
  • Копировать AMP HTML в буфер обмена,
  • Открыть AMP Playground.

Предпросмотр письма на наличие ошибок в AMP

Читайте также "Как подать заявку для добавление в белый список отправителей AMP"

Остались вопросы?
Специалисты обязательно ответят и помогут решить вашу проблему!
Обратный звонок
Оставьте заявку – и наш специалист свяжется с вами в рабочее время.
Отправить заявку
Консультация в чате
Готовы к вашим вопросам!
Написать в чат
Электронная почта
Напишите в службу поддержки eSputnik.
Отправить email