«Живые» письма: как устроен интерактивный контент в рассылках

Зачем нужна AMP-технология и как правильно создать интерактивное письмо

«Живые» письма: как устроен интерактивный контент в рассылках

Интерактивный контент — один из лучших способов привлечь и удержать внимание аудитории. С его помощью можно заметно повысить вовлечённость подписчиков в email-маркетинге. 

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

Что такое интерактивный контент

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

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

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

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

Технология AMP Email: неслучившийся переворот рынка

AMP — Accelerated Mobile Pages — технология от Google, которой недавно исполнилось 10 лет. Благодаря открытому исходному коду она активно развивается и широко распространена: например, такие страницы использует Twitter (X), а сам Google «пушит» AMP-версии в своей поисковой системе, что с одной стороны удобно пользователям, а с другой — стимулирует сайты использовать технологию ради увеличения трафика. Например, The Washington Post заявили, что благодаря AMP на 23% увеличили возвращаемость читателей, приходящих из мобильного поиска.

Со временем AMP разрослась — появлялись всё новые подвиды и инструменты, в том числе AMP Email. Благодаря ей сама технология AMP, по сути, вышла за пределы мобильных страниц и предварительной загрузки контента и нацелилась на оптимизацию опыта читателей рассылок. 

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

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

Как работает AMP и почему это дорого

Первая и основная сложность — это сам код AMP HTML, который используется для создания AMP-писем. У него довольно много отличий от обычного кода HTML, который используется для вёрстки писем. Некоторые из правил использования соблюдать довольно просто — например, постановка тегов <head> и <body>, которые необязательны в «классическом» HTML, или ограничение в 200 000 байт на всю разметку.

Обязательные требования к коду AMP HTML выглядят так: 

  • начинается с doctype <!doctype html>
  • содержит тег верхнего уровня <html ⚡> или <html amp>
  • содержит теги <head> и <body>
  • содержит <link rel="canonical" href="$SOME_URL"> — тег внутри заголовка, который указывает на HTML-версию документа AMP HTML или на себя, если такой версии HTML не существует
  • содержит <meta charset="utf-8">тег в качестве первого дочернего элемента тега <head> 
  • содержит тег <meta name="viewport" content="width=device-width"> внутри тега <head>
  • содержит внутри тега <head> тег <script async src="https://cdn.ampproject.org/v0.js"></script>
  • содержит шаблонный код AMP ( head > style[amp-boilerplate]и noscript > style[amp-boilerplate]) в теге <head>.

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

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

Ещё один существенный минус технологии — AMP-письма отображаются не во всех почтовых клиентах: из популярных в России их отображение поддерживают только Gmail и Mail.ru. Это значительная часть пользователей электронной почты для локального рынка, но не вся. Пользователи других сервисов AMP прочесть не смогут, поэтому для них нужно создавать обычное HTML без AMP — по сути, второе письмо. То есть каждое интерактивное письмо требует удвоенных затрат на вёрстку, не говоря о том, что контент, скорее всего, тоже придётся делать в двух вариантах.  

где работает amp
Так выглядит письмо от EmailMatrix, если открыть его в Яндекс Почте
амп версия письма
…а так — если открыть AMP-версию

Но и это не всё: с поддержкой AMP Email проблемы не только у почтовых клиентов. но также у ESP-сервисов и конструкторов. Некоторые из них вообще не поддерживают работу с AMP, то есть создать там такое письмо физически невозможно, даже если вы готовы в это вложиться. 

Казалось бы, уже этого достаточно, чтобы передумать. Но вишенка на торте — чтобы получить возможность отправлять AMP-письма, нужно запросить разрешение провайдера, а для этого отправитель должен соответствовать ряду требований. Например, не сможет использовать технологию новичок: с момент настройки APF, DKIM и DMARC для домена должно пройти не менее трёх месяцев. Ещё одно требование касается количества отправляемых писем — не менее 5000 в месяц на протяжении трёх месяцев. Подробнее процесс регистрации в качестве отправителя AMP описали в базе знаний Unisender

Итог из всего вышесказанного, по сути, простой: создание AMP-писем технически сложное, дорогое, а для пользователей некоторых ESP-сервисов и вовсе нереализуемое. Если вы решитесь на его создание, потребуются специалисты, усидчивость, время и деньги — и не факт, что ваши пользователи не фанаты Яндекс Почты и вообще увидят результат ваших трудов. 

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

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

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

Согласно данным маркетинговых исследований, интерактивный контент в рассылках способен повысить вовлеченность подписчиков на 225%, а кликов — на 101,6%.

Преимущества интерактивного контента

Сокращается путь пользователя. Подписчику не нужно переходить на сайт, чтобы выполнить какое-то действие. Это экономит время, улучшает продвижение и повышает конверсию. Каждый дополнительный переход — это этап, на котором отсеивается часть аудитории. 

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

Письма привлекают больше внимания. Интерактивные письма пока не так популярны по сравнению с классическими статическими рассылками. Любой необычный формат вызывает интерес и лучше запоминается. 

Легче поддерживать актуальность информации. Содержимое AMP-писем хранится на сервере. Это позволяет вовремя обновлять данные и показывать только актуальную информацию. 

Можно разнообразить оформление письма. При использовании AMP можно добавлять в текст разные динамические элементы. При этом особенности оформления позволяют сделать компактным даже большое по содержанию письмо.

Недостатки интерактивного контента

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

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

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

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

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

Виды интерактивного контента для email-рассылки

Вариантов использования интерактивного контента в рассылках немало. Перечислю самые популярные. 

