Рассказываем о том, что такое динамические карточки товаров в письмах, в чём их преимущества перед статичными товарными сетками и как создание динамической сетки реализовано в редакторе Pixcraft.

small_dynam_crd_covr.png

thumbnail_dynam_crd_covr.png

dynam_crd_covr.png

Динамические карточки товаров: как они устроены в редакторе Pixcraft

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

В этой статье мы расскажем, как создавали интерактивное 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). Там делимся полезными материалами, лайфхаками и идеями для работы.

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


small_amp-email-main.jpg

thumbnail_amp-email-main.jpg

amp-email-main.jpg

«Змейка» в письме: как мы с Altcraft создали игру для AMP-рассылки 

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

Если при взаимодействии со взрослой аудиторией основная сложность заключается в обеспечении открытия email из-за огромного количества писем, то проблема [**рассылок**](https://altcraft.com/ru/blog/kak-dostat-klienta-v-rassilke) для детей —  отсутствие подходящего и интересного им контента.

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

## Проработка концепции

Как раз незадолго до начала работы у «Детской почты» обновился фирменный стиль и появились маскоты — монстрики, поэтому было решено дать возможность собрать собственного почтомонстрика:

<Img
img="/api/uploads/pismo_struktura_11zon_48b5b42fe9.jpg"
alt="Проработка концепции"
/>

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

<Img
img="/api/uploads/pismo_soberi_monstrika_e658030d60.png"
alt="Вариант письма"
/>

Дизайнеры команды Mail к этому моменту концептуально проработали внешний вид и основные фичи, которые будут у нашего монстрика.

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

## Немного технических деталей

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

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

Чтобы фиксировать данные о самых популярных сервисах среди детей, при сборке монстрика мы также формировали форму, куда добавляли выбранные сервисы и при клике «готово» отправляли в Pixcraft.

На последнем шаге мы показываем фотографию монстрика с именем — здесь также есть небольшая тонкость, которую следует упомянуть. Дело в том, что mail.ru не умеет работать с состояниями по умолчанию, то есть вот такая запись будет проигнорирована:

```xml
<amp-state id="names">
  <script type="application/json">
	["Цифрош", "Сервисио", "Файлер", "Отправита", "Мегагай", "Мэйлия", "Черновер"]
  </script>
</amp-state>
```
При этом в Gmail она бы отработала корректно.

Универсальным решением в нашем случае было задать массив возможных имен сразу для span, обратившись к случайному элементу массива:

```xml
<span [text]="['Цифрош', 'Сервисио', 'Файлер', 'Отправита', 'Мегагай', 'Мэйлия', 'Черновер'][floor(random() * 7)]"></span>
``` 
</br>
С обоями для телефона тоже получилось не все просто — 7 доступных сервисов позволяют сформировать 128 различных монстриков. Делать их вручную пришлось бы очень долго, поэтому мы написали небольшую программу, которая сгенерировала все возможные варианты.

<Img
img="/api/uploads/pismo_amp_f73b2cede5.gif"
alt="AMP-письмо"
/>

## Статистика

После запуска письма мы собрали статистику за месяц и проанализировали. Так как речь идет об AMP-письмах, то для начала следует озвучить процент AMP-открытий: 

<Img
img="/api//uploads/welcome_pismo_statistika_1542f81de4.png"
alt="Статистика"
/>

Для  уникальных открытий — AMP 62%, html — 38%. А для неуникальных AMP — 66%, html — 34%. **Конверсия в отправку формы** (клик кнопки «готово») составила 19,9% от открывших письмо. Это говорит нам о том, что к [_AMP-письмам_](https://altcraft.com/ru/blog/chto-takoe-amp-pisma) неоднократно возвращались, открывали несколько раз, чтобы собрать разных монстриков, а значит, задача заинтересовать пользователя точно была выполнена.

Также мы проанализировали, какие сервисы для детей самые популярные и востребованные, и получили следующую картину:

|    |         | 
|------------|-----------------|
| Облако     | 44.29%          | 
| Мульты     | 46.20%          | 
| Матеша     | 44.85%          | 
| Игры     | 49.52%          | 
| Рисовалка     | 50.43%          | 
| Маруся     | 44.60%          | 
| Эмодзи     | 49.92%          | 

Но, есть вероятность, что дети просто выбирали самые красивые фичи для монстрика, а не сервисы, которые их действительно заинтересовали. Поэтому неудивительно, что «Рисовалку» добавили более 50% подписчиков — она добавляла симпатичный хвост-кисточку,  «Эмодзи», который выбрала почти половина — добавляла милые глазки, а «Игры», которые ненамного отстали по популярности — добавляли крылья.

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

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

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

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

В статье расскажем, как мы прорабатывали концепцию велком-письма для сервиса «Детская почта». 

small_welcome-email-main.jpg

thumbnail_welcome-email-main.jpg

welcome-email-main.jpg

Как создать велком-письмо для сложной аудитории 

## АБ-тестирование эффективности HTML и AMP рассылки

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

Совместно с Облако Mail.ru мы подготовили AMP-кампанию по неактивным пользователям Облака. Было необходимо не просто реактивировать их, но и убедиться в эффективности использования AMP для этого.

Поэтому письмо было отправлено в виде АБ-теста - одна версия письма была обычным HTML-письмом, где пользователю предлагалось получить +256Гб на 2 месяца, а второй версией было полноценное AMP-письмо с игровой механикой “поиска предмета”.

<Img
img="/api/uploads/blog_2_1_e749851faa.gif"
alt="Myths About Marketing Automation"
/>
Обе версии были отправлены с одинаковой темой и имели примерно равный OR.

|    | HTML   | AMP    | 
|----|--------|--------|
| OR | 11.11% | 10.19% |

Следует сразу отметить, что отправка осуществлялась на неактивных пользователей.

Не все пользователи, получившие AMP-версию, увидели именно ее из-за ограничений поддержки (например открыли через почтовый клиент, который не поддерживает AMP):

AMP
| AMP-part |	HTML-part|
|---------------|-----------------|
| 81%           | 19% |

Пропорции отличаются от привычных 50\50 так как рассылка была именно по пользователям mail.ru, где поддерживается AMP и в мобильных приложениях и в веб-интерфейсе.

И если в html версии (аб-теста) пользователю нужно было только лишь перейти по ссылке и получить подарок, то в AMP-версии нужно было сначала пройти игру - найти все предметы и только после этого появлялась возможность получить подарок, перейдя на сайт.
Однако, количество переходов на сайт из AMP-версии было на 78% больше:

|    | HTML   | AMP    | 
|----|--------|--------|
| CTOR | 4.88% | 8.67% |

(переход на веб-версию письма не учитывался в статистике)

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

Целевым действием письма была активация подарка. И из AMP-письма таких активаций было на 55% больше, чем из html.

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

## Итоги

Применение AMP-геймификации в письме, позволило на 78% увеличить CTOR и на 55% увеличить конверсию.

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

Применили AMP-геймификации в письме и сделали A/B тестирование

small_article3.jpg

thumbnail_article3.jpg

article3.jpg

HTML vs AMP. Повысили конверсию на 55%

## Первый блин

Совместно с компанией Math & Mind мы разработали AMP-письмо, где предложили пользователю прямо в письме ответить на несколько вопросов.

Изначальная версия письма имела следующий вид:

<Img
img="/api/uploads/blog1_2aaec46973.png"
alt="Myths About Marketing Automation"
/>
Мы отправили ее на небольшую тестовую выборку, чтобы проверить как сработает эта механика. И, на наше удивление, письмо не показало никаких отличных от обычного html-письма результатов.

## Работа над ошибками

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

Чтобы визуально “оживить” письмо и показать что с ним можно взаимодействовать мы добавили сверху карусель с увеличивающимся таймером “возраст вашего мозга”

<Img
img="/api/uploads/blog2_b3f51b0b84.png"
alt="Myths About Marketing Automation"
/>
Это оказалось тем самым недостающим звеном: тестовая выборка показала неплохие результаты, и письмо было отправлено на основную аудиторию.

## Результаты

Мы отследили отдельно открытия HTML- и AMP-версии. Уникальные открытия распределились следующим образом:

*HTML – 64.63%
*AMP – 35.37%
Если же посмотреть на не уникальные открытия, то:

*HTML – 62.8%
*AMP – 37.2%

<Img
img="/api/uploads/blog3_5c9cc8d8b8.png"
alt="Myths About Marketing Automation"
/>
Что позволяет сделать однозначный вывод: к AMP-письмам возвращаются охотнее.

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

<Img
img="/api/uploads/blog4_a35eca50f2.png"
alt="Myths About Marketing Automation"
/>

Первая ступенька – это 100% пользователей, которые открыли именно AMP-версию письма.
Ответили на первый вопрос – 27,9%
На второй – 25,7%
И на последний – 24,8%.
Мы видим минимальный отток аудитории. То есть если пользователь совершил первый шаг, то с высокой вероятностью он пройдет весь путь.

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

HTML – 6.95%
AMP – 32,54%

<Img
img="/api/uploads/blog5_3b20ad6835.png"
alt="Myths About Marketing Automation"
/>
Вот так графически можно представить получившиеся показатели OR и CTR с подсвечиванием какая часть приходится на HTML и AMP открытия и переходы.

<Img
img="/api/uploads/blog6_71fbed4eeb.png"
alt="Myths About Marketing Automation"
/>

Отсюда мы можем сделать вывод, что использование AMP-технологии и постепенное вовлечение подписчика позволило значительно повысить CTR!

Использовали AMP-технологию и постепенно вовлекли подписчиков

small_article2.jpg

thumbnail_article2.jpg

article2.jpg

Увеличили CTR в 2,5 раза

## Идея

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

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

Вопрос пользователя сохраняется на сервере, а в письме выводится случайный вариант ответа \- “да”, “нет” или “не знаю” в различный вариантах.

<Img
img="/api/uploads/blog_3_1_0d41492e6b.gif"
alt="Myths About Marketing Automation"
/>

### Показатели

AMP работает не у всех, поэтому мы собрали отдельно замеряли открытия HTML и AMP-версии

Уникальные открытия распределились следующим образом:

* AMP – 56.3%
* HTML – 43.7%

Если же посмотреть на не уникальные открытия, то:

* AMP – 62.13%
* HTML – 37.87%

<Img
img="/api/uploads/blog_3_2_2f4f2b48b6.png"
alt="Myths About Marketing Automation"
/>

Если сравнить соотношение уникальных и не уникальных открытий HTML и AMP версий письма, то можно увидеть, что к AMP-письмам неоднократно возвращались.

* В среднем к AMP письму возвращалось - 1,36
* В среднем к HTML письму возвращалось - 1,07

### Конверсия в заполнение формы

В среднем на каждого открывшего AMP-версию пользователя приходится **1,69 заполнений формы**. То есть многие подписчики по несколько раз заполняли и отправляли форму.

Если выделить только уникальных заполнивших форму пользователей, показатель также впечатляющий: **20,74%**.

Игровая механика дала свой эффект, и многие из тех, кто решился отправить форму, в дальнейшем сделали это еще несколько раз. Особенно интересно было наблюдать, как подписчик задавал один и тот же вопрос “Волшебному шару”, пока не получал желаемый ответ)

Обернули опрос в игровую механику, и вот что получилось

Статьи по тегу: Кейсы