Обновили дизайн писем и настроили в CDP мастер-шаблон из 93 блоков
Емейл-рассылка — долгоиграющий инструмент, который может годами успешно решать маркетинговые задачи. Но это не значит, что её достаточно настроить однажды и можно больше не возвращаться. Важно пробовать новые подходы, расширять арсенал тактик — и, конечно, обновлять письма, чтобы они не приедались аудитории.
Именно с таким запросом к нам пришёл зоомагазин «Четыре Лапы». Бренд решил освежить визуал писем в соответствии с актуальной стратегией и привести все рассылки — рекламные, сервисные, триггерные — к единому стилю.
С такой задачей отлично справляется мастер-шаблон. Это набор всех возможных элементов рассылки, из которого в нужный момент просто выбираются подходящие. Так делать письма удобнее, чем с нуля, и все они будут в одной узнаваемой стилистике.
Мы в EMAILMATRIX делаем мастер-шаблоны регулярно, но в этот раз задача оказалась со звёздочкой. Расскажу, как мы её решили.
Особенности проекта
Обычно мастер-шаблон состоит из дизайн-макета и файла с кодом. К каждому файлу мы прилагаем подробную инструкцию, чтобы им можно было пользоваться без значительного опыта в вёрстке.
В этом проекте мы пошли дальше. «Четыре Лапы» используют платформу Bloomreach Engagement (бывшая Exponea) и собирают письма в её редакторе. Поэтому нужно было загрузить мастер-шаблон в CDP, причём с учётом её особенностей и уникальных функций.
Кроме того, магазин использует динамические элементы: в письма автоматически подгружаются карточки товаров. Это правильный подход, но для нас он стал дополнительным условием.
Дизайн
Первым этапом было отрисовать все необходимые блоки в Figma. Всего их получилось 93. Наш дизайнер Алина скомпоновала блоки по категориям — это удобно для дальнейшей работы с мастер-шаблоном.
Особое внимание мы уделили товарным блокам. Важно было уже здесь учесть динамический вывод карточек. В частности, при нём не рекомендуется накладывать элементы друг на друга (например, бренд и сумму скидки на изображение товара). Это будет мешать сборке писем.
Также мы предусмотрели несколько вариантов наполнения карточек. Информация в них может различаться: у акционных товаров дополнительно отображаются старая цена и размер скидки, а, скажем, у кормов — вес.
Алина подготовила «полные» карточки и показала, как изменится расположение элементов при отсутствии части данных. А так как у некоторых товаров очень длинные названия, мы установили максимальное количество строк в карточке — три.
Вёрстка
Когда клиент утвердил макет, пришёл черёд вёрстки. На этом этапе важнее всего сделать элементы такими, чтобы их было легко редактировать и подстраивать под внешние изменения.
К примеру, кнопки и надписи во всех мастер-шаблонах мы в EMAILMATRIX верстаем кодом и текстом. Так при сборке письма достаточно изменить текст. Если же сделать их картинками (такой подход тоже встречается), то затем придётся каждый раз делать новые изображения, загружать их в платформу и вставлять в вёрстку.
Ещё один подводный камень — изображения товаров в карточках. Они могут иметь разные размеры и пропорции. Если прописать в вёрстке фиксированную ширину и высоту, то картинки может сжать или расплющить. Мы указываем фиксированную ширину, чтобы высота подстраивалась.
Когда мы готовим для клиента мастер-шаблон в виде файла с вёрсткой, то добавляем пояснения к каждому блоку: с ними в файле легче ориентироваться. В случае с «Четырьмя Лапами» верстальщица Лена оставила такие комментарии для меня. Спасибо, Лена!
Особенности платформы
Обычно для сборки писем без работы с HTML-кодом используют блочные редакторы — отдельные программы или встроенные инструменты платформ. Первые требуют дополнительной оплаты, а у вторых зачастую очень ограниченный функционал. Например, некоторые не поддерживают блоки, свёрстанные вручную.
К счастью, у Bloomreach Engagement есть инструмент HTML Blocks, который по возможностям не уступает внешним программам. Он позволяет сохранить все HTML-блоки как отдельные шаблоны, из которых затем компонуются письма во внутреннем редакторе.
Когда приходит время создать письмо, достаточно сделать три шага:
- Выбрать подходящие блоки и уже без кода задать нужные параметры в интерфейсе: написать текст, вставить ссылку, выбрать картинку.
- Скопировать автоматически сгенерированный код в редактор платформы:
- Полюбоваться готовым письмом:
«Четыре Лапы» уже собирали письма с помощью HTML Blocks, что стало плюсом для нашего проекта. Клиенту не пришлось знакомиться с новым функционалом, он чётко понимал, чего хочет и в каком виде.
Перенос блоков в CDP
Я начала настройку мастер-шаблона в платформе как раз с изучения старых блоков бренда. Это помогло понять, как он видит использование блоков в рассылках.
Затем я настроила самые простые блоки — статичные. Им не нужно прописывать параметры, ведь они не меняются от раза к разу.
Следующими стали блоки, которые содержат параметры для изменения контента вручную. Покажу, как это выглядит:
Финальный этап — товарные блоки с автоподгрузкой данных. «Четыре Лапы» часто используют в письмах подборки: таких блоков может быть несколько, а самих товаров — до 16 штук.
Добавлять характеристики каждого товара вручную — долго и утомительно, поэтому я настроила динамический вывод данных из фида. Клиент просто задаёт id товаров, и их данные сами подтягиваются в письмо.
Здесь нам сильно помогла заготовка клиента со всеми нужными характеристиками товаров. Мы изменили дизайн карточек и мобильную адаптацию, но с нуля составлять алгоритм действий и правила не потребовалось.
Взаимодействие с клиентом
Во время работы над проектом клиент тоже был активен. Его комментарии позволили нам лучше понять потребности и сделать использование мастер-шаблона удобным.
Один из примеров — текстовые блоки. Мы планировали сделать их HTML-блоками с набором параметров-элементов. Скажем, «Анонс статьи» с кастомным заголовком, ссылкой на кнопке и так далее.
Но клиент объяснил, что хочет комбинировать разные элементы: где-то не писать подзаголовок, куда-то добавить другую кнопку… Для этого я разбила каждый блок на несколько в соответствии с параметрами. Получился конструктор, из которого можно собрать любую нужную информационную карточку.
Также бренд попросил настроить блоки с изображениями так, чтобы каждое по желанию можно было сделать кликабельным. Это работает так:
- прописываешь параметр img url — картинка обернётся в ссылку;
- оставляешь параметр пустым — картинка остаётся обычной, в вёрстке ничего не ломается.
Это простой алгоритм с ветвлением, но написать его нужно было на специальном синтаксисе Bloomreach Engagement — Jinja. Я раньше не пользовалась им, но мне помогла документация платформы. Изучив материалы о работе Jinja и протестировав несколько вариантов, я нашла подходящее решение:
С завершением настройки моя работа над проектом не закончилась. Я отвечала на уточняющие вопросы клиента и сама следила за его новыми письмами; подсказывала, если что-то получалось не так. В какой-то момент компании понадобилась пара дополнительных блоков, мы с коллегами сделали их.
Результаты
Раньше письма «Четырёх Лап» выглядели так:
Теперь — так:
А ещё они получили мобильную адаптацию:
Мастер-шаблон помогает:
- повысить узнаваемость бренда: компания будет придерживаться единого стиля;
- сэкономить время на дизайне: дизайнеру больше не придётся делать каждое письмо с нуля;
- сэкономить время на вёрстке, если блоки будут загружены в визуальный конструктор.
По словам клиента, теперь он собирает письма в несколько раз быстрее.
Отзыв клиента
У нас уже был позитивный опыт работы с EMAILMATRIX. Поэтому, когда появилась задача полностью переработать шаблоны наших писем, мы обратились именно в это агентство — и не прогадали.
Ребята оперативно проанализировали наши текущие рассылки, собрали хотелки и предоставили дизайн. После небольших правок и согласования приступили к самому интересному — переносу дизайна в код. С учётом широких возможностей Bloomreach Engagement мы планировали получить универсальные блоки, из которых можно будет собирать рассылки без необходимости вообще лезть в код вёрстки.
В итоге коллеги из EMAILMATRIX блестяще справились с задачей. Теперь мы просто выбираем нужный блок из списка — баннер, заголовок, картинку с текстом и так далее, — заполняем параметры и получаем готовую красивую рассылку. А когда открываешь исходник письма, вместо кода вёрстки сразу видишь, из каких блоков оно состоит. Удобно вносить правки в текст или переставлять блоки местами, не боясь допустить ошибку в коде.
Ну а самое прекрасное — теперь на сборку письма уходит в разы меньше времени, буквально считаные минуты. Есть возможность больше времени уделить креативу и аналитике рассылок.
Константин Тихомиров
руководитель программы лояльности «Четыре Лапы»
КОМАНДА
ПРОЕКТА
