Как добавить интерактив в html email

Рассылай и властвуй: инструменты для создания и тестирования рассылки

Верстать электронные письма — это боль. Верстать и тестировать адаптивные письма с интерактивом (например, с формами и слайдерами) — боль в квадрате. Однако, не всё не так плохо, если выбрать правильные инструменты. В статье расскажу об email-фреймворках — MJML и Foundation for Emails — и моих любимых ресурсах для тестирования рассылки — Litmus и Email On Acid.

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

Допустим, вы хотите сверстать рассылку

Первый вариант: создать новый HTML-документ, взять готовый бойлерплейт (например, популярные Cerberus или Responsive Email Framework) и засесть писать таблицы с инлайн-стилями, гугля в процессе недостающие хаки или фиксы для внезапно поехавшей в каком-нибудь Gmail для Android вёрстке. Этот вариант подойдет, если у вас за плечами есть определённый опыт в вёрстке писем, достаточно свободного времени, а задача — это вёрстка единичного и простого письма.

Пример шаблона письма, который «из коробки» доступен в Cerberus

Второй вариант: воспользоваться онлайн-редактором для создания шаблона (например, Mosaico или Stripo). Это — самый простой способ. Он отлично подойдет, если вы — не разработчик или же если сталкиваетесь с вёрсткой рассылки впервые и макет письма достаточно простой. Почти все онлайн-редакторы предоставляют готовые шаблоны, а также включают в исходный код шаблона хаки для корректной работы письма в популярных email-клиентах. Но эти инструменты практически не позволяют вам кастомизировать вёрстку письма под ваш конкретный макет и в целом дают очень слабый контроль как кода, так и внешнего вида письма.

Изменения шаблона письма в конструкторе писем Stripo

Третий вариант: использовать email-фреймворк. Если вам регулярно приходится верстать рассылку, если макеты писем сложные, а требования к ним строгие, и если вы хотите автоматизировать свой воркфлоу и частично процесс разработки письма, то этот вариант для вас. Я расскажу о двух самых мощных инструментах: MJML и Foundation for Emails (в молодости известном как Ink).

Используем готовый email-фреймворк. MJML

• Github:mjmlio/mjml
• Разработчик: Mailjet
• Дата выхода: 2016
• Лицензия: MIT
• Популярность: 7662+ звёздочек
• Шаблонизатор: MJML

Главные идеи, заложенные во фреймворк:

1. responsive-шаблоны «из коробки»,
2. упрощение работы с кодом посредством собственного шаблонизатора,
3. набор готовых к использованию внутри письма компонентов,
4. удобная интеграция в процесс разработки рассылки.

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

MJML предоставляет плагины для популярных текстовых редакторов — Visual Studio Code, Atom и Sublime Text. Они добавляют подсветку синтаксиса языка, линтер и вкладку с превью верстаемого письма прямо в самом редакторе.

Если вам не хочется заморачиваться с cli или текстовыми редакторами, то есть отдельное официальное мультиплатформенное десктопное приложение, со встроенным полноценным редактором кода, просмотрщиком готовых шаблонов для писем и live-preview вашего письма.

Помимо набора стандартных компонентов (таких как кнопка или карусель) существуют готовые кастомные компоненты (например, компонент для рисования графиков). На странице с дополнениями от сообщества можно найти полезные утилиты, например загрузчик MJML для WebPack или инструмент интеграции в MJML-приложение на Laravel. А не так давно в статусе беты появилась возможность использовать API MJML для генерации писем напрямую, например, внутри мобильного приложения. Вещь довольно специфическая, но своего пользователя наверняка найдёт.

Главным минусом фреймворка одновременно является один из его плюсов: «отзывчивость». Фреймворк автоматически и без вмешательства разработчика берёт на себя то, как шаблон письма будет вести себя на девайсах с небольшой шириной размера экрана. Это выливается в ограничение в четыре колонки в сетке и отсутствие возможностей подтюнить responsive-поведение макета под свои нужды.

