Разработка маркетинговых email-шаблонов
Маркетинговые письма — промо-акции, анонсы, новостные дайджесты, письма «вернись к нам» — отличаются от транзакционных более свободной структурой и упором на конверсию. Нужны яркие заголовки, качественные изображения-баннеры, чёткий CTA и совместимость с почтовыми клиентами от Outlook 2016 до Apple Mail на iOS.
Стек: MJML + Handlebars
Для маркетинговых шаблонов хорошо работает MJML — он берёт на себя таблицы и media-queries, а Handlebars вставляет переменные вроде {{firstName}} и перебирает {{#each products}}.
Типичная структура промо-письма:
<mjml>
<mj-head>
<mj-preview>Скидка 30% только до пятницы — не пропустите</mj-preview>
<mj-attributes>
<mj-all font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" />
<mj-text font-size="16px" line-height="1.6" color="#374151" />
</mj-attributes>
</mj-head>
<mj-body background-color="#f3f4f6">
<!-- Hero-баннер -->
<mj-section background-color="#1e40af" padding="48px 32px">
<mj-column>
<mj-image src="{{ logoUrl }}" width="140px" align="left" />
<mj-text font-size="36px" font-weight="800" color="#ffffff" padding-top="24px">
Финальная распродажа
</mj-text>
<mj-text font-size="18px" color="#bfdbfe">
Скидки до 50% на весь ассортимент — только до {{endDate}}
</mj-text>
<mj-button href="{{ saleUrl }}" background-color="#f59e0b"
color="#111827" font-weight="700" border-radius="8px">
Смотреть товары
</mj-button>
</mj-column>
</mj-section>
<!-- Три товара в ряд -->
<mj-section background-color="#ffffff" padding="32px">
{{#each products}}
<mj-column width="33%">
<mj-image src="{{ this.imageUrl }}" border-radius="8px" />
<mj-text font-weight="600" color="#111827">{{ this.name }}</mj-text>
<mj-text>
<s style="color:#9ca3af">{{ this.oldPrice }}</s>
<span style="color:#dc2626;font-weight:700">{{ this.newPrice }}</span>
</mj-text>
<mj-button href="{{ this.url }}" background-color="#3b82f6" border-radius="6px">
Купить
</mj-button>
</mj-column>
{{/each}}
</mj-section>
<!-- Футер -->
<mj-section padding="16px 32px">
<mj-column>
<mj-text font-size="12px" color="#9ca3af" align="center">
Вы получили это письмо, потому что подписались на рассылку.<br/>
<a href="{{ unsubscribeUrl }}" style="color:#9ca3af">Отписаться</a>
·
<a href="{{ preferencesUrl }}" style="color:#9ca3af">Настройки рассылки</a>
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Рендеринг и отправка
import mjml2html from 'mjml';
import Handlebars from 'handlebars';
import { readFileSync } from 'fs';
function renderMarketingEmail(
templateName: string,
data: Record<string, unknown>
): string {
const template = readFileSync(`./email-templates/${templateName}.mjml`, 'utf-8');
const compiled = Handlebars.compile(template)(data);
const { html, errors } = mjml2html(compiled, { minify: true });
if (errors.length) throw new Error(errors[0].formattedMessage);
return html;
}
Динамический контент
Маркетинговые письма часто требуют персонализации на основе данных пользователя:
-
Товары из истории просмотров — SQL-запрос по
user_id, топ-3 категории -
Имя и обращение —
{{firstName}}с fallback «Дорогой подписчик» - Геолокация — разные офферы по стране/городу через conditional Handlebars
-
UTM-метки —
?utm_source=email&utm_campaign=spring_saleдобавляются ко всем ссылкам
Тестирование
Перед отправкой каждый шаблон проходит:
- Litmus / Email on Acid — рендер в 90+ клиентах (Outlook 2016/2019, Gmail Web, iOS Mail, Android)
- SpamAssassin score — проверка на spam-триггеры в тексте
- Mailtrap — отправка в тестовый ящик, просмотр заголовков
-
Preview text — проверка, что
<mj-preview>отображается корректно в inbox
Сроки
Один маркетинговый шаблон с баннером, блоком товаров и футером — 1–2 дня. Комплект из 5 шаблонов (промо, дайджест, реактивация, уведомление, праздничный) — 1 неделя.