23 сентября 2019

Как ускорить верстку email-рассылок с помощью универсального шаблона

Универсальный шаблон — это набор блоков в фирменном стиле, из которых можно собрать письмо на любой случай: от подтверждения подписки до опроса. Для наших клиентов создание одного шаблона входит в стоимость подписки: разработку доверяем email-маркетинговым агентствам, например Email Soldiers и Out of Cloud.

Шаблон разверстываем под параметры Mindbox в визуальном конструкторе или HTML-редакторе. На этом всё — собрать письмо из готовых блоков можно за 60 секунд. Расскажу о том, какие проблемы решает универсальный шаблон, как он ускоряет запуск рассылок, и про процесс его создания.

Пример письма, сверстанного в визуальном конструкторе

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

Самостоятельно разработать универсальный шаблон письма сложно: нужны знания и в дизайне, и в email-маркетинге. Правильнее и проще заказать шаблон у агентства, которое специализируется на email-маркетинге, как мы и делаем.

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

Блоки с разверстанными параметрами загружаются в визуальный конструктор Mindbox или HTML-редактор. У email-маркетолога появляется больше свободного времени для создания и тестирования гипотез, разработки новых механик. Доходность прямых коммуникаций растет.

Как устроен процесс работы

Этап первый: создаем универсальный шаблон письма

Первый шаг в подготовке шаблона — бриф. Запрашиваем у клиента брендбук, фирменный шрифт, примеры рассылок, которые нравятся. Если брендбука нет, ориентируемся на внешний вид сайта или старые письма. Также выясняем, какие пункты меню и категории товаров должны быть в письмах, будут ли использоваться гифки, динамический контент и NPS-опросы. Всего обсуждаем 19 пунктов. Подготовка универсального шаблона занимает примерно две недели: показываем клиенту промежуточный результат и вносим правки, если требуется.

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

Разделы шаблона интуитивно понятны: очевидно, куда подставлять промокод, а где размещать блок со списком товаров.

Шаблон письма Твой дом

Шаблон письма StartTrack

Шаблон письма Киномакс

Примеры универсальных шаблонов для наших клиентов

Универсальный шаблон включает четыре обязательных раздела: прехедер, хедер (шапка письма), тело письма, подвал письма (футер).

Прехедер — самая простая часть письма: содержит тему и ссылку на веб-версию, которая нужна, если не загрузились изображения. Шапка обязательно включает логотип компании и опционально — контактные данные и пункты меню.

Прехедер и хедер не должны быть перегружены лишней информацией

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

Варианты оформления кнопок.
Разные дизайны блоков с контентом.
Блок с промокодом.
Разные типы товарных сеток (отличных по количеству товаров в ряду, по расположению картинки и текста и так далее).
Блок с NPS-опросом.

Раздел с CTA и блоком для промокода

Раздел с разными вариантами товарных сеток

Раздел с корзиной и NPS-опросом

Футер обязательно содержит ссылку на отписку от рассылки. Другие элементы: контактная информация, сноски и ссылки на соцсети.

Без ссылки на отписку письмо гарантированно попадет в спам

В универсальном шаблоне все блоки правильно отображаются в Google, Yandex, Mail и Outlook. HTML-код размечен подсказками, чтобы было видно, какой кусок кода за что отвечает.

Подсказки в коде ускоряют работу с шаблоном

Этап второй: разверстываем письма под параметры

Когда шаблон отрисован и сверстан, маркетолог из готовых блоков собирает письма в визуальном конструкторе или в HTML-редакторе. Менеджер Mindbox расскажет, как разверстать получившиеся элементы под параметры платформы. Например, если подставить параметр ${Recipient.OnlyStandardFirstName}, в письмо подставится имя получателя. Это произойдет только в том случае, если имя стандартное, то есть Василий, а не Солнышко77.

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

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

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

Этап третий: собираем письма из готовых блоков

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

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

Принцип drag-and-drop в действии

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

Программу лояльности Under Armour запустили за два дня: все рассылки на проекте верстались в визуальном редакторе

Заключение

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

Возможности Mindbox для самостоятельной настройки email-рассылок