Небольшая, но приятная деталь: на сайте в разделе с документацией есть раздел с СanIUse-подобным описанием поддерживаемости компонентов MJML в различных имейл-клиентах. Можно сразу проверить на сайте и не гадать, как поведёт себя письмо, например, в Outlook 2007.

Итог: MJML — очень мощный и простой в освоении инструмент для создания responsive-писем. Сложности могут возникнуть, только если вам нужна очень тонкая, pixel perfect настройка шаблонов.

Используем готовый имейл-фреймворк. Foundation for Emails

• Github:zurb/foundation-emails
• Разработчик: ZURB
• Дата выхода: 2015
• Лицензия: MIT
• Популярность: 6885+ звёздочек
• Шаблонизатор: Inky

Если вы не первый год в мире фронтенда, то наверняка слышали (но — готов поспорить — вряд ли исползовали ;)) о Foundation for Sites. Этот фреймворк, созданный разработчиками из компании ZURB, давно закрепил за собой статус второго место по популярности (после Bootstrap) среди фронтендных веб-фреймворков.

Foundation for Emails сделан теми же людьми и по сути является частью Foundation for Sites. Это дает ему как ряд преимуществ (крупная компания-разработчик, довольно большое комьюнити, все, что вам нравилось в Foundation for Sites), так и накладывает ряд ограничений (все, что вам не нравилось в Foundation for Sites, не понравится и в Foundation for Emails).

Первое, что нужно сделать, если вы решите попробовать фреймворк, это установить Foundation CLI:

npm install —global foundation-cli

После чего можно создать новый проект командой:

foundation new —framework emails

и приступать к разработке письма.

Правда, придётся подождать несколько минут, пока загрузятся все необходимые модули и компоненты. Так как скачивается большое количество файлов, не удивляйтесь размеру папки — пустой проект будет весить 400+ мб. Помимо cli, «из коробки» доступен Live Reload, базовый бойлерплейт со всеми необходимыми хаками, готовые шаблоны и партиалы, а также поддержка SASS.

Файловая структура проекта на Foundation for Emails

У FfE свой шаблонизатор — Inky. По свой сути он делает то же, что и шаблонизатор MJML — упрощает работу со сложными вложенными таблицами с помощью shorthand-тегов:

  Column One Column Two   

Всего тегов около десяти, три их них используются для создания сетки (см. пример выше), тег block-grid — для создания блочной сетки, еще два тега — меню (menu и item), а названия еще двух говорят сами за себя: button и callout.

FfE использует 12-колоночную сетку, которая может быть упрощена до 2-х, 3-х, 4-х или 6-ти колоночной, а также позволяет задавать количество колонок отдельно для мобильного и десктопного состояний.

Система партиалов (partials) и хелперов реализована с помощью файлового компилятора Panini, который внутри себя использует простой и удобный движок шаблонизатора Handlebars.

В отличие от MJML, при использовании FfE создаётся две версии письма — одна для десктопных клиентов и одна для мобильных. Далее вы решаете на каком брейкпоинте нужно выполнить переключение состояний desktop/mobile, а также можете включить или выключить какие-либо блоки вашей верстки с помощью специальных классов: .hide-for-large и .show-for-large.

Итог: Foundation for Emails предоставляет полный контроль за вёрсткой письма как для его десктопного, так и мобильного её состояния. Сложности могут возникнуть в процессе погружения в фреймворк и при попытке разобраться с его тонкостями, так как он достаточно большой и сложный. Но если вы хотите контролировать каждый аспект вашего шаблона — ваш выбор Foundation for Emails.

Инструменты для тестирования рассылки

Итак, наша рассылка готова. В браузере она выглядит отлично. А как насчет Outlook и мобильных email-клиентов? Самое время обратиться к специализированным сервисам для тестирования рассылки: Litmus и Email on Acid.

Тестируем рассылку с Litmus

Litmus предоставляет полный набор инструментов, которые могут понадобиться при тестировании рассылки. Это и веб-ide для редактирования html-кода (Builder), и система аналитики рассылки, и набор «чеклистов» — инструментов тестирования производительности, проверки письма на «спамность» и многое другое.

