Как добавить интерактив в html email
Перейти к содержимому

Как добавить интерактив в 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.

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

Интерактивные письма: 7 способов использовать технологию AMP в email-рассылках, чтобы повысить их эффективность

Интерактивные письма: 7 способов использовать технологию AMP в email-рассылках, чтобы повысить их эффективность

Ольга Кочкина Редакция «Текстерры»

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

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

Как работает AMP в рассылках

Пару недель назад мне на почту пришло вот такое письмо. Предположим, что это не спам – я сама оставила им email, ассортимент и акции мне интересны. Поэтому я его открою.

Типичная рассылка интернет-магазина с анонсом новой коллекции

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

А теперь представьте, что вместо фотосета тут было бы несколько подборок с конкретными товарами, а в дополнение к кнопкам для перехода на промостраницу и к коллекциям – CTA «Купить» или «Положить в корзину». Взгляд мог бы зацепиться вон за ту белую маечку, и я бы кликнула. Потом, зайдя на сайт, я увижу товар в корзине, вспомню, что хотела купить, и оформлю заказ. Даже если предположить, что я не буду заходить в интернет-магазин неделю, две или месяц, с товаром в корзине всегда есть возможность прислать мне напоминалку.

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

AMP for Email – технология, которая позволяет использовать в электронных письмах динамические и интерактивные элементы. С технической стороны это реализуется за счет добавления в обычные html-письма элементов AMP. В целях безопасности поддерживаемые компоненты, а значит и возможности таких рассылок, ограничены. Но эти возможности все равно шире, чем у обычных html-писем. Давайте их рассмотрим.

Чем полезен интерактив в email-письмах

Для начала коротко поговорим о том, зачем вообще это нужно, а потом я приведу примеры решения конкретных задач.

Итак, интерактивные рассылки с динамическим контентом помогают:

  • Сокращать воронку. Как в примере из предыдущего пункта. Вместо перехода на сайт и путешествия с промостраницы в нужный раздел, я могу положить товар в корзину прямо из письма.
  • Повышать вовлеченность. Интерактивные элементы и опросы приглашают получателя взаимодействовать с письмом. Он кликает на кнопки и картинки, вовлекаясь в контент.
  • Привлекать внимание. Интерактив в письмах пока штука новая. Он еще не приелся и не стал чем-то привычным. Все новое и необычное привлекает внимание, и больше всего его получат те, кто запустит новую фишку раньше других.
  • Поддерживать актуальную информацию. Реализовав интеграцию с сайтом, можно подгружать данные о товарах прямо в письмо. Например, вы отправляете покупателю подборку товаров, которые могут его заинтересовать, с ценами и наличием. Если использовать AMP-компоненты, информация в письме будет меняться вслед за информацией на сайте. Если какой-то товар подорожает или закончится, это отразится в письме.
  • Экономить время клиентов. Возможность выполнять действия, не покидая почты, экономит время. К примеру, я настроила уведомление на сайте билетного агентства – как только на нужный спектакль или концерт откроется продажа, мне придет письмо. Без AMP, получив такое сообщение, я должна буду перейти на сайт для заказа, с AMP смогу все оформить в письме.
  • Использовать больше возможностей для оформления контента. AMP – это не только обмен данными с сайтом, но и визуальный динамический контент – слайдеры, галереи, аккордеон. Все это помогает расставить визуальные акценты и оформить контент более компактно, уместить больше на меньшем количестве экранов.

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

Обратная связь

Провести опрос или попросить клиентов оставить отзыв через рассылку – дело обычное. Разница в том, что в обычных html-письмах для совершения этих действий получателю нужно перейти из почты на сайт компании, в Google Forms или другие инструменты. С AMP никуда переходить не надо – пункты опроса или форма для отзыва добавляются прямо в письмо.

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

Заявки в продажи

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

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

Больше иллюстраций

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

Подписки на рассылки и мероприятия

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

Динамика и персонализация

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

Компактная упаковка контента

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

Навигационный сайдбар

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

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

Что нужно, чтобы все работало

В первую очередь потребуется добавить в рассылку компоненты AMP. Конструкторов, которые позволяют собирать такие письма без разработки, пока нет. Зато у некоторых сервисов есть функционал для добавления AMP к созданному в их конструкторе шаблону. То есть сначала мы собираем обычное html-письмо, а затем добавляем к нему код AMP. В создании кода помогут официальная документация, библиотека компонентов и ваши разработчики.