Карусель изображений (слайдер). Это динамический блок, в котором можно поочередно просматривать изображения. Перелистывание бывает ручным или автоматическим. 

Слайдеры в письме
Рассылка «Пакета» с переключением слайдов по клику — по сути просто слайдер, но оформленный как книжка

Изображения с ролловер-эффектом. Картинка меняется при наведении на неё курсора. Если убрать курсор — возвращается исходное изображение. 

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

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

Игры. Да, играть с пользователями в письмах тоже можно. Формат игры зависит преимущественно от вашей фантазии — можно интегрировать в рассылки ребусы и кроссворды, а можно — игры в духе «найди предмет».

Как сделать письмо с игрой
Selectel в рассылке предлагает найти на картинке то, что находится не на своём месте

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

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

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

добавить товар в письмо
Можно оставить отзыв, а можно добавить товар в корзину. Источник

Анкета или форма для заполнения. Если подписчик может заполнить анкету, не выходя из письма, то вероятность взаимодействия сильно возрастёт. Например, можно вставить прямо в письмо анкету, созданную в Google Forms. Или создать опрос в формате теста или квиза.

Викторины в письмах
CDEK устроили в рассылке викторину к 25-летию компании. Источник

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

Комментарии гугл письма
Классический пример — уведомления от Google Docs, где можно ответить на комментарий или пометить его решенным сразу в письме

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

Аккордеон. Это формат с несколькими блоками, которые раскрываются по клику. Такой способ помогает поместить в письмо большой объём информации и при этом избавить подписчика от долгого скроллинга.

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

Добавить меню в письмо
Меню в рассылке Booking.com позволяет выбрать внутренние или международные туристические направления. Источник

Интерактивные графики. Динамические графики могут показывать читателям изменение показателей бизнеса или интерес клиентов к каким-то темам/продуктам в режиме онлайн. 

Смарт-баннеры и блоки. В таких блоках информация постоянно меняется. Пользователь может увидеть данные, актуальные на момент открытия письма. Как, например, в таком письме с курсом валют

Как создавать AMP-письма

Для использования AMP-технологии в рассылках в стандартное HTML-письмо добавляют разметку JavaScript. Добавленный код не статичен, его можно редактировать после отправки письма. Элементы можно менять самостоятельно или настроить интеграцию с сайтом. К примеру, на вашем сайте изменилась информация о товаре — и то же самое происходит в письме. 

Но нельзя просто взять и начать отправлять интерактивные рассылки. Для соблюдения безопасности почтовые сервисы предварительно проверяют всех отправителей такого контента. Разберём пошагово, как правильно создать интерактивное письмо. 

1. Убедитесь, что ваш сервис рассылки поддерживает AMP

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

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

2. Проверьте соответствие вашего домена требованиям провайдеров

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

  • с вашего домена рассылки отправляются не менее 3 месяцев;
  • объём рассылок — не менее 5000 писем в месяц;
  • для домена настроены SPF, DKIM и DMARC минимум 3 месяца назад; 
  • домен зарегистрирован в постмастерах; 
  • в служебных заголовках присутствует List-Unsubscribe, позволяющий получателям отписаться; 
  • содержание писем актуально и соответствует тематике сайта или заявленной теме. 

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

Оценка email-рассылки
Пример проверки письма в mail-tester

3. Создайте AMP-письмо

Подготовьте письмо с AMP, которое отправите для демонстрации провайдерам. Обязательно создайте HTML-версию email — её покажет пользователю почтовый сервис, который не поддерживает AMP-формат. 

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

Если верстаете письмо самостоятельно, проверьте, что оно проходит валидацию и все элементы отображаются правильно. Можно использовать валидатор от Gmail или от Mail.ru.

Валидатор Gmail
Статус PASS в результатах проверки означает успешное прохождение валидации

4. Отправьте пример AMP-письма провайдерам

Основные провайдеры, которые поддерживают технологию, — Gmail, Mail.ru и Yahoo Mail. Отправьте пример интерактивного письма на эти адреса: 

5. Подайте заявку для регистрации в качестве отправителя AMP-рассылок

Для подачи заполните на английском языке форму регистрации отправителя. Она заполняется один раз, поскольку отправляется сразу трём провайдерам. В заявке потребуется указать ссылку на политику конфиденциальности сайта/компании и страну происхождения компании. Также нужно рассказать о цели использования интерактивных писем. В графе об указании сторонних ESP укажите используемый сервис рассылки. 

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

Запрос разрешения на отправку AMP
Фрагмент заявки на регистрацию AMP-отправителя

Сервисы для создания интерактивного контента

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

Zembula. Позволяет добавить в интерактивные письма смарт-баннеры и умные блоки, которые обновляются в момент открытия.

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

Freshinbox. Помогает создать карусель изображений для интерактивных рассылок, а затем скопировать CSS- и HTML-код для вставки. Также позволяет создавать ролловерные изображения, которые меняются при наведении курсора. 

Viewed. Помогает встроить в рассылку видеоролики и обеспечивает их плавное воспроизведение прямо в почтовом ящике. 

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

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

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

LeadQuizzes. Пригодится для создания викторин и опросов для использования в интерактивных рассылках. 

Mailmodo. Помогает создавать интерактивные формы опросов, рейтинги, бронирования, аккордеоны и пр. Можно выбрать готовый шаблон и отредактировать его. 

«Честно» — рассылка о том, что волнует и бесит

Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.

Наш юрист будет ругаться, если вы не примете :(
Нажимая «Подписаться», я принимаю Правила использования и подтверждаю, что ознакомлен с Политикой обработки персональных данных.
🔮 Создать письмо