Розробка і верстка шаблонів маркетингових email

Розробка маркетингових 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>&nbsp;
          <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>
          &nbsp;·&nbsp;
          <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 додаються до всіх посилань