Всем привет, на связи Петр Никитин, frontend-разработчик Mindbox.
Mindbox — это платформа автоматизации маркетинга. Одна из задач, которую наши клиенты решают с помощью нее — запуск email-рассылок и сценариев. Чтобы облегчить им задачу и не заставлять маркетологов писать HTML-код, мы разработали конструктор рассылок: письмо собирается из готовых блоков, а содержание можно настраивать под свои задачи.
В этой статье я расскажу про процесс разработки конструктора, с какими вызовами мы сталкивались и как находили решения. Например, почему в какой-то момент мы решили, что нам тесно в рамках HTML и решили поменять способ разметки шаблонов, а для этого понадобился собственный язык на базе C# — Quokka Mindbox.
Версия 1. Готовые блоки письма
Нам нужно было создать конструктор, в котором пользователи бы максимально быстро, буквально за несколько кликов, создавали рассылки. Важно было, чтобы они не тратили время на технические детали и могли работать, не зная HTML. Это позволило бы маркетологам работать независимо от верстальщиков, сосредоточиться на контенте и персонализации.
Мы выбрали путь наименьшего сопротивления и сделали заготовки разных блоков письма: «шапки» с логотипом компании, «подвала» с кнопками отписки, текстового блока, блока с иллюстрацией. Маркетолог должен был составлять письмо из нужных ему блоков и менять в них содержание: вписывать свой текст, подставлять иллюстрации, товары и ссылки.
Первый вызов — ограничения заготовок
Первая версия конструктора частично решила задачу: маркетологи смогли быстро выпускать письма. Однако не всегда готовый блок подходил задаче компании. Самый простой пример: нужно поставить текст рядом с иллюстрацией, но таких блоков нет.
Мы пытались расширять настройки и добавлять параметры, которые запрашивали клиенты. Например, давали возможность увеличить иллюстрацию, прижать ее к правому или левому краю, оставить по центру. Все функции добавляли в меню, где маркетолог мог настраивать блок. Из-за доработок меню стало слишком большим и сложным. Мы пришли к тому, что маркетологи не могли разобраться в настройках конструктора и все равно прибегали к помощи верстальщиков — проще было сверстать письмо, чем разбираться в настройках конструктора. Мы поняли, что этот путь ведет в никуда, и начали искать альтернативу.
Версия 2. Загрузка собственных блоков
Мы решили дать клиентам возможность загружать свои собственные шаблоны блоков. Например, верстальщик компании мог один раз сверстать этаж, который повторяется во многих письмах, и передать маркетологу, чтобы тот только менял в них контент. Так оставалась привязка к ИТ-отделу, но подготовку стандартных писем это не тормозило. К тому же компании получали возможность делать письма в корпоративном стиле.
Для такого конструктора мы разработали собственную систему дополнительных атрибутов к HTML-разметке. Это позволяло в любой момент работы над рассылкой видеть результат в браузере.
Пример размеченного блока:
<table
mindbox-block
mindbox-block-name="Логотип"
mindbox-block-category="Шапки"
<tr>
<td>
<div
mindbox-element
mindbox-element-name="Картинка"
>
<img
src="my-pickture.jpg"
mindbox-image-src="elementProps[’pickture’]" />
</div>
</td>
</tr>
</table>
Это стало настоящим спасением для многих наших клиентов. Маркетологи получили «полуфабрикаты» в дизайне своей компании и смогли сфокусироваться только на контенте, а не пытаться сделать из типовых блоков письмо в стиле своей компании.
Второй вызов — нестандартные элементы в письмах
Собственные блоки, которые собирали клиенты, должны были состоять из стандартных элементов, прописанных в системе: текста, иллюстрации, кнопки, ссылки, цены и подобных. Но не всем этого хватало.
Например, одному клиенту было важно ставить на фон определенного блока несколько иллюстраций. Конструктор позволял настраивать общий фон письма, ставить иллюстрацию внутри блока, но ставить несколько изображений на фон только одного блока — нет.
Кроме того, чтобы загрузить шаблон в Mindbox, его нужно было разметить по нашей собственной системе атрибутов, о которой говорили выше. А значит верстальщикам клиентов приходилось изучать по нашей документации новую технологию — это устраивало не всех.
Мы поняли, что нужно разрабатывать универсальный конструктор, который клиентам не пришлось бы дорабатывать: чтобы они могли управлять тем, как будет меняться HTML-код в конструкторе. Например, явно проставлять подстановку данных в блоках, которые это подразумевают. Условно, часто нужно подставлять имя клиента в заголовок письма — нам нужно прописать в коде эту возможность, чтобы маркетолог настраивал подстановку в пару кликов и через интерфейс, а не код.
Это должен был быть в разы более мощный и гибкий продукт. Поэтому мы приняли решение доработать общий для Mindbox язык шаблонизации — Quokka Mindbox. Это позволило бы сделать шаблонизацию блоков конструктора такой же, как шаблонизация писем, с которой менеджеры и клиенты и так уже были знакомы.
О том, как разрабатывали новый язык на базе C# мы расписали в отдельной статье.
Версия 3. Шаблонизатор на Quokka Mindbox
Новый язык основан на императивной простановке инструкций в верстку. Для этого мы придумали собственное пространство имен в параметрах шаблонизации, которые интерпретируются в конструкторе. На сервере HTML с параметрами преобразуется в синтаксическое дерево, сериализуется и отправляется в конструктор. Дальше из дерева обратно создается HTML.
Например, в старой разметке для вывода текста использовался следующий код:
<table
mindbox-element
mindbox-element-name="Text"
text:mindbox-prop-type="Text"
text:mindbox-prop-default-value='"my text"'
>
<tr>
<td mindbox-text="elementProps[’Text’]">
</td>
</tr>
</table>
В новой разметке все стало проще:
<table>
<tr>
<td>
${editor.text}
</td>
</tr>
</table>
Товарные блоки в прежней разметке:
<table >
<tr>
<td align="center"
mindbox-slot
mindbox-slot-rows-count-min="1"
mindbox-slot-rows-count-max="5"
mindbox-slot-rows-count="1"
mindbox-slot-columns-count-min="1"
mindbox-slot-columns-count-max="2"
mindbox-slot-columns-count="2"
mindbox-slot-name="Сетка товаров" >
<div
mindbox-element
mindbox-element-name="Элемент галереи"
text:mindbox-prop-type="Text"
text:mindbox-prop-default-value='"my text"'
mindbox-text="elementProps[’Text’]"
>
</div>
</td>
</tr>
</table>
И в новой разметке:
<table >
<tr>
<td align="center">
@{for item in editor.items}
<div>
${editor.text}
</div>
@{end for}
</td>
</tr>
</table>
Этот подход позволил добиться всех нужных характеристик:
Письмо собирается из готовых блоков по принципу drag-and-drop. Маркетологам не нужно кодить.
Каждый блок настраивается. Можно адаптировать дизайн, менять содержание, добавлять персонализацию, например имя клиента, персональный промокод, цены или товарные рекомендации. Можно настраивать таргетинг, чтобы отдельные блоки показывались только определенным группам клиентов.
Все настройки — через интерфейс, а не код. Чтобы адаптировать блок письма под задачи бизнеса, достаточно кликнуть на него и выбрать нужный вариант в боковом меню.
Под капотом — обычный HTML. Если все же разработчику со стороны клиента понадобится поменять что-то в коде письма, он будет работать со стандартным языком.
Нельзя сказать, что на этом разработка конструктора завершается. Мы продолжаем дорабатывать его и теперь. Например, в планах сделать более удобным процесс подбора товарной витрины в рассылке. Сейчас маркетолог может либо вручную поставить товары, либо подставлять полностью персональный набор товаров: например, рекомендации или корзину. Мы хотим сделать промежуточный вариант, чтобы маркетолог с помощью чекбоксов выбирал, какой из загруженных в систему товаров подставлять в рассылки.
Если интересно покликать и посмотреть, как работает конструктор со стороны пользователя, подайте заявку на бесплатное демо: вы сможете собрать рассылку из готовых блоков или загрузить свои шаблоны. А если есть вопросы по разработке, приходите в комментарии.