Даже если вы не пользуетесь конструкторами и верстаете письма сами с нуля, вам придется создавать обе версии письма – одну html, вторую – с AMP. Дело в том, что AMP4Email – технология новая, работает пока не во всех почтовых клиентах и не на всех устройствах. Пока компоненты AMP в письмах работают в ящиках на Gmail и Mail.ru. И только на десктопе. Но это не значит, что подписчики, которые используют другие сервисы или читают рассылки с мобильных, вообще не получат и не увидят письмо. Для этого и нужна html-версия.

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

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

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

  • Сайт на https. Если в письме есть ссылки на сайт или AMP-компоненты для обмена данными с ним, ваш ресурс должен работать на https. В противном случае подписчики не увидят AMP-версию письма.
  • Корпоративный почтовый домен. AMP-рассылки можно запускать только с корпоративной почты.
  • Одинаковые домены сайта и почты. Без этого вы не пройдете проверку Google, а значит не сможете отправлять письма с AMP-компонентами на адреса Gmail.
  • Политика конфиденциальности на сайте. Это тоже одно из требований Google. Ссылку на нее нужно будет добавить в анкету, которую Google просит заполнить, чтобы получить разрешение на отправку AMP-писем на адреса Gmail.
  • Параметры SPF, DMARC и DKIM. Это 3 DNS записи, которые проверяют спам-фильтры, решая, стоит ли пропускать письмо. В блоге «Текстерры» мы уже рассказывали о том, как проверить и настроить для своего домена SPF и DKIM. После того, как эти параметры настроены, по аналогии нужно добавить на хостинге DNS запись DMARC с именем _dmarc.site.ru (где site.ru – ваш домен) и типом TXT. В поле данных введите свое значение правил для DMARC. Подробнее о том, какие могут быть правила и как формируется запись, смотрите в справке Google.
  • HTTP заголовки CORS. CORS – это технология, которая позволяет предоставить веб-странице доступ к ресурсам другого домена. В случае с AMP-рассылками это нужно, например, когда вы хотите поддерживать в письме актуальную информацию о ценах и наличии товара. А значит – подгружать ее с вашего сайта. Подробнее о том, как это работает и как прописывать такие заголовки – в справке Google и официальной документации по AMP. Осваивайте сами или перешлите ссылки своим разработчикам 😉
  • Шифрование TLS. Протокол TLS – усовершенствованная версия SSL и точно так же обеспечивает безопасную передачу данных. Если до внедрения AMP компания уже вела рассылки и использовала надежные сервисы, скорее всего, ваши письма зашифрованы. Проверить это просто – отправьте тестовое письмо на свой почтовый ящик и посмотрите подробности. Тип шифрования должен быть указан в информации о безопасности.

Так это выглядит в Gmail

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

Это основные требования, которые нужно выполнить, чтобы пройти проверку и получить разрешение отправлять интерактивные письма на Gmail и Mail.ru. Дополнительные рекомендации и советы – в справке Google и на официальном сайте проекта AMP.

Убедившись, что все требования выполнены, можно приступать к завершающему этапу – отправке заявки в White list Google и Mail.ru. Для этого нужно:

  1. Создать новое письмо с AMP компонентами и проверить его на корректную работу в конструкторах Gmail и Mail.ru.

Конструктор AMP Gmail

  1. Отправить это тестовое письмо с адреса, с которого вы планируете вести рассылку с AMP, на postmaster_amp@corp.mail.ru (для Mail.ru) и на ampforemail.whitelisting@gmail.com (для Google).
  2. Чтобы получить разрешение на отправку писем с AMP на адреса Gmail, нужно заполнить еще заявку в Google Forms.

Форма заявки на отправку AMP-рассылок на адреса Gmail

  1. Дождаться ответа. Mail.ru обычно отвечают быстрее, от Google ответ может прийти через несколько недель.

Получив ответы, можно запускать первую рассылку.

Кстати, у вас уже появились идеи, как можно использовать новые возможности в вашем бизнесе? Давайте обсудим в комментариях 🙂

Мы в TexTerra давно оценили возможности email-маркетинга и активно используем их для комплексного продвижения своих услуг и продуктов наших клиентов, встраивая этот канал в общую стратегию интернет-маркетинга.

Продвинем ваш бизнес

В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров

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

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

Webpage with animations and interactive elements.

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

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

CSS анимации

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

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

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

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

Веб-разработчик: новая работа через 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 для создания более сложных и продвинутых эффектов.

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

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

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

AMP email

header image

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

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

Содержание

