Как разметить письмо для карточки в почте
Разметка в письме, не на сайте. Шаги в конструкторе рассылки, шаблоны Mail.ru и Gmail, почему карточки может не быть
Что это и чем не является
Карточка во входящих — это не блок на холсте письма. Почта рисует её сама: шапка заказа в Mail.ru, кнопка перехода или промо во вкладке акций в Gmail. Чтобы почтовик понял, что показать, в HTML письма нужна служебная разметка.
Формат тот же, что у поисковой разметки сайта (JSON-LD), но кладётся он в HTML рассылки, а не на страницу магазина. Поисковик сайта по ней ничего не проиндексирует.
Не путайте с AMP-письмом: это другой канал и другая вёрстка.
Как отправить AMP-письмо ›
Сейчас карточку собирают в конструкторе массовой рассылки. В триггерах того же экрана пока нет — разметку из рассылки в сценарий вручную копировать не стоит: так же она не заработает. Настройки триггера
Как включить в конструкторе
Откройте массовую рассылку на шаге вёрстки письма. Как отправить рассылку. Карточка включается во вкладке «Настройки» справа: тогл «Карточка в почте», тип, поля и при необходимости сырой JSON. На холсте превью карточки нет — так и задумано: её рисует почтовик во входящих.
- Откройте вкладку «Настройки».
- Включите «Карточка в почте».
- Выберите тип: Mail.ru или Gmail. Превью рядом показывает, как карточка выглядит у почтовика, не в письме.
- Заполните поля формы. Ссылки — с https:// или через переменную.
- Если нужно поправить JSON вручную — раскройте «Дополнительно». Неверный JSON подсветится.
Mail.ru: шапка и смарт-карточки
Три готовые заготовки. В каждой уже стоят нужные поля по правилам Mail.ru — остаётся подставить свои данные заказа, счёта или корзины.
- Шапка заказа — статус, номер, товар, сумма. Статусы: обрабатывается, ожидает оплаты, в доставке, в пункте самовывоза, доставлен, проблема, возвращён, отменён.
- Счёт на оплату — магазин, номер счёта, срок оплаты, сумма. Срок оплаты в заготовке обязателен.
- Заказ / корзина — заказ без статуса шапки: брошенная корзина или подтверждение заказа.
Перед боевой отправкой прогоните JSON в валидаторе Mail.ru. Валидатор Mail.ru. Спецификация: шапка заказа, смарт-карточки.
Без идентификатора отправителя Mail.ru карточка не появится. В тестах на один адрес её часто нет. Это не ошибка конструктора: разметка в HTML есть, показа нет.
Gmail: кнопка, заказ и промо
Промо во вкладке акций — три вида, как принято у почтовика:
- акция и карточка скидки — лого, описание, промокод, даты, ссылка оффера и сайта магазина;
- карусель товаров — до 10 слайдов: картинка, ссылка, заголовок, цена, валюта, скидка;
- одна картинка — лого, одна карточка товара.
В том же списке типов, но уже про само письмо:
- кнопка перехода — подпись и ссылка;
- заказ — магазин, номер, статус, товар, сумма. Это не копия шаблона Mail.ru: набор полей другой.
Документация Google: вкладка акций, кнопка перехода, заказ, регистрация отправителя.
Без регистрации отправителя у Google карточка не появится. На телефоне её видно чаще. В ЕС и в тесте на один адрес обычно нет. Разметка в письме при этом на месте.
Поля подписчика
В поля карточки можно писать те же переменные, что и в тему или тело письма: двойные фигурные скобки. В заготовках уже стоят, например, {{order_id}}, {{order_total}}, {{payment_due}}. Подстановка при отправке — как у любой другой переменной. Как подставить переменную в письмо
Ссылки тоже можно собрать из переменной. Пустое поле ссылки у заказа Gmail просто не добавит кнопку перехода — это нормально, если URL ещё нет.
Перед запуском проверьте персонализацию на третьем шаге рассылки. Как протестировать письмо
Почему карточки нет
Самая частая жалоба: «в письме ничего не вижу». Карточки на холсте и не должно быть. Смотрите HTML письма: если тогл был включён, служебный блок разметки там есть.
Дальше решает почтовик, а не конструктор:
- отправитель не зарегистрирован у Mail.ru или Google;
- письмо ушло на один тестовый адрес;
- ящик в ЕС, промо Gmail там часто не рисуют;
- вы смотрите веб-Gmail на компьютере, а промо живёт во вкладке акций, чаще на телефоне;
- выбран тип не той почты: шапка Mail.ru не станет кнопкой Gmail.
Если разметки в HTML нет — тогл выключен, JSON в «Дополнительно» сломан, или письмо собрали не в этом конструкторе рассылки.
Частые ошибки
- Ждут карточку без регистрации у почтовика и считают это багом редактора.
- Путают с разметкой сайта для поиска или с AMP-письмом.
- Копируют шаблон Mail.ru в тип Gmail или наоборот.
- Ставят ссылку без https:// и без переменной — форма на это ругается.
- В карусели больше 10 слайдов: в письмо уйдёт только десять.
- Правят JSON в «Дополнительно» так, что он перестаёт разбираться, и сохраняют.
Помогает перевести клиентские запросы на язык, понятный команде разработки. Отслеживает баги и тестирует новые фичи. Собирает идеи по улучшению продукта — и следит, чтобы они доехали до прода.
Стать автором блога Mailganer ›
Технический специалист поддержки Mailganer
