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

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

Адаптивні маркетингові листи — головний біль для будь-якого верстальника. Outlook ріже CSS, Gmail склеює рядки, а Apple Mail підтримує темну тему. Промо-акції, дайджести, реактивація — кожен лист має виглядати ідеально у 90+ клієнтах. Інакше конверсія падає, а прибуток втрачається. Навіть невелика помилка в стилях може зламати лист у популярному клієнті, і підписники побачать битий макет, що веде до втрати довіри.

Ми вирішуємо цю проблему: верстка на MJML, динамічний контент через Handlebars, тестування в Litmus. Досвід понад 7 років гарантує, що ваш шаблон не зламається в жодного підписника. Уявіть: лист відкривається в Outlook — все на місці, кнопки клікабельні, посилання працюють. В Gmail — те саме. Це реальність, а не фантастика. За даними Litmus, Outlook та Gmail займають понад 60% ринку, тому крос-клієнтська сумісність — критичний фактор. Ми витрачаємо до 30% часу розробки на тестування, щоб жоден підписник не побачив битий шаблон.

Як забезпечити сумісність з Outlook?

Outlook використовує Word для рендерингу HTML. Він не підтримує блочну верстку, медіа-запити, багато CSS-властивостей. Вихід — таблична структура з явними ширинами. MJML генерує такі таблиці автоматично. Додатково ставимо conditional comments для margin/padding. Типова структура промо-листа на MJML:

<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>

Чому MJML кращий за табличну верстку?

Ручна таблична верстка потребує до 3 днів на один шаблон і часто містить помилки. MJML скорочує час до 1 дня, автоматизуючи медіа-запити, стиснення зображень та генерацію preview. Додатково MJML знижує навантаження на тестування — ми витрачаємо на 70% менше часу на пошук багів. Економія на тестуванні може досягати $500 на місяць при використанні Litmus замість ручної перевірки.

Рендеринг та відправка

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;
}

Як персоналізувати листи за допомогою Handlebars?

Персоналізація підвищує клікабельність на 30%. Handlebars вставляє змінні:

• {{firstName}} з fallback «Шановний підписник»
• {{#each products}} для товарів з кошика
• {{#if location}} для geo-пропозицій
• {{unsubscribeUrl}} та {{preferencesUrl}} для дотримання GDPR

Дані підвантажуються через REST API або SQL-запити до вашої CRM. Всі посилання автоматично обростають UTM-мітками ?utm_source=email&utm_campaign=spring_sale. Наприклад, інтеграція з Bitrix24 дозволяє отримувати актуальні ціни та залишки через REST-запит до /crm/product.list і рендерити їх за допомогою Handlebars. Це забезпечує динамічне відображення без ручного оновлення.

Процес роботи

1. Аналітика — вивчаємо макет (Figma, PSD), виділяємо змінні та динамічні блоки.
2. Проектування — створюємо структуру MJML, налаштовуємо Handlebars.
3. Реалізація — верстка з адаптацією під 90+ клієнтів, вставка conditional comments.
4. Тестування — перевірка в Litmus та Mailtrap, спам-тест, коригування.
5. Деплой — інтеграція з ESP, налаштування DKIM/SPF/DMARC, фінальний QA.

Як ми тестуємо email-шаблони?

Ми використовуємо Litmus: завантажуємо шаблон, дивимося скріншоти в Outlook, Gmail Web/iOS/Android, Apple Mail, Yahoo, AOL. SpamAssassin score не повинен перевищувати 2.0 — перевіряємо на спам-тригери.

Порівняння методів верстки

Терміни та вартість

Один промо-шаблон з банером і блоком товарів — 1–2 дні. Комплект з 5 шаблонів (промо, дайджест, реактивація, повідомлення, святковий) — 5–7 днів. Вартість розраховується індивідуально — ми проаналізуємо макет і дамо фінальну ціну. Зверніться до нас за консультацією, щоб отримати точний кошторис. В середньому економія за рахунок автоматизації MJML становить 30–50% бюджету порівняно з ручною версткою.

Що входить в роботу

• Верстка за вашим макетом (Figma, PSD)
• Підключення до ESP (Mailchimp, SendPulse, UniSender, SendGrid)
• Інтеграція з CRM через API (AmoCRM, Bitrix24)
• Налаштування UTM, DKIM/SPF/DMARC
• Тестування в Litmus, Mailtrap
• Гарантія коректного відображення у всіх клієнтах

Замовте розробку шаблонів під ключ — отримайте стабільну конверсію без головного болю. Зв'яжіться з нами, щоб обговорити ваш проект. Отримайте консультацію щодо вашого макету прямо зараз.

Інтеграція email розсилок: чому вона часто ламається?

Ми стикалися з тим, що тригерний лист через 10 хвилин після реєстрації конвертує в 4–5 разів краще, ніж той самий лист через 24 години. Це не маркетинговий міф — це механіка: поки користувач теплий, поки пам'ятає контекст. Але більшість інтеграцій з розсильниками зроблені так: форма сабмітиться → синхронний HTTP-запит до API → якщо API гальмує, користувач чекає 3 секунди → лист йде або не йде, ніхто не знає.

Якщо ви зіткнулися з втраченими листами або потраплянням у спам, замовте аудит існуючої інтеграції — ми знайдемо вузькі місця за 2 дні.

Провайдери та їх API

Unisender — російський провайдер, популярний у сегменті SMB. REST API, простий. Додавання контакту: importContacts, відправка транзакційного листа: sendEmail. Важливо: для транзакційних листів (підтвердження замовлення, скидання пароля) Unisender Go — окремий сервіс з іншим API та окремою ціною. Змішувати масові розсилки та транзакційні в одному потоці — погана ідея для репутації домену.

SendPulse — надає email, SMS, web push, Viber, Telegram-боти через єдиний API. Для проєктів, де потрібен омніканал, це зручно. Automation 360 — візуальний конструктор ланцюжків, можна запустити автоматизацію через API event. SDK для PHP (sendpulse/rest-api-php-sdk) підтримується, але оновлюється нерегулярно — краще використовувати напряму через Guzzle.

Mailchimp — вибір для міжнародної аудиторії та маркетингових команд, звиклих до екосистеми Mailchimp. Transactional email — через Mandrill (дочірній сервіс). Marketing API v3 для управління списками, тегами, кампаніями. Webhook для подій: відкриття, клік, відписка, bounce.

SMS. Для Росії: СМСЦ, МТС Exolve, Devino Telecom, SMS Aero. API у всіх схожий: метод send, параметри phone, message, sender (ім'я відправника — потрібно реєструвати окремо у оператора). Один нюанс: ім'я відправника має бути зареєстровано через агрегатора з договором — без цього SMS не відправляться на мережі МТС/МегаФон/Білайн.

Як побудувати інтеграцію, щоб не втрачати листи?

Розділяємо транзакційні та маркетингові потоки

Транзакційні листи (підтвердження замовлення, скидання пароля, статус доставки) — через окремий домен-відправник або субдомен tx.example.com. Маркетингові розсилки — через mail.example.com або news.example.com. Якщо маркетингова розсилка отримає багато скарг на спам, це не повинно зачепити репутацію транзакційного потоку. Згідно з документацією SendGrid, транзакційні повідомлення слід відправляти через виділений IP-пул для запобігання перехресному впливу.

Черга та retry

Будь-який виклик до email API — через чергу (Laravel Queue, Bull, Celery). Якщо Unisender повернув 503 — задача йде в retry через 5 хвилин, потім 15, потім 60. Після 5 невдалих спроб — у dead letter queue з алертом. Користувач при цьому вже отримав свій 200 OK і не знає про проблему. Завдяки цьому підходу bounce rate на проєктах знижується до 0.5%.

Приклад job для Laravel:

public function handle(): void
{
    try {
        $response = Http::post(config('services.unisender.email_url'), $this->params);
        if ($response->failed()) {
            $this->release(300); // retry через 5 хв
        }
    } catch (\Throwable $e) {
        $this->release(300);
    }
}

Шаблони

Зберігаємо шаблони в коді (Blade, Twig, React Email), не в інтерфейсі провайдера. Причини: версіонування через Git, preview у браузері без відправки, можливість тестування. Для складних шаблонів з динамічним контентом — react-email з експортом в HTML через @react-email/render.

Валідація та згоди

Перед додаванням контакту до списку — double opt-in (лист з підтвердженням). Зберігати факт підтвердження з timestamp у своїй БД. При відписці — синхронно відписуємо і у провайдера, і в своїй базі. Ігнорувати webhook відписки — прямий шлях до блокування акаунта у провайдера. Всі процеси відповідають ФЗ-152 про персональні дані.

Моніторинг доставності

Підключаємо webhook від провайдера на події bounce (жорсткий і м'який), spam_complaint, unsubscribe. Жорсткий bounce — негайно позначаємо email як невалідний у своїй БД, більше не відправляємо. М'який bounce 3 рази поспіль — те саме. Метрики: open rate, click rate, bounce rate, unsubscribe rate — дивимося не рідше разу на тиждень. Наші сертифіковані інженери налаштовують алерти в Grafana/Prometheus.

Чому важливо розділяти потоки?

Якщо відправити маркетингову розсилку з того ж домену, що й транзакційні листи, отримавши скарги на спам, ви ризикуєте заблокувати домен — і користувачі перестануть отримувати навіть підтвердження замовлень. SPF, DKIM, DMARC (Wikipedia SPF, Wikipedia DKIM) повинні бути налаштовані окремо для кожного потоку. Ми використовуємо субдомени з різними DNS-записами.

Обсяг робіт з інтеграції

• Аудит поточних потоків комунікації та репутації домену (SPF, DKIM, DMARC)
• Вибір провайдера та схеми: транзакційний vs маркетинговий трафік
• Налаштування DNS-записів SPF, DKIM, DMARC (Wikipedia DMARC)
• Розробка шаблонів листів (HTML + динамічний контент)
• Інтеграція з бекендом через черги та API
• Налаштування webhook для доставності та скарг
• Документація з експлуатації та навчання команди
• Гарантія доставності та підтримка після запуску

Терміни та вартість

Вартість розраховується індивідуально після аудиту. Ми працюємо під ключ: від аналізу до моніторингу в продакшені. Отримайте консультацію інженера — оцінимо проєкт безкоштовно та скажемо точні терміни. Досвід більше 7 років в інтеграції поштових сервісів, реалізовано 50+ проєктів. Замовте безкоштовний аудит поточної інтеграції — отримайте звіт з рекомендаціями.