Самый важный «чеклист» — Email Preview — дает возможность проверить письмо в 90+ десктопных/мобильных/веб email-клиентах. Делается это парой кликов. Нужно вставить код письма в Builder, нажать на кнопку тестирования и выбрать нужные email-клиенты.

Недавно разработчики добавили крутую фичу: инспектор обработанного email-клиентом html-кода (processed html). Он немного напоминает инспектор из dev-tools вашего любимого браузера: можно выделить определенную область письма и посмотреть её код. Это очень помогает разбирать клиентоспецифичные проблемы не прибегая к правкам в слепую с последующим просмотром результата в Email Preview.

Просмотр Processed HTML в Litmus

У Litmus я нашел два минуса. Первый — это неотзывчивость UI в целом и лаги Email Preview, которые происходят время от времени и заставляют тратить достаточно много времени на ожидание создания превью и повторно запускать тесты.

Второй минус: цена. Самый минимальный вариант подписки обойдётся вам в 80$/месяц. Причем выбранный план напрямую влияет на количество предпросмотров писем, которое будет доступно. Так что советую хорошенько подумать действительно ли вам нужен Litmus или вы сможете обойтись более дешевой альтернативой.

Тестируем рассылку с Email On Acid

Второй сервис, о котором я хотел бы рассказать, это Email On Acid. Его можно смело назвать «младшим братом» Litmus практически по всем аспектам.

Судите сами: web-ide для редактирования рассылки — есть, инструменты для аналитики письма — есть, тестирование на «спамность» — есть, и — конечно же — Email Testing в 70+ приложениях тоже есть.

Превью писем сделано практически так же, как в Litmus. Отличия в основном во внешнем виде, опций/настроек чуть поменьше, нет инспектора обработанного кода письма и некоторых других менее полезных инструментов. Но UI EoA удобнее и легче, чем у Litmus и работает практически без лагов. Тестирование писем происходит примерно раза в полтора быстрее.

Последний немаловажный фактор: цена. Email on Acid в два раза дешевле Litmus при очень схожем функционале. И нет никаких ограничений на количество превью вашего письма. Это несомненный вин EoA.

Что выбрать?

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

Если же рассылками вы занимаетесь эпизодически, то есть два альтернативных варианта:

1. использовать триал Litmus/Email on Acid на 7/14 дней (в зависимости от сервиса) — деньги за первый месяц вернутся вам на карту;
2. воспользоваться комбинацией менее популярных сервисов, у которых есть бесплатные планы, а в части email-клиентов протестировать вручную.

Вот какие сервисы можно хоть и ограниченно, но использовать бесплатно:

1. PreviewMyEmail (Gmail для Chrome/FF/IE, Thunderbird, Apple Mail для iOS7);
2. InboxInspector (Thunderbird 2/3, Outlook 2003/2007/2010/Outlook Express);
3. DirectMail (Outlook 2003, Gmail в IE);
4. Putsmail + PilotMailer (онлайн-сервисы для отправки кода письма на любые адреса, удобно использовать для ручного тестирования рассылки);

Что бы вы не выбрали в конечном счете, главное, чтобы инструмент соответствовал вашим потребностям.

Заключение

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

Если вы верстаете письма редко и они в целом несложные — смело берите базовый бойлерплейт, верстайте и тестируйте «вручную». Как вариант, воспользуйтесь бесплатными сервисами для тестирования.

Если же с вёрсткой писем приходится сталкивать на регулярной основе, а макеты попадаются сложные и адаптивные, то MJML и Foundation for Email возьмут часть забот на себя. А Limus и Email on Acid сэкономят массу времени и нервных клеток в попытке победить какой-нибудь надоедливый Outlook или Gmail на Android.

А какой путь выбираете вы? Делитесь в комментариях.

Email-шаблоны для тематики «Интерактивные письма»

Не знаете, как создать элегантный шаблон интерактивного письма? Используйте наш! Выберите шаблон, настройте его в соответствии с вашими пожеланиями менее чем за 10 минут и радуйте клиентов самой современной рассылкой.

Пустой шаблон

В одной из наших статей о трендах мы говорили, что интерактивные емейлы — один из основных трендов сегодня. Но как их создать?

