Электронное письмо — это гораздо больше, чем текст и визуальное оформление. Техническая сторона здесь играет существенную роль: она определяет, в каком виде шаблон формируется и как обрабатывается после отправки. В частности, одним из важных параметров становится размер письма (или, проще говоря, его вес).

Но что именно означает этот термин? И на какие детали обращать внимание, чтобы техническая часть не вступала в противоречие с креативной задумкой? Разбираем в этой статье.

## Из чего складывается размер электронных писем

Вес письма определяется его HTML-частью. Если используется AMPHTML-часть, её также учитывают. Речь идёт именно о числе байт в коде, а не о длине рассылки по количеству экранов: внешне компактное письмо может оказаться тяжеловесным с технической точки зрения, и наоборот.

Итоговый размер email-шаблона во многом зависит от способа его создания, из-за чего визуально схожие письма могут значительно отличаться по весу. На значение влияют:

- HTML-разметка (таблицы, контейнеры, вложенные блоки, комментарии);<br><br>
- CSS (стили внутри `<style>` и свойства, заданные в атрибутах элементов);<br><br>
- текстовый контент (заголовки, абзацы, кнопки, подписи);<br><br>
- ссылки, пиксели отслеживания, скрытые технические блоки.

Размер изображений и [**анимации**](https://pixcraft.io/ru/blog/animaciya-v-email-rassylkah-rekomendacii-dlya-stabilnogo-otobrazheniya) при расчёте не учитывается. Почтовые клиенты загружают графику отдельно, после того, как обработана разметка письма. Но игнорировать этот параметр нельзя, так как объём графических файлов прямо влияет на восприятие письма в первые секунды после открытия:

- Тяжёлая графика в рассылке загружается дольше, особенно при медленном соединении или если в письме несколько объёмных изображений.<br><br>
- До того, как графические элементы загрузятся, пользователь будет видеть на их месте пустые области или плейсхолдеры.<br><br>
- Если загрузка занимает много времени, то главный визуальный блок может появиться слишком поздно, а первое впечатление будет испорчено.

Поэтому хотя графика не относится к весу кода письма, её оптимизация остаётся важной частью подготовки рассылки.

## Что влияет на предельный вес письма

### Ограничение в Gmail

Многие популярные почтовые клиенты формально [**не ограничивают**](https://www.dailystory.com/blog/html-email-clipping-limits-across-different-mailbox-providers/) размер электронных писем. Одним из немногих исключений является Gmail, который устанавливает фиксированный лимит по размеру HTML-части: **102 КБ**.

Если этот порог превышен, Gmail автоматически обрезает письмо и скрывает нижнюю часть под ссылкой «Показать полностью». Отображение рассылки целиком становится доступным только после дополнительного действия со стороны получателя.

<Img
img="/api/uploads/01_chastsoobsh_2a6c7f3fdd.png"
alt="Обрезка письма в Gmail"
/>

Всё это может повлиять и на восприятие, и на функциональность письма:

- Даже если обрезается только футер, именно там зачастую находятся контактные данные, юридическая информация и ссылка для отписки. Последнее особенно критично: если получатель не находит понятного способа отказаться от рассылки, одной из немногих доступных опций становится нажатие на кнопку «Сообщить о спаме».<br><br>
- Трекинг-пиксели (которые фиксируют факт открытия), как правило, также размещают в нижней части письма. Если она не загружается, то открытие не регистрируется, а статистика искажается. При этом когда автоматические сценарии зависят от того, открыл ли получатель письмо, ошибки начинают затрагивать всю оставшуюся [**цепочку коммуникаций**](https://pixcraft.io/ru/blog/kakie-email-cepochki-must-have-dlya-biznesa).

### Ограничение размера в AMP

Для AMP-контента действуют особые ограничения, указанные в [**спецификации AMP for Email**](https://amp.dev/documentation/guides-and-tutorials/email/learn/email-spec/amp-email-format):

- AMPHTML-часть письма — не более **200 000 байт** (примерно 195 КБ);<br><br>
- CSS внутри `<style amp-custom>` — не более **50 000 байт** (примерно 48 КБ).

Если любой из этих лимитов превышен, AMP-контент не пройдёт валидацию, и вместо него будет показана HTML-версия письма. Следует отметить, что ограничения заданы самим форматом и проверяются на этапе валидации AMP-кода.

### Спам-фильтрация

Почтовые клиенты и антиспам-системы оценивают рассылки по совокупности сигналов, связанных в том числе с содержимым кода письма. При анализе учитываются:

- структура и сложность HTML-разметки;<br><br>
- соотношение полезного контента и технических элементов;<br><br>
- количество трекеров и ссылок;<br><br>
- характер вложений и способ их подключения.

Подозрение вызывает не сам вес письма, а причины, по которым он сформировался: слишком громоздкий код, избыточный трекинг, чрезмерно сложные вложенные конструкции. В подобных случаях большой объём усиливает общий негативный сигнал при антиспам-оценке.

Это особенно важно для массовых рассылок. Если «тяжёлое» письмо с одинаковой структурой отправляется большому числу получателей, репутационные сигналы накапливаются быстрее и влияют на показатели доставляемости.

## Практики оптимизации размера письма

### Очистка HTML от лишних элементов

Незначительные на первый взгляд детали в коде на практике могут составлять существенную часть веса письма:

- **лишние пробелы и табуляции**, используемые для визуального выравнивания кода;<br><br>
- **переносы строк**, которые не имеют практического значения для рендеринга, но увеличивают объём;<br><br>
- **пустые строки** между блоками контента, оставшиеся после правок или копирования.

Эти элементы не участвуют в формировании внешнего вида письма после отправки. Поэтому на финальном этапе подготовки шаблона имеет смысл выполнять минификацию: аккуратное упрощение кода без изменения структуры и дизайна рассылки, что может обеспечить до нескольких килобайт экономии.

### Упрощение табличной структуры

Табличная HTML-разметка (`<table>`, `<tr>`, `<td>`) — один из базовых инструментов email-вёрстки: она обеспечивает стабильность и корректное отображение писем в различных почтовых клиентах. Однако ошибки в её применении способны значительно увеличивать вес кода.

К примеру, лишний объём может возникать из-за таких причин:

- **Чрезмерная вложенность.** Таблицы вложены друг в друга без необходимости и функциональной нагрузки.<br><br>
- **Повторяющиеся контейнеры на одном уровне.** Один и тот же контент помещается в несколько таблиц или ячеек.

Практические способы оптимизации включают:

- **Сокращение глубины вложенности.** Если несколько уровней таблиц выполняют одну и ту же задачу, имеет смысл их объединить. Это уменьшает размер кода без риска для отображения письма.<br><br>
- **Использование `padding` в ячейках таблиц.** Создание отдельных таблиц и строк только ради отступов приводит к росту объёма кода. В этих случаях отступ лучше задавать через `padding` у `<td>`.

Даже небольшая, но аккуратная переработка структуры способна сократить вес письма, особенно в длинных макетах.

### Удаление «мёртвого кода»

В процессе работы над шаблонами часто накапливаются фрагменты кода, которые больше не используются, но сохраняются в письме и тем самым увеличивают его размер. К ним относятся:

- закомментированные блоки из старых версий письма, оставшиеся после переработки структуры;<br><br>
- фрагменты, связанные с завершёнными A/B-тестами;<br><br>
- скрытые элементы, не участвующие в отображении и логике письма.

Удаление неиспользуемого кода не только снижает вес, но и упрощает дальнейшую работу с шаблоном. При этом важно действовать осторожно: часть скрытых элементов может быть необходима для прехедера, fallback-логики или сценариев персонализации. Удалять стоит только те фрагменты, которые точно не участвуют ни в рендеринге, ни в функционале письма.

### Очистка CSS

CSS заметно влияет на вес писем. В частности, это касается шаблонов, которые многократно редактируются. Чаще всего лишний объём формируется из-за:

- повторяющихся наборов CSS-свойств, которые прописываются у множества элементов без необходимости;<br><br>
- стилей и классов, оставшихся от предыдущих вариаций шаблона;<br><br>
- автоматической генерации инлайновых стилей, когда каждому блоку назначается одинаковый набор свойств.

Оптимизация сводится к регулярной ревизии стилей: удалению неиспользуемых правил и сокращению повторений. В [**AMP-письмах**](https://pixcraft.io/ru/blog/kak-vnedrit-amp-pisma-v-vashu-email-strategiyu) контроль CSS становится особенно важным из-за жёстких ограничений размера.

### Создание писем с помощью TJML

[**TJML**](https://pixcraft.io/ru/framework) — фреймворк, созданный командой Pixcraft для комфорта и ускорения вёрстки писем. Он позволяет работать с HTML- и AMP-версиями письма в рамках единой кодовой базы, а готовые шаблоны остаются стабильными в большинстве почтовых клиентов, включая Microsoft Outlook 2003–2024.

В части контроля веса писем TJML предусматривает такие механики:

- Фреймворк позволяет рассчитывать размер кода и сигнализирует о превышении рекомендуемого объёма. Это даёт возможность внести исправления до отправки тестовых писем и финальной сборки рассылки.

<Img
img="/api/uploads/02_tjmlwarn_e794848c22.png"
alt="Предупреждение о весе письма в TJML"
/>

- В TJML доступна оптимизация кода: из него удаляются лишние пробелы и избыточные элементы, не влияющие на отображение письма. В результате формируется корректно работающий шаблон с меньшим итоговым размером.

Подробнее о возможностях TJML и о том, как с его помощью ускорить разработку писем, рассказали в [**этой статье**](https://pixcraft.io/ru/blog/frejmvork-tjml-kak-verstat-pisma-bystro-i-prosto).

### Проверка до запуска рассылки

При отправке писем ESP и CDP обычно оборачивают ссылки в трекерные редиректы. К каждой ссылке добавляются дополнительные параметры, из-за чего они становятся длиннее и увеличивают общий объём кода. В результате письмо может укладываться в лимиты на этапе вёрстки, но превысить их после финальной сборки.

Здесь надёжный способ — тестовая отправка и проверка в том виде, в котором рассылка доставляется получателю. Это позволяет избежать обрезки HTML-письма и ошибок валидации AMP.

## Заключение

Вес письма — не абстрактный параметр, а практический фактор, который влияет на аналитику, доставляемость и восприятие рассылок. Поэтому работу с ним следует рассматривать как часть системной подготовки шаблона: от организации разметки и CSS до проверки итогового кода после обработки на стороне ESP или CDP.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там мы делимся полезными материалами, лайфхаками и идеями для работы.

Рассказываем, что такое размер письма, что он в себя включает, какие факторы могут ограничивать предельный вес писем и как оптимизировать размер email-рассылки.

small_emailwght_cov.png

thumbnail_emailwght_cov.png

emailwght_cov.png

Вес электронного письма: что влияет на размер email-рассылок и как его оптимизировать

Человек просматривает письмо за доли секунды, и любое движение сразу бросается в глаза. Даже простая, но уместная анимация делает письмо гораздо живее.

Но за внешней привлекательностью анимации стоит множество аспектов:

- Где она действительно уместна?<br><br>
- Как сделать письмо ярким и динамичным, но при этом не перегрузить?<br><br>
- Будет ли компонент работать одинаково в разных почтовых клиентах? 

В этой статье рассмотрим возможности и ограничения анимации в электронных письмах, а также способы работы с ней для максимального качества отображения в email-кампании.

## Чем полезна анимация в письмах

Основная задача анимированных элементов — сделать рассылку более выразительной и цепляющей. Динамика способна привлечь внимание эффективнее, чем статичное изображение, и при уместном использовании усиливает общее впечатление от письма.

Анимация подходит для разных сценариев и типов email-кампаний:

- **Промо-письма.** К примеру, анимированный баннер подчёркивает выгоду и делает оффер визуально понятнее. В свою очередь, [**таймер**](https://pixcraft.io/ru/blog/amp-tajmer-ot-pixcraft-chem-on-polezen) с обратным отсчётом подталкивает читателя к действию, пока акция ещё актуальна.<br><br>
- **Онбординг.** Короткая демонстрация интерфейса в приветственных email-цепочках показывает логику сервиса: какой функционал доступен, как он работает и как перейти на следующий шаг. Новый пользователь сразу видит продукт в действии и быстрее понимает его структуру.<br><br>
- **Дайджесты.** Если письмо не требует полноценной [**динамической карточки товаров**](https://pixcraft.io/ru/blog/dinamicheskie-kartochki-tovarov-kak-oni-ustroeny-v-redaktore-pixcraft), небольшая анимация поможет акцентировать нужные позиции. С её помощью можно показать новинку в нескольких ракурсах или выделить товар со скидкой.<br><br>
- **Сервисные письма.** Лёгкие анимированные элементы подходят в том числе для транзакционных сообщений. Например, можно проиллюстрировать статусы заказа, такие как передача курьеру или доставка до пункта выдачи.

<Img
img="/api/uploads/01_trnsctnlanimexm_0db7bae6fb.gif"
alt="Анимация в транзакционном письме"
src="Источник: Really Good Emails"
/>

## Как добавлять анимацию в email-рассылки

Наиболее популярные подходы к добавлению динамики в письма — это GIF и AMP. Понимание их особенностей поможет подобрать нужный инструмент под определённый сценарий.

### GIF

Классический формат анимационных элементов. Он поддерживается подавляющим большинством почтовых клиентов и, как правило, ведёт себя достаточно надёжно. Однако чтобы GIF в письме работал наиболее предсказуемо, следует учитывать несколько важных моментов.

- **Размер.** Оптимальный вариант для email-рассылок — короткая и лёгкая GIF-анимация. Разумно удерживать размер файла **в пределах 1 МБ** или даже ниже, чтобы письмо загружалось быстрее.<br><br>
- **Цвета и детализация.** Формат поддерживает только **256 цветов**, а сложные градиенты и переходы между кадрами теряют качество при сжатии. Для аккуратного результата лучше использовать простые формы, фоны и контуры.<br><br>
- **Alt-текст.** Служит страховкой, если элемент не загружается из-за низкой скорости или фильтров в почтовом клиенте. Короткое описание сохраняет логику письма и даёт читателю понять, какой элемент должен быть на месте анимации.

### AMP

Технология AMP расширяет возможности создания писем, добавляя интерактивные элементы. С её помощью можно создавать листаемые галереи, [**интерактивные опросы**](https://pixcraft.io/ru/blog/nps-oprosy-zachem-oni-nuzhny-i-kak-ih-realizovat-v-Pixcraft) и более сложные визуальные сценарии, недоступные в классических форматах.

AMP работает в том числе и с классической GIF-анимацией. Для этого используются два компонента:

- `amp-img`;<br><br>
- `amp-anim`. 

Оба подходят для добавления GIF-файлов, но `amp-anim` — специализированный компонент, предлагающий особое преимущество: анимация работает, пока элемент находится в зоне видимости. Как только пользователь прокручивает письмо — `amp-anim` останавливает воспроизведение и снижает нагрузку на ресурсы, что может быть полезно в длинных рассылках и на мобильных устройствах.

Внутрь компонента можно добавить статичное изображение-placeholder. Оно появляется до загрузки GIF и помогает избежать пустого блока, если соединение медленное или файл слишком тяжёлый.

Сам элемент поддерживает стилизацию через CSS и вписывается в макет как обычный AMP-блок. Ниже — пример разметки `amp-anim`:

```xml
<amp-anim width="500" height="400" src="animation.gif">
  <amp-img placeholder width="500" height="400" src="placeholder.jpg">
  </amp-img>
</amp-anim>
```

## Как работает анимация в визуальном редакторе Pixcraft

В Pixcraft добавить анимированный элемент к письму так же просто, как вставить обычную иллюстрацию. Всё, что для этого требуется — перетащить на холст примитив «Изображение» и загрузить файл со своего устройства либо указать ссылку. GIF интегрируется в логику письма без лишних действий и сразу появляется в макете.

<Img
img="/api/uploads/02_animatspixcr_ce1ae079f7.gif"
alt="Анимация в Pixcraft"
/>

Дальше его можно настроить как и любое другое изображение. В панели справа доступны параметры, которые определяют внешний вид и поведение блока:

- ширина и высота;<br><br>
- выравнивание, скругления углов и отступы;<br><br>
- толщина, текстура и цвет рамки;<br><br>
- внешняя ссылка для перехода по клику;<br><br>
- alt-текст.

<Img
img="/api/uploads/03_nastranim_e23b8278da.png"
alt="Настройка изображения в Pixcraft"
/>

Убедиться, что элемент ведёт себя предсказуемо в разных условиях, можно с помощью функции предпросмотра. Она показывает, как письмо выглядит в десктопной и мобильной версиях, а также в светлой или тёмной теме. 

Предпросмотр особенно важен для анимации с мелкими деталями, которые могут сливаться с фоном или становиться незаметными при уменьшении масштаба. Проверка на этом этапе помогает уловить такие моменты до отправки и, при необходимости, скорректировать изображение.

<Img
img="/api/uploads/04_predprosmanim_9fd42f7914.gif"
alt="Предпросмотр письма в Pixcraft"
/>

Шаблоны писем также можно дополнять AMP-анимацией. Например, для этого можно использовать готовый компонент «Карусель»: галерею изображений с возможностью перелистывания и поддержкой различных графических форматов, включая GIF.

Помимо этого необходимые элементы можно включить непосредственно в код письма после подготовки основной структуры в визуальном редакторе. Для этого:

- экспортируйте AMP-версию шаблона;<br><br>
- откройте полученный файл в редакторе кода;<br><br>
- добавьте в письмо нужные AMP-компоненты.

## Что важно учитывать при работе с анимацией в email-рассылках

### Совместимость с Outlook

Хотя в большинстве почтовых сервисов GIF работает без сбоев, проблемы могут возникнуть с некоторыми версиями Outlook для Windows. Из-за рендеринга на движке Word анимация в них застывает на первом кадре и не воспроизводится дальше.

На этот случай стоит заранее подготовить запасные варианты:

- использовать условные комментарии, чтобы заменить GIF статичным изображением там, где анимация не работает;<br><br>
- сделать выразительный первый кадр, который передаёт смысл блока без движения и выглядит как полноценная иллюстрация. Это особенно важно, если компонент содержит значимую информацию: дату акции, скидку, ключевой элемент предложения.

### Выразительность и баланс

Анимация бывает функциональной и декоративной. Первая направляет внимание, показывает состояние или делает блок более информативным, а вторая задаёт атмосферу и настроение. Но в любом из этих случаев необходимо, чтобы анимация сохраняла уместность.

Для этого она должна:

- поддерживать структуру письма, а не перетягивать внимание туда, где нет основной мысли;<br><br>
- сохранять читаемость основного текста и чистоту композиции;<br><br>
- не загромождать и не перегружать вёрстку.

### Лимит внимания

Рассылки читают быстро, в среднем — всего несколько секунд, просматривая письмо «по диагонали». В подобных условиях сложная и длинная анимация просто не успевает раскрыться, а детали и смысл теряются.

Поэтому лучшим решением остаются простые сценарии и умеренная длительность: смена состояния, лёгкое появление или аккуратное переключение. Чем меньше объектов двигается на экране одновременно, тем проще и точнее воспринимается блок.

### Работа на маленьких экранах

Сегодня смартфоны — основной канал для чтения писем, и многие мобильные клиенты также поддерживают воспроизведение анимации. Однако здесь можно столкнуться с неправильным отображением из-за размера экрана.

Перед отправкой важно проверить:

- не обрезается ли анимация;<br><br>
- остаётся ли читаемым текст в её составе;<br><br>
- сохраняется ли общий смысл при уменьшении масштаба.

В случае несоответствий анимированные блоки необходимо адаптировать специально для мобильной версии: увеличить важные детали, упростить графику, а в некоторых случаях даже заменить анимацию статичным кадром.

## Поддерживается ли видео в письмах (и стоит ли его использовать)

Идея встроить видео прямо в рассылку может выглядеть привлекательной, но такую технологию поддерживают лишь [**единичные клиенты**](https://www.caniemail.com/features/html-video/), например, Apple Mail. В большинстве email-сервисов ролик внутри письма просто не запустится: на его месте будет отображаться либо пустое место, либо fallback-контент, если он предусмотрен. 

Поэтому вместо встроенного видео закрепился более надёжный сценарий. В письмо вставляют статичный кадр с иконкой воспроизведения. Читатель нажимает на него и переходит на страницу с плеером: например, сайт бренда или видеохостинг. Подход работает стабильно, но подразумевает именно переход на сторонний ресурс, а не inline-видео.

<Img
img="/api/uploads/05_playbttnexm_9f29c65836.png"
alt="Кнопка Play в письме"
src="Источник: Really Good Emails"
/>

Если цель — просто добавить динамику, выделить акцент или сделать письмо визуально разнообразным, гораздо эффективнее и безопаснее использовать обычную анимацию.

## Заключение

Анимация в письмах влияет на то, какое впечатление остаётся у человека после прочтения. Важно, чтобы формат, графика и мелкие детали смотрелись как единое целое. Хорошая анимация не забирает всё внимание на себя, а спокойно поддерживает основную идею письма — в этом её польза.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там мы делимся полезными материалами, лайфхаками и идеями для работы.

Рассказываем, как использовать анимацию в рассылках: форматы, отображение в email-клиентах и советы по работе с GIF и AMP.

small_anim_eml_cover.png

thumbnail_anim_eml_cover.png

anim_eml_cover.png

Анимация в email-рассылках: рекомендации для стабильного отображения

Дедлайны в письмах — мощный триггер, подталкивающий читателей к целевым действиям. Когда оставшееся время отсчитывается визуально с помощью таймера, финальный срок становится более ощутимым, а скорость принятия решений способна заметно вырасти.

В статье расскажем про AMP-таймер от Pixcraft и чем он выделяется на фоне других вариантов реализации этого компонента, а также разберём его архитектуру и логику работы в рассылках.

## Зачем добавлять таймер в письмо
Таймеры усиливают сценарии коммуникации, переводя дедлайн из расплывчатого обещания в измеримую величину. Время воспринимается как ограниченный ресурс, а подписчики получают повод действовать незамедлительно: возникает так называемый **Fear of Missing Out** (страх упустить выгоду), за счёт которого становится труднее откладывать решение «на потом».

Ниже — маркетинговые сценарии, где таймеры наиболее эффективны.

<Table>
| Сценарий | Польза таймеров |
| --------- | ---------------------------------- |
| **Срочные акции и распродажи** | Формулировки вида «Акция закончится через 5 часов 27 минут» стимулируют к покупке и усиливают ощущение эксклюзивности. В комбинации с дополнительной выгодой (например, скидкой или бонусом) растёт вероятность конверсии. |
| **Лимитированные предложения** | Такие сценарии, как промокод с датой истечения, бесплатная доставка «при заказе до 22:00» или ранний доступ к продукту требуют точных рамок. Таймер фиксирует границы времени, подталкивая подписчика к действию. |
| **Мероприятия (вебинары, онлайн-курсы и другие события)** | Надпись «До начала осталось 04:30:12» побуждает скорее завершить регистрацию, чтобы забронировать место (особенно когда их количество ограничено). |
| **Оформление заказа или подписки** | Таймер помогает в ситуациях, когда клиент сомневается перед решением. Сообщение «Оформите заказ в течение 2 часов и получите подарок» сочетает дедлайн с выгодой и действует эффективнее, чем абстрактное «Поторопитесь». |
</Table>

## Технические пределы привычных таймеров
### GIF-таймеры
Долгое время единственным способом отобразить обратный отсчёт в рассылках была GIF-анимация. Такие таймеры работают следующим образом: сервер генерирует изображение с актуальным оставшимся временем, а почтовый клиент подгружает его при открытии письма.

Подход считается классическим, но имеет значительные ограничения:

**1. Ресурсоёмкость и цена.** Чтобы показать корректное значение в момент открытия, система должна сгенерировать анимацию с актуальным количеством оставшегося времени. То есть, генерировать новую анимацию потребуется в зависимости от числа запросов, вплоть до каждой секунды. Это требует весомых вычислительных мощностей и стоит дорого.

**2. Кэширование изображений в почтовых клиентах.** Почтовые сервисы ускоряют загрузку писем за счёт кэша. Но в случае с GIF-таймерами при повторном просмотре читатель увидит не отсчёт в реальном времени, а кэшированное значение. 

Для обхода этого ограничения используют персонализированные ссылки, случайные query-параметры или специальные заголовки запроса, но на практике гарантий нет. Как итог, таймер попросту теряет свою главную особенность — показ оставшегося времени.

**3. Длительность и вес анимации.** Размер GIF-файлов растёт вместе с числом кадров и плавностью анимации. Чтобы уложиться в допустимые рамки, длину цикла обычно ограничивают 10–20 секундами. Спустя некоторое время анимация перестаёт воспроизводиться или начинается заново.

При этом даже короткий таймер может занимать сотни килобайт или несколько мегабайт. В письме с баннерами, иллюстрациями и кнопками это сильно влияет на суммарный вес и скорость загрузки.

### amp-timeago
`amp-timeago` — это стандартный amp-компонент для отображения относительного времени в текстовом виде. Он выводит простые значения в зависимости от указанной даты, например, «через 16 часов», «через 3 месяца» или «через год».

<Img
img="/api/uploads/01_timeagoexmp_693c36a831.png"
alt="Компонент amp-timeago"
src="Пример отображения времени с помощью amp-timeago. Источник: amp.dev"
/>

Ключевые особенности `amp-timeago`:

- Корректно пересчитывает оставшееся время вне зависимости от момента открытия письма.<br><br>
- Прост в подключении, не содержит сложных элементов.<br><br>
- Поддерживает множество языков (по умолчанию установлена локаль `en`).

Но при этом он слабо применим для маркетинговых писем, где важен эстетический и эмоциональный эффект. Этому мешают полное отсутствие какой-либо анимации и ощущения «тиканья часов», а также малый контроль над визуальной формой. Компонент воспринимается как статичный текст, а не как счётчик.

Несмотря на это, `amp-timeago` подходит, когда необходимо просто проинформировать аудиторию. К примеру, его можно использовать в технических уведомлениях, таких как «Подтвердите заказ в течение 2 часов» или «Подписка автоматически продлится через 3 дня». Однако в маркетинговых письмах он не заменит полноценный таймер, ориентированный на вовлечение и конверсии.

## Как работает AMP-таймер от Pixcraft

Pixcraft предлагает альтернативу привычным GIF-таймерам и `amp-timeago`. Вместо потоковой генерации картинок задействуется лёгкая AMP-механика, а сам таймер формируется прямо в письме. Это обеспечивает полноценное отображение счётчика времени и стабильную работу без тяжёлых файлов и проблем с кэшированием.

<Img
img="/api/uploads/02_timeranim_ac2a926f74.gif"
alt="AMP-таймер Pixcraft"
/>

### Общая логика работы AMP-таймера

Каждый фрагмент таймера представляет собой отдельную AMP-карусель. Отсчёт оставшегося времени привязан к установленному дедлайну. Например, если финальной точкой станет 31 декабря 2025 года в 23:59, то значение будет выглядеть так: 

```xml
src="https://app.pixcraft.io/api/timer?date=2025-12-31&time=23-59"
```

Сервер Pixcraft возвращает текущее состояние обратного отсчёта, а письмо рендерит его через AMP-компоненты. Числа визуализируются в рассылке и создают эффект тикающего таймера.

В основе компонента лежат: 

- **amp-list** — делает запрос к серверу и получает данные о том, сколько времени осталось до дедлайна.<br><br>
- **amp-mustache** — подставляет полученные данные в шаблон письма.<br><br>
- **amp-carousel** — визуально перелистывает часы, минуты или секунды.

### Как отображаются часы

Сервер возвращает два значения:

- `hours.i0` — текущее количество часов до дедлайна.<br><br>
- `hours.i1` — следующее значение (уменьшенное на 1).

То есть, если до конца акции осталось 2 часа 30 минут, то `hours.i0` будет иметь значение «2», а `hours.i1` — «1». Эти значения перелистываются в карусели: сначала показывается «2», а когда текущий час заканчивается, происходит автопереключение `hours.i0` на «1» и `hours.i1` — на «0» . Тайминг перелистывания задаётся параметром `delay="{{ hour_left }}"`: он определяет время, оставшееся до конца текущего часа.

### Как отображаются минуты

Здесь формируется массив из 60 элементов (от `minutes.i0` до `minutes.i59`), а карусель перелистывает каждую минуту с задержкой **60 000 мс**. При этом, чтобы время было корректным, первой позицией в массиве автоматически становится не «нулевая», а текущая минута относительно дедлайна. 

К примеру, если до финальной точки остаётся 1 час 30 минут, логика будет работать следующим образом:

- В массиве первым идёт значение `30`.<br><br>
- Далее значение меняется каждую минуту: `29`, `28` и далее до `0`. Затем оно переключается на `59`, после на `58` и так до `31`.<br><br>
- После этого отсчёт начинается заново с `30`. Таким образом возможно зациклить корректный ход времени в минутах.

### Как отображаются секунды

Для простоты и надёжности секунды реализованы как **циклическая имитация**, где ежесекундно происходит переключение числовых значений. Карусель секунд всегда начинается с `59`, после чего значение меняется на `58`, `57` и вплоть до `00`, а затем снова возвращается к `59`. 

### Что происходит после дедлайна

Общую задержку до дедлайна контролирует элемент `time_left`. Он управляет моментом, когда таймер по истечении времени должен сменить состояние. В отличие от GIF-анимации, здесь отсчёт **меняется на другой блок**, в рамках которого можно задействовать новый сценарий. Например:

- Показать лаконичное сообщение: «Акция завершилась».<br><br>
- Предложить альтернативу: «Глобальная распродажа закончилась, но доступна подборка со скидками до −30%» и кнопка на актуальный раздел.

<Img
img="/api/uploads/03_timerfin_992c22276f.png"
alt="Финальный слайд AMP-таймера Pixcraft"
/>

## Сильные и слабые стороны AMP-таймера

Таймер от Pixcraft предлагает заметные преимущества, которые делают его полезным инструментом для email-маркетинга:

- **Точность и устойчивость отображения.** AMP-таймер не зависит от кэширования изображений. Счётчик показывает актуальные данные даже после закрытия письма и возвращения к нему спустя время.<br><br>
- **Лёгкий вес.** Формирование таймера не требует рендеринга десятков кадров GIF-анимации. Это позволяет значительно ускорить процесс загрузки письма.<br><br>
- **Контроль над состоянием после дедлайна.** AMP-решение позволяет заранее прописать сценарий окончания акции: от простого сообщения до более сложных подходов.

Однако вместе с плюсами у AMP-таймера есть и ограничения, о которых следует помнить:

- **Условные секунды.** Секундная карусель стартует с `59` независимо от системного времени: настроить кастомное отображение первой секунды на текущий момент нельзя. Но хотя в инженерном смысле это компромисс, визуально эффект выглядит естественно и отлично подходит для маркетинговых задач.<br><br>
- **Необходимость поддержки AMP.** Таймер работает только в тех почтовых клиентах, которые совместимы с технологией AMP (например, Mail.ru, Gmail, Yahoo и AOL). Для остальных клиентов следует предусмотреть fallback: статичный блок или классическую GIF-анимацию.

## Как включить AMP-таймер в письмо

Реализация компонента в конструкторе Pixcraft запланирована в ближайшем будущем, но включить AMP-таймер в письмо можно уже сегодня с помощью готового кода. Достаточно лишь добавить в него нужные значения даты и времени, указать сообщение после окончания отсчёта, настроить визуальную часть — и можно добавлять таймер к вашему шаблону.

▶️ [**Забрать код AMP-таймера от Pixcraft**](https://codepen.io/Todd-the-flexboxer/pen/pvgRXjP)

<Img
img="/api/uploads/04_codeexampl_e449534934.png"
alt="Код AMP-таймера Pixcraft"
/>

## Заключение

С AMP-таймером от Pixcraft вы получаете полное управление динамикой времени в письме. Отсутствие тяжелых файлов и проблем с кэшем картинок, а также аккуратная смена состояния после наступления дедлайна, делают компонент удобным и гибким в использовании. 

В скором времени таймер будет доступен прямо в интерфейсе Pixcraft. Однако вы можете подключить его через код и сделать письма конверсионно сильнее уже сегодня.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там мы делимся полезными материалами, лайфхаками и идеями для работы.

В статье расскажем о том, как работает AMP-таймер от Pixcraft, в чём его преимущества по сравнению с другими типами таймеров и как включить его в ваши email-рассылки.

small_timer_covr.png

thumbnail_timer_covr.png

timer_covr.png

AMP-таймер от Pixcraft: чем он полезен и как добавить его в рассылку 

Классический сценарий подтверждения через email устроен так: пользователь нажимает кнопку и попадает на сайт, где фиксируется результат действия. Но что, если убрать дополнительные шаги в виде редиректов и ожидания загрузки страниц, предоставив читателю возможность завершить действие прямо в почтовом клиенте?

Для этой цели в Pixcraft предусмотрен особый компонент — **AMP-forward-link**. В статье рассмотрим его подробнее: что он собой представляет, как работает в письмах и как вы сможете включить его в свои рассылки.

## Что такое AMP-forward-link
С этим AMP-компонентом весь процесс подтверждения действия переносится внутрь письма. Кнопка работает без перенаправлений и открытия новых вкладок: фактически пользователь отправляет форму, а переход происходит уже на стороне сервера в фоновом режиме.

Таким образом, подтверждение действий в письме становится:

- **более удобным** — обеспечивается быстрый отклик, исключаются лишние клики и необходимость переходить на сайт;<br><br>
- **более надёжным** — риск потерять внимание читателя на промежуточных шагах сводится к минимуму.

## Для чего AMP-forward-link используется на практике
Ниже рассмотрим три базовых возможности применения **AMP-forward-link**, которые позволят извлечь максимум пользы из этого компонента.

### Подтверждение подписки (Double Opt-In)
Типовой сценарий, где **AMP-forward-link** особенно уместен. Получатель открывает письмо и нажимает «Подтвердить». Компонент определяет действие и тут же показывает сообщение об успешном завершении процесса (например: «Готово! Подписка активирована»). С позиции пользователя всё выглядит максимально просто: одно нажатие, быстрая реакция и обновление статуса.

### Сбор дополнительных сведений
Сразу после успешного клика помимо сообщения можно продемонстрировать дополнительную форму. К примеру, она может включать:

- **Интересы для сегментации**. Получатель сам выбирает наиболее интересные для себя рубрики будущих рассылок из нескольких категорий. За счёт этого база сегментируется по интересам, а подписчик получает релевантный контент с первого дня, что способно повлиять на открываемость и снизить риск отписки.<br><br>
- **Расширение профиля**. Письма с подтверждением подписки традиционно показывают очень высокие OR и CTR. Когда пользователь нажал кнопку и подтвердил подписку, его внимание уже сосредоточено на бренде. В этот момент можно аккуратно предложить заполнить дополнительные данные о себе — имя, номер телефона или другую информацию.<br><br>
Эффективность такого подхода демонстрируется на практике. Например, после подтверждения подписки Everyday Horoscopes предложил пользователям указать номер телефона. В результате конверсия **превысила 40%**, то есть поделиться номером согласился почти каждый второй подписчик.

<Img
img="/api/uploads/01_horocexamp_f23f7b8b78.png"
alt="Ввод номера после подтверждения адреса"
/>

## Отписка с обратной связью
Механика работает как на подписку, так и на отписку. Здесь пользователь нажимает на кнопку, после чего в письме появляется не простое сообщение «Вы успешно отписались от рассылки», а форма обратной связи, например, «Пожалуйста, расскажите, почему вы решили отписаться».

Это полезно тем, что: 

- вы сразу получаете структурированную причину отказа, которая может пригодиться для дальнейшей аналитики;<br><br>
- прямо в письме можно предложить мягкую альтернативу: сократить частоту рассылок, поменять тематику или оставить только критически важные уведомления. Так вы сможете сохранить часть аудитории.

## Как создать AMP-forward-link в Pixcraft
Аналогично другим AMP-компонентам, процесс создания **AMP-forward-link** начинается с меню **«Компоненты»** в рабочем пространстве вашего профиля.

<Img
img="/api/uploads/02_moyoprostr_ab881c470b.png"
alt="Рабочее пространство профиля в Pixcraft"
/>

Нажмите **«Новый компонент»** и в списке доступных типов выберите **Link**. После этого система предложит заполнить:

- **Название.** Укажите любое подходящее имя компонента, например, «Подтверждение подписки» или «Отписка с обратной связью». Это упростит навигацию в будущем.<br><br>
- **Описание.** Опционально добавьте пояснение, к примеру, для чего или в какой именно кампании задействуется этот компонент. Поле можно оставить пустым, но оно будет полезно для более точного понимания сценариев использования, особенно если над проектами работают сразу несколько пользователей.

<Img
img="/api/uploads/03_sozdssylk_0a0d68a659.png"
alt="Создание компонента в Pixcraft"
/>

Далее нажмите **«Создать компонент»**, после чего откроется новая страница с настройками. В отличие от других компонентов со множеством опций, таких как [**формы**](https://pixcraft.io/ru/blog/kak-sozdavat-i-ispolzovat-formy-v-pisme) или [**«Живая лента»**](https://pixcraft.io/ru/blog/zhivaya-lenta-v-amp-rassylkah-novyj-uroven-vovlecheniya), у **AMP-forward-link** необходимо указать только два обязательных значения:

**1. Сообщение об успешной отправке.** Это текст, который увидит пользователь сразу после подтверждения действия. Он может быть лаконичным («Спасибо, ваша подписка подтверждена!») или более развернутым, с дополнительными инструкциями или приглашением к следующему шагу.<br><br>
**2. Домен для ссылок.** Здесь указывается домен confirm-ссылки. Обратите внимание: если ваш ESP использует систему трекинга кликов, домен может подменяться при отправке письма.

<Img
img="/api/uploads/04_ukazdomen_bc19221963.png"
alt="Настройка компонента в Pixcraft"
/>

Механика работы **AMP-forward-link** построена на отправке формы и фиксирует действие напрямую через ссылку подтверждения. Это значит, что нет необходимости связывать письмо с внешними системами через вебхуки или настраивать дополнительные серверные события.

Как только параметры заполнены, нажмите **«Сохранить»**. Система перенаправит вас на следующий экран, где будут доступны **Action-xhr** (URL, на который уходит запрос при нажатии кнопки подтверждения), готовый к работе **HTML-код**, а также более компактная **TJML-версия кода**.

## Структура сгенерированного кода
HTML-код состоит из двух частей: блок для шапки письма `<head>` и блок для тела письма `<body>`. В блоке `<head>` подключаются обязательные AMP-скрипты, которые обеспечивают корректную работу формы, обработку действий пользователя и отображение сообщений.

Однако вся основная логика работы компонента формируется в `<body>`. Именно здесь размещается форма с атрибутом `action-xhr`:

```xml
<form method="POST" action-xhr="https://app.pixcraft.io/amp/post/XXXX?key=YOUR_KEY" on="submit-success: AMP.setState({confFormXXXX: true})">
```

Запрос обрабатывается на стороне Pixcraft. В свою очередь, параметр `on="submit-success: AMP.setState(...)"` определяет, что произойдёт после успешного выполнения действия.

**Ключевым элементом AMP-forward-link является передача самой ссылки подтверждения.** Это делается через скрытое поле `input` с `name=”link”`:

```xml
<input type="hidden" name="link" value="${confirm}">
```

Здесь `${confirm}` необходимо заменить на подстановку ссылки подтверждения в синтаксисе вашей платформы.

Чтобы у пользователя не возникало ощущения, будто бы ничего не происходит, во время отправки запроса отображается блок загрузки:

```xml
 <div class="loading" submitting>
        Loading...
  </div>
```

Это может быть простая надпись с любым текстом (например, «Пожалуйста, подождите» или «Ваш запрос обрабатывается»). При желании вместо обычного текста можно использовать изображение или анимацию. В этом случае уместно применять абсолютное позиционирование, чтобы визуальные элементы показывались поверх формы и выглядели опрятно и современно.

В дополнение к привычному HTML-коду также автоматически формируется [**код TJML**](https://pixcraft.io/ru/framework). Это специальный синтаксис разметки шаблона, задача которого — упростить и ускорить вёрстку как AMP, так и обычных HTML-писем.

В сравнении с HTML он предлагает такие преимущества:

- **Компактность.** Код TJML выглядит короче и легче, чем AMP-HTML-реализация.<br><br>
- **Автоматизация.** В отличие от HTML-версии, здесь не требуется вручную подключать `amp-bind`, `amp-form` и `amp-mustache`.

TJML-код для **AMP-forward-link** выглядит следующим образом:

```xml
<m-form action="https://app.pixcraft.io/amp/post/XXXX?key=YOUR_KEY" on="submit-success: AMP.setState({confFormXXXX: true})">
  <div data-amp-hidden="confFormXXXX">
    <m-button bgcolor="#7D4DA3">Confirm Subscription</m-button>
    <input type="hidden" name="link" value="${confirm}">
  </div>
  <m-form-success>[[success]]</m-form-success>
  <div class="loading" submitting>
        Loading...
  </div>
</m-form>
```

Включить **AMP-forward-link** в рассылки легко: просто встройте готовый код в письмо. После того, как рассылка будет запущена в работу, вы сможете:

- **отслеживать,** сколько пользователей подтвердили действие через письмо;<br><br>
- **собирать и анализировать дополнительные данные,** если в письме предусмотрен второй экран с формой.

## Заключение
**AMP-forward-link** добавляет в письма расширенную возможность подтверждения действий. Благодаря Pixcraft создать компонент и использовать его как часть email-кампаний возможно без сложной разработки: достаточно вставить готовый код в существующий шаблон письма.

[**Попробуйте Pixcraft**](https://app.pixcraft.io/user/register) бесплатно в течение 14 дней и оцените все возможности нашего визуального конструктора писем. А если вы хотите прокачать навыки в email-маркетинге — загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там мы делимся полезными материалами, лайфхаками и идеями для работы.

В статье расскажем о том, как подтверждать действия в письмах без перехода на сайт с помощью компонента AMP-forward-link и как создать этот компонент в конструкторе писем Pixcraft.

small_image (1).png

thumbnail_image (1).png

image (1).png

AMP-forward-link: как подтверждать действия в письме, не покидая почтового клиента

Рассказываем, как с помощью компонента «Живая лента» добавить возможность оставлять комментарии прямо в письме и превратить рассылку в пространство для общения. 

small_cov_pic (1).png

thumbnail_cov_pic (1).png

cov_pic (1).png

«Живая лента» в AMP-рассылках: новый уровень вовлечения

Хотите узнать, насколько аудитория довольна вашим продуктом и готова его рекомендовать? В этом поможет **NPS‑опрос** — быстрый способ понять реальную картину клиентского восприятия.

В этой статье расскажем, как работают NPS-опросы, а также как быстро и наглядно настроить их в email-рассылке с помощью **Pixcraft**.
## Что такое NPS
**Net Promoter Score** — это индекс лояльности клиентов, который показывает, насколько они готовы рекомендовать ваш продукт или компанию своему окружению. Он позволяет измерить уровень доверия и удовлетворённости без использования длинных анкет.

Методика проста: вы задаёте ключевой вопрос, например, «Насколько вероятно, что вы порекомендуете наш продукт другу или коллеге?». Клиент выбирает оценку и в зависимости от ответа попадает в одну из трёх категорий.
<br><br>
<Table>
| Категория  | Описание               |
| --------- | ------------------------ |
| **Промоутеры (оценка 9–10)** | В полной мере довольны продуктом и готовы активно рекомендовать его другим. Часто именно они становятся «неофициальными амбассадорами» бренда: делятся положительными отзывами и приводят новых пользователей. |
| **Нейтралы (оценка 7–8)** | Не испытывают явного недовольства, но и не проявляют яркого энтузиазма. Они продолжают пользоваться продуктом, но не видят весомой причины делиться опытом. Если почувствуют, что качество продукта стало хуже, могут легко перейти к конкурентам. |
| **Критики (оценка 0–6)** | Недовольные клиенты, у которых возникают проблемы с продуктом, сервисом или коммуникацией. Их мнения особенно важны: именно они чаще других делятся отзывами, а негативные отклики напрямую влияют на репутацию и могут показать слабые места продукта или сервиса. |
</Table>
<br><br>
Значение рассчитывается путём вычитания числа Критиков из числа Промоутеров. Например, если 50% опрошенных поставили оценку 10 или 9, а 20% — от 0 до 6, то NPS будет равен **50 – 20 = 30**. Чем выше показатель, тем лояльнее ваша клиентская база и больше шансов на органический рост бизнеса за счёт рекомендаций.

NPS может быть отрицательным. В таком случае это повод немедленно выяснить, чем именно недовольны клиенты и как это можно исправить.
## Зачем бизнесу знать NPS
NPS-опросы не просто дают общее представление о клиентской лояльности, а позволяют компаниям заранее видеть риски, находить зоны роста и действовать на опережение.

Вот что делает NPS полезным для бизнеса:

- **Понимание реального клиентского восприятия**. Цифры продаж или посещаемость сайта не всегда отражают настроение клиентов. NPS показывает, насколько аудитория в действительности довольна вашим продуктом.

- **Быстрое выявление проблемных точек**. Если доля критиков растёт, это сигнал о сбоях в сервисе, неудобных интерфейсах или других слабых местах. Чем раньше вы их заметите, тем проще будет исправить ситуацию.

- **Снижение оттока клиентов**. Негативный опыт редко проявляется открыто: зачастую люди просто перестают использовать продукт. NPS позволяет вовремя заметить недовольных пользователей и начать работу с ними с помощью улучшений сервиса, поддержки и бонусов.

- **Развитие реферальных каналов**. Промоутеры — это фактически ваши рекламные агенты, зачастую искренне готовые рекомендовать продукт. Определив таких клиентов, можно поддержать их энтузиазм через программы лояльности и превратить сарафанное радио в источник органического роста.

Встраивать NPS-опросы можно непосредственно в email-кампании. Это даёт бизнесу уникальные преимущества:

- **Быстрая обратная связь**. Письма с NPS‑опросами позволяют получать ответы сразу после взаимодействия клиента с продуктом, когда эмоции ещё свежи. Такой формат позволяет собрать достоверные оценки без лишних задержек.

- **Анализ динамики на разных этапах пути клиента**. Вы можете увидеть, как меняется отношение пользователя к продукту в разных кампаниях и на каких точках соприкосновения возникают риски оттока.

- **Сегментация и автоматизация действий**. Оценки позволяют автоматически сегментировать аудиторию на Промоутеров, Нейтралов и Критиков. Впоследствии вы сможете запускать для каждой группы персонализированные сценарии, такие как бонусы или удерживающие кампании.

Следует помнить, что NPS — не разовый опрос, а часть системной аналитики: он работает эффективно только при регулярном применении. Необходимо учитывать сезонность, разные сегменты аудитории и внешние факторы, которые оказывают влияние на результат.

Особое внимание стоит уделять сопровождающим комментариям. За числовой оценкой может скрываться конкретная проблема или инсайт, который поможет вам улучшить продукт и удержать клиентов.
## Как реализовать NPS-опрос в Pixcraft
В Pixcraft есть два подхода к созданию NPS-опросов: быстрое добавление AMP-формы прямо в шаблон письма через визуальный редактор и создание отдельного AMP-компонента. Рассмотрим подробнее каждый из них.
### AMP-форма в письме
Если требуется оперативно собрать NPS-опрос, добавьте интерактивную AMP-форму в шаблон. Этот способ отлично подходит для срочных рассылок и позволяет создать форму опроса без сложной подготовки. 

Пошагово процесс выглядит так:

- На панели слева нажмите «Плюс» и перенесите примитив «Форма» в необходимое место на шаблоне.

- Выберите тип вашей формы. Для NPS-опросов подходит Radio — выбор единственного варианта из нескольких предложенных.

<Img
img="/api/uploads/01_label_3257ee1f5e.png"
alt="Выбор типа и опций формы"
/>

- Настройте ваш NPS-опрос. Добавьте числовую шкалу или другие варианты выбора, короткий вопрос (например, «Насколько вероятно, что вы порекомендуете нас?») и добавьте призыв к действию (call-to-action) на кнопку.

- Кастомизируйте оформление. Подберите цвета и шрифты, настройте отступы и скругления, чтобы форма органично вписывалась в дизайн письма.

<Img
img="/api/uploads/02_opros_fbaf8c1f06.png"
alt="Готовый NPS-опрос"
/>

### Отдельный AMP-компонент
Вы также можете собрать компонент вручную и встроить его в готовый шаблон. Это удобно, если у вас уже есть HTML‑письмо, которое вы хотите дополнить интерактивным опросом. Достаточно пропустить письмо через [**конвертер Pixcraft**](https://pixcraft.io/ru/converter), чтобы получить готовую AMP‑версию, в которую можно легко добавить NPS‑форму или другой интерактивный элемент.

Вот как создать отдельный AMP-компонент в Pixcraft:

- Перейдите в раздел «Компоненты» и нажмите «Новый компонент». Откроется окно, где можно указать название и описание, а также выбрать тип компонента.

<Img
img="/api/uploads/03_komponent_77585b8ac6.png"
alt="Экран создания компонента"
/>

- Выберите заготовку формы. Для NPS-опроса подойдёт **Rating** или **Custom**. Rating сразу создаст простую числовую шкалу, а Custom предоставит пустую форму, которую можно заполнить необходимыми полями: особенно полезно, если вы хотите включить не только опрос, но также поле для комментария.

- Настройте содержимое формы. Добавьте текст, шкалу оценок, сообщение об успешной отправке и, если потребуется, дополнительные элементы.

<Img
img="/api/uploads/04_nastroika_27d363089c.png"
alt="Настройка форма опроса"
/>

- Нажмите «Сохранить». Вы получите готовый код HTML (AMP), а также [**TJML**](https://pixcraft.io/ru/framework), которые можно кастомизировать по своему усмотрению.

<Img
img="/api/uploads/05_kod_457def3720.png"
alt="HTML-код формы опроса"
/>

Чтобы подключить опрос к вашему письму, добавьте в него сгенерированный код формы. Для корректной работы также необходимо подключить скрипты ```amp-bind```, ```amp-form``` и ```amp-mustache```.

В Pixcraft будут сохраняться только значения полей, имена которых соответствуют указанным в коде. Все остальные атрибуты, параметры и расположения можно менять в соответствии с вашим макетом.
## Отправка и обработка полученных данных
Когда пользователь заполняет и отправляет NPS-опрос, все значения автоматически фиксируются в Pixcraft. Собранные ответы можно:

- экспортировать в **CSV-файл** или отправлять в **Google Таблицы** для ручного анализа или загрузки в аналитику;

- передавать во внешние системы через **вебхуки** (автоматические оповещения о событиях в системе).

Вебхуки позволяют передавать результаты опроса на указанный вами URL-адрес сразу после отправки формы пользователем. Для этого необходимо их настроить:

- Откройте ваш компонент формы.

- Перейдите в раздел «Подключение» и в поле Webhook укажите URL, на который должны отправляться данные.

<Img
img="/api/uploads/06_webhooks_9c75a13948.png"
alt="Поле Webhook "
/>

- После того, как пользователь заполнит и отправит форму, Pixcraft сформирует и передаст POST-запрос с данными формы на указанный адрес.

Важно учитывать, что **Pixcraft не рассчитывает сам индекс NPS**. Для этого вам нужно будет настроить свою логику обработки данных в Excel, Google Таблицах или BI-инструментах.
## Альтернатива: HTML-версия
Некоторые почтовые клиенты, такие как Microsoft Outlook и Apple Mail, не поддерживают [**AMP‑письма**](https://pixcraft.io/ru/blog/kak-vnedrit-amp-pisma-v-vashu-email-strategiyu). Чтобы не потерять обратную связь, стоит дополнительно подготовить HTML‑версию. В ней вместо AMP‑формы отображается отдельная ссылка, кнопка или изображение, которые при клике ведут на веб‑форму опроса.

В качестве решения можно создать веб-версию AMP‑письма или воспользоваться сервисом [**Altcraft**](https://altcraft.com/ru), который позволяет легко развернуть веб‑форму NPS и автоматически собирать аналитику. Вот как это работает:

- **Создание формы**. В разделе «Веб‑слой» выберите «Формы» и нажмите «Создать». Укажите имя, описание и идентификатор формы. Активируйте переключатель «Опубликована», чтобы форма получила URL или стала доступна как iframe. Настройте дополнительные параметры, такие как финальная страница и ограничение на повторное заполнение.

- **Добавление NPS‑элемента**. Во вкладке «Конструктор» добавьте элемент «NPS‑опрос». Настройте заголовок, оценки и символы для шкалы. При необходимости добавьте поле комментария и сделайте опрос обязательным. Сохраните и опубликуйте форму.

- **Размещение ссылки в письме**. В Pixcraft HTML‑версия письма создаётся автоматически. Сюда рядом с AMP‑формой можно добавить визуальный элемент со ссылкой на веб‑форму Altcraft. Для элемента задайте параметр «Отображать → HTML». Это позволит отображать альтернативный вариант для email-клиентов, не поддерживающих AMP-компоненты.

<Img
img="/api/uploads/07_otobrajenie_33aac75a1e.png"
alt="Переключатель отображения элемента в Pixcraft"
/>

- **Сбор и аналитика данных**. Altcraft автоматически собирает ответы и рассчитывает индекс NPS. В разделе «Аналитика» формы можно увидеть общий NPS, распределение по группам (Промоутеры, Нейтралы, Критики) и динамику показателя.

## Заключение
Чем скорее вы внедрите NPS в ваши коммуникации, тем больше возможностей откроется как для понимания аудитории, так и для улучшения продукта. С помощью Pixcraft настроить NPS-опрос можно всего за несколько минут. Задайте клиентам простой вопрос — и получите ценные ответы, которые помогут вам расти.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там мы делимся полезными материалами, лайфхаками и идеями для работы.

В статье рассказываем, что такое NPS-опросы, чем они полезны и как их реализовать в email-рассылках с помощью Pixcraft.

small_Обложка (2).png

thumbnail_Обложка (2).png

Обложка (2).png

NPS-опросы: зачем они нужны и как их реализовать в Pixcraft

Рассказываем об улучшениях и обновлениях в блочном редакторе писем Pixcraft: различные подходы к созданию шаблонов, инструменты, адаптивность и многое другое.

small_Обложка (1).png

thumbnail_Обложка (1).png

Обложка (1).png

Новые возможности Pixcraft: как мы улучшили редактор писем

Современный [**email-маркетинг**](https://altcraft.com/ru/glossary/email-marketing-kak-nastroit-i-ispolzovat) давно вышел за рамки статичных рассылок. Пользователи ждут актуального, персонализированного и интерактивного контента, который подстраивается под их потребности в реальном времени.

В этой сфере **AMP для email** стали настоящим прорывом. Технология позволяет добавлять в письма динамические элементы и  интерактивные формы. Подробнее о внедрении AMP в шаблоны писем мы писали в [**нашей статье**](https://pixcraft.io/ru/blog/kak-vnedrit-amp-pisma-v-vashu-email-strategiyu). Одним из ключевых инструментов AMP для email является **компонент AMP-list**. Он позволяет загружать данные из внешних источников в реальном времени и динамически обновлять контент письма. Это открывает широкие возможности: от персонализированных рекомендаций до актуального расписания работы магазинов или обновляемых акций. Давайте разберемся, как именно работает AMP-list и как его можно эффективно использовать в email-маркетинге с помощью [**Pixcraft**](https://pixcraft.io/ru).

## Что такое AMP-list

**AMP-list** — компонент для динамического получения данных внутри письма с возможностью их обновления. Он пришел на смену Agile-изображениям, которые работали нестабильно и не полностью удовлетворяли потребностям пользователей. 

<Img
img="/api/uploads/promo_rassylka_s_ispolzovaniem_amp_list_12ffe7ff31.gif"
alt="Email campaign with AMP-list"
src="Пример промо-рассылки с использованием AMP-list"
/>


### Общий синтаксис

AMP-list загружает JSON-данные из указанного URL и отображает их в разметке с использованием шаблона.
```
<amp-list 
  width="auto" 
  height="100" 
  layout="fixed-height" 
  src="https://example.com/data.json">
  <template type="amp-mustache">
    <div>{{title}}</div>
  </template>
</amp-list>
```
Среди **ключевых атрибутов** amp-list:
- `src` — URL источника данных (JSON API)
- `width / height / layout` — параметры отображения
- `template type="amp-mustache"` — шаблон вывода данных

AMP-list ожидает в ответ JSON с объектом, у которого в свойстве items будет передан массив данных. Пример:
```
{
  "items": [
    { "title": "Интерактивный AMP-контент" },
    { "title": "Персонализированные материалы" }
  ]
}
```
В нашем примере HTML будет иметь примерно следующий вид:
```
<div>Интерактивный AMP-контент</div>
<div>Персонализированные материалы</div>
```

Обновление контента происходит в момент, когда пользователь открывает письмо, либо же письмо можно обновить вручную. Если по какой-то причине сервер не вернул ответ , то можно предусмотреть отображение специального блока с альтернативным контентом:

```
<amp-list width="auto" height="200" layout="fixed-height" src="https://example.com/products.json">
  <template type="amp-mustache">
    <div>{{name}}</div>
  </template>
  <div fallback>Контент на случай, если что-то пошло не так</div>
</amp-list>
```

**AMP-mustache**
За отображение присланных данных отвечает **AMP-mustache**:
```
<template type="amp-mustache">
    <div>
      <amp-img src="{{image}}" width="100" height="100"></amp-img>
      <p>{{name}}</p>
      <a href="{{url}}">Подробнее</a>
    </div>
  </template>

```
Mustache не передает само значение, а задает шаблон отображения для переданных данных. Подстановка контента осуществляется с использованием следующего синтаксиса:
- {{variable}}: Переменная. Выводит HTML-экранированное значение переменной variable.
- {{#section}} {{/section}}: Проверяет существование переменной и позволяет итерационно вывести элементы, если это массив.
- {{^section}} {{/section}}: Проверяет отсутствие переменной. Используется для создания элементов-заглушек.
- {{{unescaped}}}: Неэкранированный HTML позволяет, например, вывести текст со стилизацией и ссылками. Имеет ограничения на используемые внутри теги.

## Примеры использования

Использование AMP-list в сообщениях открывает широкий круг возможностей для маркетологов. Самое главное преимущество — персонализация ваших писем и показ актуального контента. Кроме того, компонент позволяет:
- показывать живую ленту комментариев в письме;
- встраивать стилизацию по времени суток и дате;
- отображать актуальную информацию о товарах и акциях в вашем магазине;
- и многое другое!

### Живая лента комментариев

Вы можете добавить в ваше письмо полноценную ленту комментариев, где каждый пользователь сможет оставить свой отзыв или просто пообщаться с другими клиентами:

<Img
img="/api/uploads/real_time_comments_4c5b3cb9a2.gif"
alt="Real-time comments"
/>

Такая «живая лента» — один из самых интересных способов взаимодействия с клиентами. Продукт или услуга вызовет больше доверия, если о ней расскажут реальные покупатели.

### Стилизация по времени суток или дате

При помощи AMP-list можно настроить динамическое отображение элементов, зависящее от того, в какое время суток получатель читает письмо:

<Img
img="/api/uploads/Styling_by_time_of_day_or_date_c095368095.jpg"
alt="Styling by time of day or date"
/>

### Акции и специальные предложения

Один из самых главных стимулов к приобретению того или иного товара является ограниченность предложения по времени. Эксклюзивная цена, поступление редкого продукта, а также актуальная информация о наличии может стать решающим фактором для покупки:

<Img
img="/api/uploads/Promotions_and_special_offers_8bc8576a84.png"
alt="Promotions and special offers"
/>

### Прогноз погоды

Клиент приятно удивится, если обнаружит внутри своего письма небольшую сводку о том, какую погоду ему стоит ждать в ближайшие дни. Настроить подобный прогноз также поможет компонент API-list:

<Img
img="/api/uploads/Weather_forecast_8e69c0ecf0.png"
alt="Прогноз погоды с помощью AMP-list"
/>

## Реализация в Pixcraft
AMP-list можно легко встроить в ваше письмо при помощи [**Pixcraft**](https://pixcraft.io/ru/builder). Для этого создайте новый **компонент** в соответствующем разделе меню:

<Img
img="/api/uploads/New_Pixcraft_component_1fbaa6abb2.png"
alt="New Pixcraft component"
/>

Укажите название и описание, выберите тип **AMP-List**:

<Img
img="/api/uploads/AMP_list_b5c1a2912f.png"
alt="AMP-list.png"
/>

На следующем этапе необходимо настроить **структуру** элемента. Можно добавить **текстовое поле**, **заголовок**, **изображение** или **ссылку**:

<Img
img="/api/uploads/Element_structure_0402a7f4a2.png"
alt="Element structure"
/>

На вкладке **«Контент»** можно настроить содержимое получившихся «карточек» и добавить необходимое количество:

<Img
img="/api/uploads/Content_3b086a42e4.png"
alt="Content"
/>

Также вы можете указать **условия отображения** блока. В качестве условия укажите **время**, **день недели** или **конкретную дату**:

<Img
img="/api/uploads/Display_conditions_6a004e698e.png"
alt="Display"
/>

После сохранения элемента перед вами появится **подробная инструкция по подключению** AMP-list к вашему письму. Pixcraft сформирует готовый код как на HTML, так и на [**TJML**](https://pixcraft.io/ru/framework). 

<Img
img="/api/uploads/Connection_da82a9ddad.png"
alt="Connection"
/>

Интерактивный элемент для вашего шаблона готов! Обязательно проверьте письмо перед массовой рассылкой, а также помните о том, что не все почтовые провайдеры поддерживают [**AMP-контент**](https://altcraft.com/ru/blog/chto-takoe-amp-pisma).

## Заключение

Использование AMP-list в email-маркетинге открывает новые возможности для персонализации, динамического обновления контента и повышения вовлеченности пользователей. Благодаря этому компоненту письма становятся не просто статичными рассылками, а интерактивными инструментами, которые могут адаптироваться к контексту и поведению получателя.

При этом важно учитывать, что AMP поддерживается не всеми почтовиками, поэтому нужно будет подготовить и классическую HTML-версию письма без актуального контента.

Если вы еще не используете AMP в email, самое время протестировать его с [**Pixcraft**](https://pixcraft.io/ru) и вывести свои рассылки на новый уровень!









Как AMP-list делает email-рассылки динамичными: загрузка данных, персонализация и интерактивный контент. 

small_Using_the_AMP-list_component.jpg

thumbnail_Using_the_AMP-list_component.jpg

Using_the_AMP-list_component.jpg

Использование компонента AMP-list в email-рассылке

Представьте: вы открываете емейл, а там не просто текст или картинки, а классическая «Змейка», в которую можно поиграть прямо в письме. Именно такой эксперимент мы решили провести, чтобы оживить рассылку и удивить подписчиков. 

В этой статье мы расскажем, как создавали интерактивное AMP-письмо с игрой для новогодней рассылки [**Altcraft**](https://altcraft.com/), с какими проблемами столкнулись и какие результаты получили. Если вам интересно, как добавить интерактивности в рассылки и увлечь аудиторию, — читайте дальше. 

## Как придумывали 

2025 год — год Змеи по восточному календарю, и когда мы начали обсуждать концепт для интерактивного [**AMP-письма**](https://pixcraft.io/ru/blog/amp-emails-chto-takoe), идея игры «Змейка» возникла сама собой.  

Изначально мы думали о классической механике: змейка движется вперёд, а игрок меняет её направление, чтобы избежать столкновений с границами поля или собственным телом. Цель — «съесть» мигающую точку, после чего длина змейки увеличивается на один квадратик. 

<Img
img="/api/uploads/amp_email_snake_58366f1277.jpg"
alt="Механики змейки"
/>

Однако в AMP-письмах есть ограничения: для автоматического изменения отображения можно использовать только карусель с автопрокруткой. Это добавило бы ненужную анимацию смещения, из-за чего игра стала бы менее удобной.

Поэтому мы переосмыслили концепцию и решили связать передвижение змейки с кликами пользователя. Теперь задача игрока — провести змейку через лабиринт, найти ключ и добраться до выхода.

<Img
img="/api/uploads/amp_email_design_24fe8960ca.jpg"
alt="Емейл-рассылка с игрой "
/>

С творческим процессом создания статьи можно ознакомиться в [**статье Altcraft**](https://altcraft.com/ru/blog/zmeyka-altcraft). 

А поиграть в «Змейку» можно [**здесь**](https://cases.pixcraft.io/altcraft/2025/). 

## Как разрабатывали 

### Геймплей

При создании игры для AMP-письма важно учитывать, как пользователи будут играть на разных устройствах: на компьютере — с помощью мыши, а на смартфоне — с использованием сенсорного управления. Эти два сценария сильно отличаются друг от друга и накладывают свои ограничения. Например, на мобильном устройстве кнопки должны быть достаточно крупными, чтобы по ним было удобно попадать пальцем, но при этом они не должны занимать слишком много места, чтобы игровое поле тоже уместилось на экране.

После нескольких экспериментов мы остановились на сетке 10х10. Она оказалась идеальной: компактной, чтобы игра не надоедала из-за слишком большого поля с лабиринтом, но при этом достаточно крупной, чтобы всё оставалось хорошо видимым даже на маленьком экране телефона.

Следующим шагом стала разработка игровой карты. Мы добавили тупики, петли и расставили декоративные объекты, чтобы карта выглядела более живой и интересной.

<Img
img="/api/uploads/amp_email_maze_design_aa9e10177f.png"
alt="Разработка емейла"
/>

Персонаж, которым управляет пользователь, — змейка. Она состоит из нескольких клеток и меняет своё положение в зависимости от направления движения. Голова и хвост при движении никак не «гнутся». Поэтому мы решили, что минимальная длина змейки должна составлять 4 клетки.

<Img
img="/api/uploads/amp_email_snake_mechanics_604ef2eb22.png"
alt="Интерактивный емейл: разработка"
/>

Управление реализовано через кнопки: каждое нажатие продвигает змейку на одну клетку в выбранном направлении. Рядом добавили подсказку для пользователей: «Управляй змейкой, используя эти кнопки». 

<Img
img="/api/uploads/amp_email_controls_b28ecd019e.png"
alt="Кнопки управления"
/>

### Технические тонкости  

Чтобы змейка могла перемещаться по всей игровой зоне, мы использовали условные координаты — слева и сверху. Эти координаты задаются через CSS-классы, которые определяют положение змейки на сетке. Для отображения мы создали по десять классов для смещения по горизонтали и вертикали. Положение змейки задаётся так:  

```html
<div [class]=”'translate-left-' + playerState.left + ' translate-top-' + playerState.top + ' head_snake_' + playerState.direction_1”></div>
```  
Когда игрок нажимает на кнопку управления, змейка поворачивает голову в выбранном направлении. Поскольку змейка состоит из четырёх элементов, каждый её сегмент должен сдвигаться на место предыдущего. Это реализовано через обновление состояния:  

```html
<button class="button_up" on="tap:AMP.setState({
	playerState3: {direction_1:playerState2.direction_1, direction_2:playerState2.direction_2 ,left: playerState2.left, top: playerState2.top},
	playerState2: {direction_1:playerState1.direction_1, direction_2:playerState1.direction_2 ,left: playerState1.left, top: playerState1.top},
	playerState1: {direction_1:playerState.direction_1, direction_2:playerState.direction_2 ,left: playerState.left, top: playerState.top},
	playerState: { direction_2:playerState.direction_1, direction_1: 'up', left: playerState.left, top: playerState.top - 1 }
})"></button>
```  

Обратите внимание, что у нас есть два направления — direction_1 и direction_2. Они нужны, чтобы правильно изгибать тело змейки при поворотах.  

Ещё один важный момент — контролировать, чтобы змейка оставалась внутри игровой области. Поскольку она движется только вперёд, достаточно проверять координаты её головы (playerState). Координаты left и top не должны превышать 10, чтобы змейка оставалась в пределах игрового поля.  

Для проверки допустимых координат мы используем массив coordinates, в котором перечислены все разрешённые точки на карте:  

```javascript
coordinates: [
	{ left: 0, top: 6 },
	{ left: 1, top: 0 },
	{ left: 1, top: 1 },
	{ left: 1, top: 2 },
	{ left: 1, top: 3 },
	{ left: 1, top: 5 },
	{ left: 1, top: 6 },
	{ left: 1, top: 8 },
	...
]
```  

Чтобы проверить, находится ли змейка в допустимой зоне, мы используем метод filter:  

```javascript
coordinates.filter(c => c.left == playerState.left && c.top == playerState.top).length
```  

Если результат равен нулю, значит, змейка вышла за пределы игровой области.  

### Сложности  

Известно, что почтовый клиент Mail.ru не поддерживает состояния, заданные по умолчанию через ```<amp-state>```. Например, если мы задаём начальное состояние следующим образом:  

```html
<amp-state id="myDefinedState">
	<script type="application/json">
	{
    	"foo": "bar"
	}
	</script>
</amp-state>
```  

Mail.ru просто игнорирует это. Чтобы обойти данное ограничение, мы использовали небольшой хак: состояние задаётся только после действия пользователя. Например, при нажатии на кнопку:  

```html
<button on="tap:AMP.setState({ myDefinedState: { foo: 'bar' } })">Старт</button>
```  

Этот подход отлично работает как в Mail.ru, так и в Gmail. Однако мы столкнулись с новой проблемой: в Mail.ru существует ограничение на длину выражения — не более 100. Наши выражения, необходимые для работы игры, превышали этот лимит, что вызывало ошибку:  

*amp-bind: Expression eval failed. Expression size (194) exceeds max (100). Please reduce number of operands.*

Чтобы решить эту проблему, мы использовали ```<amp-state>``` для проверки, где открыта игра, и предложили пользователям Mail.ru перейти на веб-версию. Также мы сообщили о проблеме в поддержку Mail.ru, чтобы они могли рассмотреть возможность увеличения лимита.  

Таким образом, несмотря на технические сложности, мы нашли рабочие решения, чтобы игра оставалась доступной для всех пользователей.

## Какие результаты получили

Эксперимент с интерактивным AMP-письмом, включающим игру, дал отличные результаты, подтвердив, что такой подход работает.

- **Вовлечённость и метрики.** Мы увидели, что пользователи активно взаимодействовали с игрой. Почти 30% тех, кто открыл письмо, дошли до завершения игры — это отличный показатель для интерактивного контента. Люди не только открывали письмо, но и проводили с ним больше времени, чем обычно.
- **Мобильная аудитория.** Большинство пользователей играли с мобильных устройств, и управление с помощью экранных кнопок оказалось удобным. 
- **Технические итоги.** Письмо корректно отображалось в AMP-совместимых почтовых клиентах, а для тех, где поддержка AMP отсутствовала, срабатывал резервный HTML-вариант.

## Заключение 

Эксперимент показал, что электронные письма с интерактивными элементами — это реальный способ зацепить аудиторию. Пользователи с удовольствием включаются в игру, особенно если это что-то необычное, вроде «Змейки» прямо в письме. Формат AMP идеально подошёл для реализации такой идеи.

Главный вывод: люди охотно взаимодействуют с контентом, если он интересный и удобный. Но чтобы всё прошло успешно, необходимо учитывать каждую деталь — от совместимости с почтовыми клиентами до резервных решений для тех, кто не поддерживает AMP.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там делимся полезными материалами, лайфхаками и идеями для работы.

Мы решили проверить, как геймификация влияет на вовлеченность, и встроили «Змейку» прямо в емейл. В статье — детали эксперимента и результаты.


Статьи по тегу: AMP