Преимущества AMP email

  • Расширяет возможности использования email
  • Удовлетворяет требования современной аудитории
  • Позволяет вывести персонализацию на новый уровень
  • Низкая конкуренция
  • Расширяет возможности использования email. AMP email позволяет подписчикам выполнить необходимые действия прямо в письме. Другими словами, пользователи могут просмотреть карусель, заполнить форму подписки, подтвердить бронирование или приглашение на мероприятие, прочесть релевантную информацию в аккордеоне, написать ответ к комментарию и многое другое. Это позволяет маркетологам улучшить результативность email рассылок, так как динамические письма мотивируют к действию “здесь и сейчас”.
  • Удовлетворяет требования современной аудитории.Email маркетинг — один из самых эффективных маркетинговых каналов. Его активно используют с начала 2000-х годов по всему миру, и сегодня количество пользователей продолжает расти. А причина тому — адаптивность к требованиям рынка. Так, одни email технологии приходят на смену другим. С помощью AMP email бренды разбавляют статические письма более динамичным контентом, а главное — помогают клиентам сэкономить время и уменьшить количество переходов.
  • Позволяет вывести персонализацию на новый уровень. С помощью AMP email маркетологи получают огромное количество данных. Это помогает брендам более эффективно персонализировать письма. Кроме того, контент AMP email можно регулярно обновлять (например, изменять изображения товаров, цены, даты вебинаров). Так, подписчики всегда будут получать персонализированные письма с актуальной информацией.
  • Низкая конкуренция. AMP email — это инновационная технология. Пройдет некоторое время прежде чем ее массово начнут использовать маркетологи. Поэтому, если вы понимаете, как взаимодействовать с пользователями через элементы AMP в письмах — у вас есть все шансы опередить конкурентов.

Чем AMP email отличается от HTML письма

AMP email — это обычное письмо в формате HTML, которое содержит ограниченную JavaScript разметку для внедрения элементов AMP.

Email провайдеры не поддерживают полный спектр возможностей JavaScript в HTML письмах, а также тщательно контролируют и ограничивают библиотеку JavaScript. Тем не менее, элементы AMP в письме повышают вовлеченность аудитории, поэтому такие сервисы как Gmail, Outlook, Yahoo, Mail и Mail.ru, поддержали технологию AMP.

Доступные AMP компоненты: карусель, amp-lightbox изображений, аккордеон, amp-bind, форма подписки, текстовое поле, amp-timеago, анимация, amp-img, чекбокс, список, боковая панель, amp-state.

Добавьте интерактива в письма!

SendPulse позволяет отправлять интерактивные письма с динамическим контентом. Попробуйте прямо сейчас!

Рекомендации по созданию AMP email

  1. Выберите оптимальные размеры
  2. Проследите, чтобы дизайн письма соответствовал дизайну сайта компании
  3. Не перегружайте письма и аудиторию
  • Выберите оптимальные размеры. Максимальная ширина AMP email не должна превышать 800 пикселей, иначе содержимое может быть ограничено для некоторых пользователей. Высота письма не имеет ограничений, так как клиенты могут скролить контент.
  • Проследите, чтобы дизайн письма соответствовал дизайну сайта компании. Многие люди выбирают email, как наиболее удобный канал для взаимодействия с брендами. В некотором смысле, AMP email должно быть продолжением сайта. Убедитесь, что элементы письма визуально соответствуют элементам на вашем веб-ресурсе — это поможет подписчикам легко выполнить необходимые действия.
  • Не перегружайте письма и аудиторию. Добавляйте компоненты AMP постепенно. Вначале протестируйте один или два элемента. Поэкспериментируйте с комбинациями компонентов AMP и выберите те, которые наилучшим образом будут соответствовать контенту.

Примеры AMP email

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

Doodle. Это сайт для планирования дат встреч и совещаний. Технология AMP email помогает клиентам легко выбрать подходящее время прямо в письме.

Booking.com. С помощью AMP email компания позволяет подписчикам управлять настройками подписки в футере письма.

FAQ

Я могу отправлять AMP письма в SendPulse?

Да. Зарегистрируйтесь в сервисе и подайте запрос на валидацию адреса отправителя в Gmail или Mail.ru с примером кода AMP письма. Вы можете использовать готовый шаблон SendPulse или свой собственный код. Следуйте пошаговому руководству.

Как получить разрешение на отправку AMP писем в Gmail?

Убедитесь, что ваша рассылка соответствует правилам Google, отправьте готовое письмо со своего сервера и заполните форму регистрации. Более подробную инструкцию читайте здесь.

Какие email провайдеры поддерживают AMP письма?

Gmail, Outlook и Mail.ru поддерживают технологию AMP. Если ваши подписчики используют эти email провайдеры, отправляйте им AMP письма с помощью сервиса SendPulse.

Также искали с «AMP email»
  • Подписка на рассылку
  • Тема письма
  • Email уведомление
  • DKIM
  • SMS реклама
  • Репутация
  • Веб-версия письма
  • Автоматическая серия писем
  • Pop-up
  • AMP email

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *