Как сделать интерактивное письмо
How-to: Техники создания интерактивных email-писем с помощью CSS
В нашем блоге мы уже рассказывали о том, как реализовать в письме пагинацию, однако это далеко не единственный вариант интерактивности email-рассылки. В некоторых случаях привлекательные письма можно создать с помощью hover-эффекта, когда контент изменяется при наведении на него курсора.
Сегодня мы представляем вашему вниманию выжимку из статей блога FreshInbox о том, как создать интерактивное email-письмо.
Первый способ включает три простых шага.
1 шаг: таблица и фоновое изображение
Сначала нужно создать таблицу, которая будет содержать одну ячейку с изображением в качестве фона:
2 шаг: ссылка и изображение
3 шаг: стиль и ховер
Данный способ поддерживается в Yahoo! Mail, Outlook.com (и Outlook 2003). Существует и модификация для Gmail, которую мы подробно рассматривали в одной из прошлых статей.
Нажми и увидишь сюрприз
Еще одна техника позволяет создавать интерактивные письма с помощью hover-эффекта, а для мобильных пользователей показывать «сюрприз» после клика на картинке.
Этот способ похож на описанный выше, однако он отличается тем, что первоначально для неподдерживаемых клиентов показывается не первоначальное изображение, а появляющаяся картинка. Это позволит пользователям с неподдерживаемыми почтовыми программами не упустить сам смысл письма (хотя и вся интерактивность им будет недоступна).
Поддерживаемые клиенты: iOS Mail, Android 4.x Mail, Yahoo! Mail, Outlook.com и Gmail.com (с описанным по ссылке выше хаком с селекторами атрибутов).
Неподдерживаемые клиенты: десктопный Outlook, мобильные приложения Gmail и Gmail for business
В чем отличие от предыдущего метода
Чтобы сделать возможным отображение открываемого изображения, нужно осуществить небольшие изменения по сравнению с предыдущей версией техники. Вместо использования изображения-обложки в качестве оверлея, а открываемой картинки в качестве фона, нужно сделать все наоборот:
Открываемое изображение будет основным, а первоначальная «обложка» станет фоном. Затем на поддерживаемых почтовых клиентах мы изначально спрячем оверлей, показывая только обложку (то есть фон). Когда пользователь наведет курсор на изображение, ему уже будет показано скрытое изображение.
Код будет выглядеть так:
Таким образом, если почтовая программа не поддерживает интерактивность, пользователь увидит то изображение, которое в итоге открывается по ховеру. В этом случае теряется wow-эффект, но сохраняется смысл послания.
Кроме того, изображение завернуто в «мертвую ссылку» — это нужно для того, чтобы эффект срабатывал по тапу на iOS и Android. Ссылка может быть и активной, но тогда в Android пользователи будут перенаправляться на нее. В принципе, интерактивность на мобильных устройствах можно вообще отключить с помощью специального медиазапроса:
Под спойлером представлен полный код примера (поработать с ним также можно на Codepen):
Интерактивные письма: 7 способов использовать технологию AMP в email-рассылках, чтобы повысить их эффективность
Время чтения: 12 минут Нет времени читать? Нет времени?
Email-рассылки – мощный инструмент, который помогает решать десятки маркетинговых задач. А что, если бы вам сказали, что можно сделать его еще функциональнее и повысить отдачу от рассылок? Увеличить вовлеченность, привлечь внимание, повысить конверсию? Все это возможно благодаря новой технологии AMP4Email для создания интерактивных рассылок с динамическим контентом.
В статье расскажу, как это работает, как можно использовать и что нужно сделать, чтобы все получилось.
Как работает AMP в рассылках
Пару недель назад мне на почту пришло вот такое письмо. Предположим, что это не спам – я сама оставила им email, ассортимент и акции мне интересны. Поэтому я его открою.
Чтобы дойти из такого письма до покупки, мне нужно перейти на сайт – откроется промостраница. Затем выбрать раздел, найти нужный товар и так далее. Даже если меня что-то заинтересует, скорее всего, в момент просмотра письма у меня не будет времени на все эти действия. «Потом», – подумаю я… И забуду.
А теперь представьте, что вместо фотосета тут было бы несколько подборок с конкретными товарами, а в дополнение к кнопкам для перехода на промостраницу и к коллекциям – CTA «Купить» или «Положить в корзину». Взгляд мог бы зацепиться вон за ту белую маечку, и я бы кликнула. Потом, зайдя на сайт, я увижу товар в корзине, вспомню, что хотела купить, и оформлю заказ. Даже если предположить, что я не буду заходить в интернет-магазин неделю, две или месяц, с товаром в корзине всегда есть возможность прислать мне напоминалку.
Такие письма с интерактивными элементами и интеграцией с сайтом возможны благодаря AMP. Хотя это обозначение может навести на мысль о статичных и быстрых веб-страницах под мобильные устройства (которые с каждым годом, впрочем, становятся все более функциональны и динамичны), в случае с электронной почтой все работает немного по-другому и пока только на десктопах.
AMP for Email – технология, которая позволяет использовать в электронных письмах динамические и интерактивные элементы. С технической стороны это реализуется за счет добавления в обычные html-письма элементов AMP. В целях безопасности поддерживаемые компоненты, а значит и возможности таких рассылок, ограничены. Но эти возможности все равно шире, чем у обычных html-писем. Давайте их рассмотрим.
Чем полезен интерактив в email-письмах
Для начала коротко поговорим о том, зачем вообще это нужно, а потом я приведу примеры решения конкретных задач.
Итак, интерактивные рассылки с динамическим контентом помогают:
Как я уже говорила, возможности 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 и их отправителям почтовые сервисы:
Это основные требования, которые нужно выполнить, чтобы пройти проверку и получить разрешение отправлять интерактивные письма на Gmail и Mail.ru. Дополнительные рекомендации и советы – в справке Google и на официальном сайте проекта AMP.
Убедившись, что все требования выполнены, можно приступать к завершающему этапу – отправке заявки в White list Google и Mail.ru. Для этого нужно:
Получив ответы, можно запускать первую рассылку.
Кстати, у вас уже появились идеи, как можно использовать новые возможности в вашем бизнесе? Давайте обсудим в комментариях 🙂
Мы в TexTerra давно оценили возможности email-маркетинга и активно используем их для комплексного продвижения своих услуг и продуктов наших клиентов, встраивая этот канал в общую стратегию интернет-маркетинга.
8 примеров интерактивного контента в рассылках
Интерактив в письмах — один из основных трендов дизайна email-маркетинга в течение уже многих лет.
Но сегодня, когда самой обсуждаемой темой стала технология Google AMP 4 Emails, мы почти забыли, что это не единственный способ создания интерактивных писем.
И в этой инструкции мы покажем, как при помощи Stripo можно встраивать в рассылки самые популярные интерактивные элементы.
Хорошая новость: в Stripo вы можете не только создавать письма такого типа с нуля, но и просто кастомизировать наши готовые интерактивные шаблоны.
Виды интерактивности и их использование в письмах
Интерактивные элементы, которые мы представим, отлично отображаются в основных почтовиках — и если даже они не поддерживают интерактивность, ее можно заменить полностью веб-безопасным вариантом:
CSS-анимированная кнопка для промо-писем;
оценивание/рейтинг, чтобы пользователи оценили ваши услуги, не покидая письма;
встроенные опросы, чтобы получатели могли ответить на ваши вопросы прямо в рассылке;
карусель изображений для показа нескольких товаров на одном экране в промо-письмах;
эффект ролловера изображения, чтоб показать товары в промо-письмах под разными ракурсами или продемонстрировать их особенности;
меню-аккордеон для кампаний всех типов, чтобы сделать интерактивные рассылки более компактными;
встроенные видео, чтобы лучше презентовать ваш новый продукт, поздравить клиентов с праздниками и объяснить новичкам, как пользоваться вашим инструментом;
анкорные ссылки, чтобы направить пользователей непосредственно к той части письма, которая их интересует в первую очередь.
Мы нарочно не упомянули таймеры обратного отсчета, персонализацию и другие элементы, которые помогают информировать подписчиков о последних новостях из Instagram, а также интегрированные графики. Дело в том, что хоть это и динамический контент, но все изменения выполняются автоматически — то есть взаимодействие не требуется.
Мы расскажем, как создавать интерактивные письма, а затем протестируем каждое из них.
Важно отметить:
Как известно, Email on Acid и Litmus — лучшие инструменты для тестирования электронных писем. Но в данном случае они нам не особо помогут, так как предоставляют только скриншоты. Однако их все же стоит использовать, потому что они показывают, были ли удалены блоки с интерактивным контентом или нет.
Единственный способ увидеть, работает ли, например, слайдер или получатели увидят только статичное изображение, — это протестировать ваше интерактивное письмо, отправив его на все почтовики, в которых у вас и ваших друзей/коллег есть аккаунты, и на всевозможные десктопные и мобильные девайсы. Чем больше, тем лучше.
Вот список самых используемых почтовиков на ноябрь 2020 года по версии Litmus:
Примечание: вы должны также учитывать комбинацию девайсов и почтовиков.
1. CSS-анимированная кнопка
CSS-анимированные кнопки. Все мы используем в рассылках кнопки CTA — так почему бы не оживить их, когда получатель наводит на них курсор мыши? Анимация привлекает внимание и помогает вам придерживаться дизайна бренда, если кнопки на вашем сайте тоже анимированы с помощью CSS.
(Источник: рассылка от Stipo)
Раньше для анимации кнопок вам нужно было добавлять для них CSS-свойство в редакторе HTML-кода. Это было сложновато.
В прошлом году мы выпустили новую опцию — Интерактивная кнопка/Подсвечивание по наведении. Такая кнопка меняет цвет при наведении на нее курсора.
Как это делается:
зайдите во вкладку «Оформление»;
затем откройте «Общие настройки»;
перейдите в пункт «Кнопка»;
и включите «Подсвечивать по наведению»;
настройте стиль текста, например шрифт, тип и размер шрифта;
настройте цвет кнопки и шрифта;
эти настройки будут применены ко всем кнопкам в вашем интерактивном HTML-шаблоне;
На этом скриншот «Цвет кнопки» означает основной цвет, а цвет по наведению — тот, который увидят пользователи при наведении на кнопку курсора. Цвет текста обозначает цвет шрифта.
2. Оценивание / рейтинг
Не секрет, что после покупки клиенту нужно отправить письмо с приглашением к опросу.
Существует несколько типов опросов. Но оценивание — самый простой для пользователей. Не нужно никуда идти — оценить услуги можно прямо в письме.
Клиенты оценивают ваш продукт, инструмент или сервис. Разумеется, вам и вашему ESP стоит подготовить посадочные страницы с благодарностью. Они могут быть достаточно лаконичными: основная цель таких страниц — просто подтвердить, что вы получили отзыв клиента.
Вы также можете создать две страницы благодарностей. Одна для тех, кто поставил вам 4 или 5 звезд — здесь вы просто благодарите клиентов. А вторая — для тех, кто поставил вам 1-3 звезды. Сюда вы можете добавить ссылку на Google Form, где спрашиваете, по какой именно причине им не понравился ваш инструмент, или говорите, что вы сожалеете по поводу их недовольства. Обязательно свяжитесь с ними как можно быстрее, чтобы узнать причину.
Хороший ESP должен предоставить вам подробный отчет, сколько кликов получило каждое изображение.
Как это делается:
Процесс состоит из трех простых шагов:
Шаг 1. Встраивание кода
поместите в шаблон структуру с одной колонкой;
перетащите в структуру блок «HTML»;
кликните левой кнопкой мыши по этому блоку в шаблоне, чтобы открыть его;
удалите контент блока и вставьте вместо него приведенный ниже код встраивания.
Код написал наш продуктовый дизайнер Роман Бурдыга.
Шаг 2. Замена ссылок на страницу благодарности
Помните, мы чуть выше говорили, что нужно создать страницу благодарностей? Теперь нам нужно добавить в наш код ссылки на эту страницу.
Замените подчеркнутые ссылки в коде ссылкой на страницу благодарности.
Строки 1-2 предназначены для 4 и 5 звезд. Сюда вы вставляете ссылку страницы, на которой просто благодарите клиентов за оценку.
А строки 3-5 — это уже для 1, 2 и 3 звезд. Здесь вы добавляете ссылку на страницу, на которой приносите свои извинения и сообщаете пользователям, что ваша команда поддержки клиентов свяжется с ними в ближайшее время.
Шаг 3. Выравнивание оценивания по центру
Чтобы выровнять оценивание по центру, вам нужно:
открыть редактор кода для структуры с оцениванием. Для этого кликните левой кнопкой мыши значок «Структура» в письме, а затем символ «Редактор кода» над шаблоном;
вставить приведенный ниже код в строку «td прямо над кодом, который вы встроили на предыдущем этапе.
Ваше письмо готово к отправке.
Почтовики, успешно прошедшие тест:
С этим оцениванием успешно справились все основные почтовики, включая Gmail, AOL, Yahoo, Apple Mail, Samsung Mail и даже Outlook как на десктопных, так и на мобильных устройствах.
Альтернативный вариант
Хотя интерактивное 5-звездочное оценивание отлично сработало во всех почтовиках, которые я смогла найти для тестирования, есть вероятность, что вы предпочтете другой способ клиентской оценки в письме.
(Источник: Really Good Emails)
Как это делается:
вставьте 5 изображений по горизонтали;
прикрепите к каждому изображению соответствующие ссылки на страницы с благодарностями.
3. Встроенные опросы с несколькими вопросами
Если вам нужно задать несколько вопросов, нужно создать форму опроса и встроить ее в интерактивную рассылку, чтобы избавить клиентов от излишних телодвижений — они смогут ответить непосредственно в письмах.
Как это делается:
и отправить ее на свой электронный адрес;
при отправке формы Google убедитесь, что вы выбрали «Отправить по электронной почте», после чего введите свой адрес. При необходимости отредактируйте тему и сообщение, так как все получатели увидят их, и поставьте галочку «Добавить форму в письмо»;
скопируйте код встраивания;
откройте форму в папке «Входящие», кликните по ней правой кнопкой и выберите «Инспектировать». Найдите строку ячеек таблицы align=»center». Выделите ее и нажмите «CTRL+C» (то есть не кликайте правой кнопкой мыши и не копируйте);
добавьте новый HTML-блок в шаблон интерактивной рассылки;
откройте его и удалите «Вставьте HTML-код в редактор» из блока;
вместо этого вставьте в блок код встраивания;
На этой гифке показан процесс встраивания опроса.
Примечание: формы опросов, встроенные в наши интерактивные шаблоны рассылок, корректно отображаются на всех типах устройств. НО! Флажки можно кликнуть только на десктопе, на мобильных они некликабельны.
Поэтому при открывании писем с опросами на смартфонах и планшетах ваши пользователи увидят ссылку на саму форму Google (помните Тему формы, которую вы указали? Это и есть имя ссылки. Она добавляется автоматически. Получатели могут смело кликать ссылку, чтобы отправить ответы).
В моем случае это «Christmas Sales».
Почтовики, успешно прошедшие тест:
Rambler.ru in Google Chrome, Mozilla Firefox, Safari, Opera.
Работает только на десктопных компьютерах.
Пользователи мобильных, а также получатели, использующие другие почтовики увидят ссылку. Они также могут быть перенаправлены в Google Form по клику кнопки «Отправить» (в Mail.ru, Apple Mail).
Для пользователей, которые предпочитают другие почтовики, в качестве альтернативы вы также можете добавить ссылку на Google Form и указать, что нужно кликнуть ссылку, чтобы пройти опрос, если чекбоксы не кликабельны.
Обратите внимание, что Stripo — единственный на сегодняшний день конструктор шаблонов, который позволяет встраивать формы Google таким способом.
Некоторые конструкторы не дают возможности работать с открытым кодом HTML, другие же позволяют это делать, но их редактор изменяет код встраивания и формы опросов выглядят некузяво даже на десктопных устройствах.
Альтернативный вариант
Если по какой-то причине форма опроса, встроенная в интерактивный шаблон, не работает в вашем ESP или ваш конструктор писем не позволяет вставлять Google Forms, вы можете попробовать такой метод:
Вставьте кнопку призыва к действию со ссылкой, которая приведет клиентов на целевую страницу вашего сайта, если вы уже разместили там форму опроса.
(Источник: рассылка от Maybelline New York)
Как это делается:
создайте страницу опроса или встройте форму Google на свой сайт;
добавьте кнопку CTA в письмо;
оформите ссылку в виде кнопки.
Примечание: проверить корректность работы ссылок можно, только отправив тестовое письмо самому себе, или же в режиме предпросмотра. Ссылки никогда не работают в редакторах шаблонов.
4. Эффект ролловера изображений
Используя эффект ролловера, вы можете продемонстрировать получателям некоторые товары крупным планом, показать их под другим углом, спрятать детали товара под основной картинкой и даже поиграть с получателями, если это уместно.
Stripol предлагает полностью веб-безопасный эффект ролловера изображений, который корректно отображается в большинстве почтовиков, а наш уникальный код поддерживается всеми ESP, включая Mailchimp.
Важно отметить:
Эффект ролловера изображений предназначен только для десктопных устройств. На мобильных получатели увидят только первое изображение.
Как это делается:
добавьте изображение в шаблон;
на панели настроек переключите кнопку «Эффект ролловера»;