Собрали 250+ комментариев в бесконечном AMP-письме

Терапевтический кейс EMAILMATRIX

Фай

креативный продюсер EMAILMATRIX

Новогоднее письмо от EMAILMATRIX должно дарить подписчикам эмоции — мы всегда придерживаемся этого курса, чтобы вместе с аудиторией начинать год на креативной волне. К 2025-му, например, придумали «живой» емейл, помогающий освободиться от негатива.

Рассказываем, как сделать рассылку, которая вовлечёт аудиторию в коммуникацию, а ещё будет менять свою форму.

Идея

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

Мы уже использовали это в одном из новогодних емейлов. А на сей раз создали «терапевтическую» рассылку: предложили читателям отпустить и забыть весь негатив за уходящий год. Как? Анонимно описать свои плохие воспоминания и скормить их змее, символу года.

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

Дизайн

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

А это, в свою очередь, определило визуальный стиль рассылки.

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

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

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

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

Вёрстка

Письмо сверстала наш тимлид разработки Лена: она любит возиться с AMP и часто сама подкидывает креативной команде новые идеи. Здесь передам слово ей.

Для воплощения задумки я решала две задачи (не считая адаптивности дизайна):

• сделать письмо растягивающимся на любую длину,
• добавить живую ленту.

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

В CSS есть специальное свойство для повтора фоновых изображений: background-repeat. Оно по умолчанию имеет значение repeat, то есть повтор сразу по горизонтали и вертикали. Так что мне оставалось задать позиционирование подложки с помощью свойства background-position. Я выбрала точкой отсчёта центр верхней части:

<div style="background-color: #303030; background-image: url('img/img.png'); background-position: center top;">
контент
</div>

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

1. Создаём новый компонент, указываем название и выбираем тип:

2. Настраиваем параметры компонента. Для живой ленты это тип и обязательность полей ввода, модерация и фильтр нецензурной лексики. Также сразу можно добавить сообщение, которое сопровождает успешную отправку. У нас это Перевариваю…

3. Сохраняем настройки и переходим в следующий раздел — там определяем очерёдность и количество выводимых сообщений. По умолчанию их 20, но мы установили 500 — и всё сработало корректно.

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

Отдельно расскажу о параметрах компонента из второго пункта.

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

• Мы решили включить фильтр нецензурной лексики: сообщения публикуются, но со звёздочками вместо запрещённых слов. Это, с одной стороны, позволяет пользователям искренне высказаться о том, что накипело. А с другой — защищает от мата тех, кто не хочет его видеть.

  

• Ещё один параметр — модерация сообщений до публикации или после. Мы выбрали второй вариант, чтобы каждый подписчик сразу увидел своё сообщение в ленте и то, как растёт змея.

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

  

Елена Сеченых
руководитель команды разработки EMAILMATRIX

Результаты

Наша идея сработала. Письмо собрало более 250 комментариев. И это не считая скрытых сообщений вроде «ывапро» — с ними получается почти 450. Новые ответы поступают до сих пор (!), и змея стала уже в 11 раз длиннее, чем была вначале.

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

• Спасибо EMAILMATRIX за классное письмо
• EMX, спасибо за очередное крутое AMP-письмо!!!
• Нереально крутое письмо! Очень интересно читать. Делайте такие механики почаще, пожалуйста 🙂

Но мне больше всего понравились комментарии, где люди использовали змею так, как она была задумана. Получилось очень человечно. Я считаю, что именно наши подписчики «сделали» эту рассылку.

Вызвать эмоции — действительно главная цель новогодних писем агентства, это правда. Если искать для них маркетинговые задачи, то можно выделить такие:

• привлечь внимание к рассылке — важной части нашей воронки;
• повысить лояльности аудитории;
• наглядно продемонстрировать навыки в креативе и емейл-продакшене.

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

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

КОМАНДА
ПРОЕКТА

Фай

менеджер проекта, дизайнер

Антон Насонов

редактор

Марина Мартынихина

корректор

Елена Сеченых

верстальщик

Алла Гладкова

технический менеджер

Приходите работать к нам ;)

Какая рассылка решит ваши задачи?