Способы создания интерактивных емейлов

Их можно делать двумя способами: просто выбрать любой из наших интерактивных шаблонов, которые мы тщательно разработали для вас с учетом всех ваших целей и потребностей – или создать свой собственный.

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

Инструменты для создания интерактивных элементов

В интернете есть множество инструментов, которые помогут вам создать такие элементы, конечно, если в вашей компании нет разработчика, который сможет сделать это для вас. После создания такого элемента достаточно просто вставить код встраивания в наш интерактивный HTML-шаблон. После чего протестировать емейл. Нет, не с помощью Litmus, а в различных емейл-клиентах и на разных мобильных устройствах!

Совместимость интерактивных элементов с емейл-клиентами

Если честно, при тестировании наших емейл-шаблонов из раздела “Интерактивные письма”, а также некоторых недавно созданных и еще не опубликованных ни один из интерактивных элементов не прошел через фильтры Gmail – все элементы превратились в статичные. Но Apple Mail и Outlook 2011 отобразили сообщения правильно.

К счастью, Gmail начал поддержку AMP (интерактивный и динамический контент) в письмах в 2019 году.

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

Дизайн

Поскольку это новая функция, никаких исследований по теме интерактивного емейл-дизайна пока не проводилось.

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

Примеры интерактивных емейлов

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

Наши бесплатные интерактивные шаблоны помогут вам выделиться среди миллионов маркетологов всего мира.

Поэтому будьте достаточно смелыми, чтобы использовать инновации!

Как добавить анимации и интерактивные элементы на сайт

Узнайте, как сделать ваш сайт более привлекательным и интересным с помощью анимаций и интерактивных элементов!

Алексей Кодов
Автор статьи
1 июня 2023 в 8:31

Анимации и интерактивные элементы могут сделать ваш сайт более привлекательным и интересным для пользователей. В этой статье мы поговорим о различных способах добавления анимаций и интерактивности на ваш веб-сайт.

CSS анимации

CSS анимации — это простой и эффективный способ добавления анимации на ваш сайт. Они позволяют создать плавные переходы между различными состояниями элемента, используя ключевые кадры и тайминг-функции.

Пример анимации с использованием CSS:

@keyframes fadeIn < 0% < opacity: 0; >100% < opacity: 1; >> .element

В данном примере, элемент с классом .element будет плавно появляться на протяжении двух секунд с использованием анимации fadeIn .

Python-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

JavaScript и библиотеки анимации

Если вам требуется более сложная анимация или интерактивность, вы можете использовать JavaScript и различные библиотеки анимации. Один из популярных вариантов — библиотека GSAP (GreenSock Animation Platform).

Пример анимации с использованием GSAP:

gsap.from(".element", < duration: 2, opacity: 0, ease: "power1.out", >);

В данном примере, элемент с классом .element также будет плавно появляться на протяжении двух секунд с использованием анимации GSAP.

Взаимодействие с пользователем

Интерактивные элементы включают события, срабатывающие при взаимодействии пользователя с вашим сайтом. Это может быть нажатие кнопки, наведение курсора на элемент или скроллинг страницы. Использование JavaScript и библиотек, таких как jQuery или Vue.js, позволяет реализовать интерактивность на вашем сайте.

Пример интерактивного элемента с использованием jQuery:

$(".button").on("click", function () < $(".element").toggleClass("active"); >);

В данном примере, при нажатии на элемент с классом .button , элемент с классом .element получит или потеряет класс active .

�� Помимо CSS анимаций и JavaScript, вы также можете использовать технологии, такие как SVG анимации или WebGL для создания более сложных и продвинутых эффектов.

Если вы хотите углубить свои знания в веб-разработке и научиться создавать анимации и интерактивные элементы, рекомендуем обратить внимание на школу веб-разработки с качественным обучением.

Python-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

Теперь вы знаете основные методы добавления анимаций и интерактивных элементов на ваш сайт. Удачи вам в изучении веб-разработки и создании захватывающих интерактивных проектов! ��

AMP-технология в email: что это и как работает, основные преимущества и недостатки

Интерактивные динамические элементы повышают вовлеченность аудитории и побуждают к покупке. Именно поэтому маркетологи рекомендуют внедрять их в рассылки интернет-магазинов. На практике доказано, что AMP-письма способны увеличить конверсию более, чем на 500%. Что это за технология, как ее использовать в email и с какими сложностями придется столкнуться – подробно разбираем в статье.

Что такое AMP и зачем ее используют в емейл-рассылках

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

Подобный месседж выглядит как автономная веб-страница. Пользователь может совершить на ней разные целевые действия, не переходя для этого в отдельные вкладки:

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

Пример AMP-письма с товарной каруселью

На данный момент технологию поддерживают Gmail, Mail.ru и Yahoo Mail. Также инструмент применяется во внутренних переписках на крупных онлайн-платформах (Pinterest, Booking). Если компания отправляет рассылку через провайдера без поддержки технологии, письма в любом случае будут доставлены адресатам, но в стандартном формате.

В целом, технология может разнообразить маркетинговые емейл-рассылки магазина и существенно повысить их эффективность. Она дает предпринимателям множество преимуществ:

1. Расширение границ возможностей рассылок. AMP-элементы делают письма динамичными, предусматривают прямой контакт с контентом, мотивируют подписчиков к действию здесь и сейчас.
2. Улучшение результативности email-маркетинга. За счет вовлекающих механик увеличиваются лояльность аудитории и конверсия в целевое действие. Интерактив срабатывает гораздо лучше стандартного статичного письма.
3. Соответствие ожиданиям рынка и ЦА. Динамичный контент улучшает пользовательский опыт. Подписчики принимают решение и выполняют действие в пределах одной страницы. Это экономит время, что очень важно в условиях современного рынка e-commerce.
4. Эффективная персонализация. С помощью AMP-писем владелец бизнеса может извлечь много ценных данных. Эти данные помогают качественно персонализировать рассылку. Индивидуальный подход работает на конверсию.
5. Актуальность рассылки. AMP-письма могут оставаться актуальными на момент открытия. При необходимости их содержание обновляется, после чего подписчик сразу же видит изменения.
6. Низкий уровень конкуренции. Пока инновационную технологию не используют массово. Это отличный способ выделиться на фоне конкурентов и запомниться целевой аудитории.

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

Способы и формы применения технологии в письмах

Каждый почтовый сервис, поддерживающий технологию, предлагает определенный набор AMP-элементов для добавления в емейлы.

Основные варианты:

• карусель. Простой распространенный блок, который исключает необходимость длительного скроллинга;
• аккордеон. Позволяет сворачивать и разворачивать информацию во вкладках (с описанием продукции, акций);
• селектор. Предусматривает выбор нужных параметров товара;
• геймификация. Отличный инструмент для реализации захватывающих интерактивных игр;
• формы. Используются для сбора контактных данных и обратной связи (отзывы, комментарии и прочее);
• рейтинги, NPS. Способ узнать уровень удовлетворенности клиента, как продуктом, так и самой компанией;
• назначение встреч. В таких письмах предлагается выбрать удобное время для встречи, мероприятия, брони.

Давайте посмотрим, как можно применять все эти элементы на практике:

Встраивать в письма AMP-формы, чтобы получать больше отзывов

По сравнению со стандартными внешними формами интерактивные собирают информацию в 5 раз эффективнее. Благодаря им подписчики оставляют свои комментарии и отзывы прямо в письме.

Данные, полученные в процессе, поступают на серверы почтового сервиса или могут перенаправляться в любое внешнее хранилище.

Предлагать оценить компанию или продукт в NPS-опросе

Письма с интерактивными NPS-формами можно отправлять спустя несколько дней после покупки товара. В рамках таких опросов компания спрашивает у подписчиков, понравился ли им сервис, довольны ли они качеством продукта.

Если возможность поставить оценку есть прямо в письме, вероятность получения ответа увеличивается в 8 раз. Когда нужно совершать дополнительные действия, реагируют немногие.

Проводить опросы или викторины

В опросах удобно спрашивать мнение клиентов о том:

• как улучшить сервис;
• что добавить в ассортимент;
• каких функций не хватает на сайте и прочее.

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

Викторина – скорее развлекательный формат. В ней компании задают подписчикам разные вопросы с вариантами ответов. Тем, кто ни разу не ошибся, дарят приз.

По тому же принципу устраивают голосования:

Обмениваться свежими данными в режиме реального времени

Обмен данными в режиме real-time – особенно полезная опция AMP. Это значит, что магазин может обновлять контент в письме уже после его отправки. Такая возможность пригодится на случай, если подписчик откроет рассылку, когда текущее предложение станет неактуальным.

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

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

Устроить развлекательную игру

Есть много форматов игр, которые реализовывают посредством AMP. Тут нужно ориентироваться на специфику деятельности компании и особенности целевой аудитории.

Например, сделать колесо фортуны с возможностью выиграть скидки разных размеров: 3, 5, 10, 15%. Или предложить найти бонус, спрятанный на интерактивной картинке. Или собрать пазл, чтобы получить промокод.

Пазл для «добывания» промокода в рассылке

Еще варианты:

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

Вариант игры в интерактивном электронном письме

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

Вставлять товарную карусель

Галерея изображений применяется для того, чтобы:

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

Карусель изображений в письме, на которых показаны действующие акции

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

Дать возможность выбора товара

Выбор в email-письме дается с помощью селектора. В специальном блоке подписчик сможет выбрать нужный товар по определенным параметрам:

• цветовой гамме;
• размерам;
• комплектации;
• дополнительным характеристикам.

После этого можно сразу перейти к оформлению покупки. Такой прием значительно повышает эффективность промо-рассылок. Его используют для работы с брошенными корзинами.

Назначать встречи

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

Обычно сначала нужно указать дату, потом отметить нужный временной блок и подтвердить запись:

Структурировать контент

Для этого используется аккордеон. Он помогает не перегружать клиентов лишней информацией и экономит место в рассылке.

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

Персонализировать предложение

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

Варианты персонализации:

1. Провести опросы относительно предпочтений клиента и на основании полученной информации отправлять персонализированные письма.
2. Предложить подписчику выбрать то, что ему по душе, прямо в письме. К примеру, так клиент может собрать индивидуальный образ, кликая по понравившимся моделям из каталога.
3. Подключить динамическую смену подборок товара в зависимости от каждого последующего выбора. Например, пользователь выбрал категорию «Одежда», значит к ней автоматически подтянутся ее подразделы.

Недостатки технологии и как с ними бороться

Наибольшая сложность, с которой сталкиваются при желании подключить AMP-компоненты к емейл-рассылкам – ограниченное количество провайдеров, поддерживающих интерактивные блоки. Выбор невелик: Gmail, Mail.ru или Yahoo Mail. Это связано с дорогостоящей поддержкой технологии, необходимостью работы с новым языком разметки.

Чтобы письмо корректно отображалось у всех получателей, делайте запасную версию в HTML. Независимо от того, с каким сервисом работаете.

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

Еще одна сложность – не совсем понятный механизм измерения результатов. Здесь все зависит от функционала сервиса для рассылок. В некоторых сервисах нужно проставлять отслеживающие пиксели в верстке. Они будут фиксировать действия подписчика в письме.

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

Чтобы точнее понимать общую картину и увидеть пути улучшения AMP-рассылки, проводите предварительные A/B тестирования. Настроить интерактивные письма можно в eSputnik, SendPulse, Stripo.

Последняя распространенная проблема – довольные сложные настройки интерактивных рассылок. Для добавления в код письма компонентов Javascript понадобятся базовые знания верстки. И хотя некоторые конструкторы предлагают упрощенный функционал, предпринимателям часто приходится обращаться за помощью к разработчикам. Выбор AMP-элементов в конструкторах ограничен.

Заключение

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

Интернет-магазин может использовать технологию в разнообразных форматах: показывать товарные карусели, проводить опросы, собирать отзывы и оценки, помогать с выбором товара, вводить элементы игры.

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