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

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


small_amp-email-main.jpg

thumbnail_amp-email-main.jpg

amp-email-main.jpg

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

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

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

## Пример от [Findomestic](https://amp.dev/success-stories/findomestic)

<Img
img="/api/uploads/Findomestic_Sample_Email_6cfee92223.gif"
alt="Пример AMP-письма"
/>

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

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

[**A/b-тестирование**](https://altcraft.com/ru/blog/abn-i-mvt-testirovanie) AMP- и классических писем на Черную пятницу показало:

- Открываемость выросла на 128% (35,4% против 15,5%).
- Клики увеличились на 133% (1,4% против 0,6%).

<Note>
Создавать такие письма легко с конструктором email-рассылок [**Pixcraft**](https://pixcraft.io/ru/builder). Теперь создание готового сообщения занимает всего несколько минут, и для этого не нужны знания HTML. Просто выбирайте готовые блоки, меняйте их оформление, добавляйте текст и ссылки — все это можно сделать в удобном визуальном режиме.
</Note>

## Пример от СДЭК 

<Img
img="/api/uploads/amp_primery_sdek_d80c56d812.gif"
alt="Пример AMP-письма от СДЭК"
/>

В письме от агентства [**Kinetica**](https://kinetica.su/) пользователь видит изображение нескольких котов и,  чтобы получить совет о зарубежном шопинге, ему нужно нажать на одного из них. При клике на изображение срабатывает механизм AMP-компонента ```<amp-bind>```, который обновляет содержимое письма в реальном времени. Кот «сдвигается», а на его месте появляется полезная рекомендация. 

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

## Пример от Volkswagen (дизайн: [RRAP](https://www.rapp.com/))

<Img
img="/api/uploads/amp_primer_volkswagen_da99d162c1.png"
alt="Пример AMP-письма от Volkswagen"
/>

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

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

## Пример от Huel 

<Img
img="/api/uploads/amp_primer_golosovalka_154551fe9a.png"
alt="Пример AMP-письма от Huel"
/>

В этом письме пользователи выбирают свой любимый вкус напитка через интерактивную голосовалку, реализованную с помощью технологии AMP. Все, что нужно — нажать на один из предложенных вариантов. Данные о голосах пользователей отправляются на сервер с помощью компонента ```<amp-form>```.

Результаты отображаются в реальном времени благодаря ```<amp-list>```, который динамически обновляет содержимое письма. Процентное соотношение голосов за каждый вкус отображается в бутылке уровнем напитка и числовыми процентами.

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

## Пример от Disney 

<Img
img="/api/uploads/amp_primery_krossword_ce5ca229b6.jpg"
alt="Пример AMP-письма от Disney"
/>

В этом письме для детей используется увлекательная игровая механика — кроссворд, который ребенок решает прямо в почтовом ящике. Нужно угадать персонажей, опираясь на силуэты и краткие описания, и ввести их имена в форму внутри письма. Для ввода ответов также используется ```<amp-form>```, который позволяет взаимодействовать с письмом без перехода на внешние страницы. 

Вся логика и обновления контента в емейле происходят с использованием AMP-компонента ```<amp-bind>```, который привязывает данные к интерактивным элементам и обновляет их в реальном времени. Информация о правильных ответах и изменяющиеся изображения персонажей также обрабатываются через AMP-теги, что позволяет отображать новый контент без перехода из письма.

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

## Пример от Toms 

<Img
img="/api/uploads/amp_primery_toms_26ca91543a.jpg"
alt="Пример AMP-письма от Toms"
/>

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

Для реализации механики применяются состояния и ```<amp-bind>```, которые позволяют динамически менять изображение, а также ```<amp-img>``` для отображения светящихся и обычных вариантов обуви. Создается интересный визуальный эффект прямо в почтовом ящике, без необходимости перехода на внешний сайт. 

## Пример от Mail.ru 

<Img
img="/api/uploads/amp_primery_digest_fb14394cd3.gif"
alt="Пример AMP-письма от Mail.ru"
/>

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

Механика реализована с помощью AMP-компонентов. Пользователь выбирает ответы, а результат и дополнительная информация появляются мгновенно благодаря ```<amp-bind>```. Такой подход создает живое взаимодействие прямо в почтовом ящике, делая письмо динамичным, современным и наглядным.

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

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

Такие письма не только повышают открываемость и кликабельность, но и создают уникальный опыт для пользователей. 
Если вы еще не применяете AMP в своих email-кампаниях — самое время начать. В этом вам помогут конструктор емейлов Pixcraft и наш [**плагин для Figma**](https://pixcraft.io/ru/figma). 

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

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

small_amp-primery-pisem.jpg

thumbnail_amp-primery-pisem.jpg

amp-primery-pisem.jpg

Как вдохнуть жизнь в email-рассылку: лучшие примеры AMP-писем

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

Pixcraft предоставляет решение этой проблемы: удобный и понятный плагин для Figma, который позволяет создать шаблон письма и готовый HTML-код за несколько минут. В этой статье мы рассмотрим, как с помощью [**Pixcraft Email Generator**](https://pixcraft.io/ru/figma) быстро создать свой шаблон письма, а также настроить его уникальную структуру и мультимедийное содержание.

## Создание готового шаблона за несколько минут

Для начала работы создайте новый файл в Figma и найдите **Pixcraft Email Generator** в меню Действий на панели инструментов. Запустите плагин:

<Img
img="/api/uploads/1_0a3d51aac7.png"
alt="Figma Pixcraft plugin"
src="Плагин Pixcraft Email Generator"
/>

<Note>
В плагине доступна версия интерфейса на русском языке. Для того чтобы переключиться на другой язык, нажмите на значок планеты в правом нижнем углу плагина. 
</Note>

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

<Img
img="/api/uploads/2_b82f124d97.png"
alt="New Blank email"
src="Создание нового письма"
/>

<Note>
Вы можете сгенерировать базовый шаблон письма с заголовком, изображением, кнопкой и футером нажатием кнопки **Simple email**. В таком случае вам останется только заменить изображения и текст на собственные.
</Note>

Перед вами появится пустой шаблон письма. Наполните его элементами из вкладки **Assets**. Эти элементы разделены на следующие категории:

**Blocks** — блоки контента, например, новостные блоки, баннеры и прочее
**Headers** — заголовок письма, его «шапка»
**Images** — изображения в письме
**Texts** — любые блоки текста
**Buttons** — [Call to Actions-кнопки](https://altcraft.com/ru/blog/chto-takoe-cta), содержащие призыв пользователя к действию
**Footers** — нижняя часть письма, так называемый «подвал» письма
**AMP** — интерактивные элементы, такие как формы обратной связи и карусели изображений, а также их html-версия
**Dividers** — разделители пунктов письма.

<Img
img="/api/uploads/3_694121e1e8.png"
alt="Assets"
src="Окно Assets"
/>

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

<Img
img="/api/uploads/4_f0516043ad.png"
alt="New block"
src="Добавление элемента"
/>

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

<Note>
При создании письма вы также можете использовать свой дизайн макета. Главным условием для того, чтобы плагин корректно его отрендерил, является применение режима **Auto layout** для фреймов в Figma. 
</Note>

Шаблон готов! Перейдите в меню предпросмотра, для этого выберите весь основной фрейм с шаблоном и нажмите на кнопку **Preview**. Перед вами появится окно тестирования письма. Именно таким его увидит получатель:

<Img
img="/api/uploads/five_750ea79887.png"
alt="Preview mode"
src="Режим предпросмотра"
/>

В этом окне пользователю доступен следующий инструментарий:

* Переключатель режима предпросмотра для **HTML и AMP-версии письма**
* Переключатель режима отображения **десктопной\мобильной** версии письма
* Проверка отображения письма **в темной теме**. Большинство мобильных почтовых клиентов автоматически преобразуют письмо, если выбрана темная тема, поэтому необходимо учитывать, какой вид примет ваше письмо после изменения темы. Также доступен режим имитации **полной инверсии цвета**, используемый в приложении Gmail на iOS.
* Кнопка **Screenshot** создаст снимок содержимого письма, которым вы можете поделиться, например, с клиентом
* На вкладке **Show Code** можно просмотреть код готового письма и его размер, там же вы можете «сжать» код при необходимости

Если итоговый результат вас устраивает, перейдите к **экспорту шаблона**, нажав на соответствующую кнопку в верхней части окна:

<Img
img="/api/uploads/6_9858c2479e.png"
alt="Export template"
src="Экспорт шаблона"
/>

При желании вы можете добавить к шаблону тему письма и прехедер. В плагине доступно сохранение в виде **архива с кодом и изображениями**, сохранение **в учетной записи Pixcraft**, а также экспорт в сервисы почтовой рассылки, например, **в Altcraft Platform**:

<Img
img="/api/uploads/7_79decc7b96.png"
alt="External services export"
src="Экспорт шаблона в другие сервисы"
/>

## Кастомизация шаблона

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

### Ссылки для кнопок, надписей и изображений

Если вы хотите вставить в кнопки или изображения ссылки для перехода, выделите нужный элемент и перейдите на вкладку **Properties**. В поле **Link address** добавьте URL-ссылку ресурса:

<Img
img="/api/uploads/8_27fe582818.png"
alt="Add URL"
src="Создание ссылки в кнопке"
/>

Для того чтобы добавить гиперссылку в текст, выделите фрагмент текста и добавьте ссылку в меню **Properties**. То же самое вы можете сделать с помощью функции **Create link** в Figma:

<Img
img="/api/uploads/9_275103a5a3.png"
alt="Create link"
src="Создание ссылки в тексте"
/>

Если вы не хотите, чтобы какой-то элемент шаблона был распознан как кнопка (например, промокод для копирования), вы можете переключить соответствующий ползунок в этом же разделе:

<Img
img="/api/uploads/10_383937dc05.png"
alt="Button mode"
src="Распознавание кнопки"
/>

### Выгрузка блоков в виде изображений

Плагин может выгрузить некоторые элементы в качестве изображений, а не в виде кода. Для этого на вкладке Properties выбранного объекта нажмите кнопку **Convert to image**. К преобразованному блоку можно добавить описание и заголовок изображения:

<Img
img="/api/uploads/11_8c1e16a4cd.png"
alt="Convert image"
src="Преобразование блока в картинку"
/>

То же самое вы можете сделать с помощью стандартного функционала Figma, для этого оберните блок в группу:

<Img
img="/api/uploads/12_33bdda8094.png"
alt="Grouping"
src="Группирование элементов блока"
/>

### Управление адаптацией блоков

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

<Img
img="/api/uploads/13_04c976bd15.png"
alt="Columns display"
src="Настройка порядка блоков"
/>

Проверить то, как будут выглядеть эти элементы, можно в режиме предпросмотра:

<Img
img="/api/uploads/vid1_39672b4a17.png"
alt="Reorder preview"
src="Порядок блоков в письме"
/>

Также доступна настройка **боковых отступов и ширины всего письма**. Для настройки этих параметров, выберите основной фрейм и укажите нужный режим отображения:

<Img
img="/api/uploads/14_9071dca1a8.png"
alt="Paddings"
src="Настройка отступов и ширины"
/>

### HTML и AMP-отображение

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

Создайте AMP и HTML-элементы, например, форму для заполнения и сноску со ссылкой на службу поддержки. Для сноски в разделе Properties укажите отображение только для HTML-версии:

<Img
img="/api/uploads/15_82450b571b.png"
alt="HTML and AMP"
src="Настройка отображения контента"
/> 

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

<Img
img="/api/uploads/vid2_2324df4884.png"
alt="HTML and AMP preview"
src="AMP и HTML-контент"
/> 


### Помощь искусственного интеллекта

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

<Img
img="/api/uploads/16_47d0d6e7f0.png"
alt="AI Helper"
src="Использование искусственного интеллекта"
/> 

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

<Img
img="/api/uploads/17_de860fb47b.png"
alt="AI text styling"
src="Генерация текста"
/>

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

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

Узнать больше обо всех функциях плагина, зарегистрировать учетную запись Pixcraft, а также связаться с поддержкой вы можете на странице Pixcraft Email Generator в сообществе [Figma](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-generator-create-and-export-your-own-html-amp-email-templates).

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

small_figma-plugin.jpg

thumbnail_figma-plugin.jpg

figma-plugin.jpg

Email-верстка без кода: доступное и быстрое создание шаблонов писем в плагине для Figma

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

Если при взаимодействии со взрослой аудиторией основная сложность заключается в обеспечении открытия 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

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

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

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

## Что вам потребуется, чтобы начать AMP-рассылки

Самое важное — получить разрешение от почтовых провайдеров, поддерживающих AMP (Mail.ru, Gmail, Yahoo, AOL), и соблюдать все технические условия для рассылки:

**Настроить запрещающую политику DMARC.** При настройке политики [**DMARC**](https://docs.pixcraft.io/ru/amp/documentation/amp-setup/dmarc) вам нужно выбрать один из двух режимов: quarantine или reject. Режим reject обеспечивает максимальную защиту и полностью блокирует письма, не прошедшие проверку. Режим quarantine направляет такие емейлы в папку «Спам».

Также необходимо убедиться, параметр pct установлен на 100%. Это означает, что политика будет применяться ко всем отправляемым сообщениям. Для корректной работы DMARC также необходимо правильно настроить [**SPF**](https://altcraft.com/ru/blog/zashita-ot-spama) и [**DKIM**](https://docs.pixcraft.io/ru/amp/documentation/amp-setup/dkim).

**DKIM-подпись.** Домен отправителя электронного письма должен совпадать с доменом, указанным в DKIM-записи. Gmail имеет более гибкие требования: достаточно, чтобы домены второго уровня совпадали. Если в вашей подписи указан домен company.ru, то письма с адресов, где после @ идет company.ru или любой поддомен этого домена (например, department@support.company.ru), успешно пройдут проверку. 

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

**Репутация отправителя** в постмастере Gmail должна быть как минимум средней. Для Mail.ru важно соотношение отправлений и открытий, а также количество жалоб и писем, удаленных без прочтения. Точные критерии могут варьироваться, поэтому рекомендуется ориентироваться на общие принципы: например, не следует превышать определённое [**количество жалоб**](https://help.mail.ru/developers/mailing_rules/technical) (1,1% жалоб — до 10 тысяч писем в месяц, 1% жалоб — до 500 тысяч писем в месяц). 

**От рассылки можно легко отписаться.** В любом шаблоне, включая интерактивные письма, должна присутствовать активная ссылка для отписки. Процесс отписки должен быть максимально простым и занимать минимум времени. Пользователь может отписаться одним нажатием, без необходимости проходить дополнительную авторизацию или подтверждать свои намерения. Если вы хотите узнать причину, то следует сначала предоставить возможность аннулировать подписку, а уже затем задавать уточняющие вопросы. Для удобства получателей в каждом письме необходимо указывать заголовок List-Unsubscribe. Это позволит читателям легко отписаться от рассылки прямо в интерфейсе почтового сервиса. 

### Дополнительные требования Mail.ru и Gmail

**Gmail:**

- Для успешного прохождения модерации в Gmail ваша рассылка должна быть защищена TLS-шифрованием. Чтобы проверить, используется ли шифрование, отправьте тестовое письмо на свой почтовый ящик Gmail. В открывшемся письме нажмите на кнопку «мне» (или «to me») и в выпадающем меню найдите информацию о шифровании. Если TLS не включен, обратитесь в службу поддержки вашей платформы для его активации.

<Img
img="/api/uploads/kak_vnedrit_amp_testing_c03525e98c.png"
alt="Шифрование TLS"
/>

**Mail.ru:** 

- Необходимо настроить сервис Postmaster Mail.ru. Особое внимание следует уделить настройке обработки FBL-отчетов, то есть автоматической отписке пользователей, которые пожаловались на письмо. Как правило, эту функцию берет на себя платформа для email-рассылок.

- Для оценки качества почтовой рассылки и вашей репутации отправителя, провайдер требует, чтобы вы отправляли не менее 5000 писем в месяц в течение трех месяцев. 

## Как подготовить AMP-письмо 

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

Вам понадобится подготовить две версии письма: в формате HTML и AMP. Платформа PixCraft предоставляет три инструмента для создания таких сообщений: визуальный конструктор писем для рассылки, плагин для Figma и фреймворк TJML. Специальные знания для того, чтобы генерировать корректный код для обеих версий, вам не понадобятся.

Протестируйте письмо на соответствие всем необходимым критериям. Если всё в порядке, заполните [**заявку**](https://docs.pixcraft.io/ru/amp/documentation/amp-setup) и отправьте емейлы почтовым провайдерам. Важно, чтобы письма были максимально приближены к настоящим — нельзя использовать слово «тест» или текст-заполнитель. 

Подробнее о тестировании AMP-писем и заполнении заявки [**читайте в статье**](https://docs.pixcraft.io/ru/amp/documentation/amp-setup). 

## Как использовать AMP-емейлы в маркетинге 

Технология AMP-писем может успешно интегрироваться в стандартные email-маркетинговые цепочки. Например:

**1.** **Письма подтверждения.** Интерактивные элементы непосредственно в емейле сокращают путь пользователя. Вы предлагаете читателю подтвердить подписку в самом письме и ввести дополнительную информацию — дату рождения, номер телефона, пол. В примере ниже, благодаря использованию интерактивных компонентов (кнопки подтверждения и формы для указания номера) конверсия в указание номера телефона достигла 40,27%: 

<Img
img="/api/uploads/kak_vnedrit_amp_horoscope_11zon_fc0409ccb5.jpg"
alt="Использование формы с номером телефона"
/>

**2.** **Приветственные письма.** AMP-элементы в welcome-сообщениях создают первое впечатление о компании как современной и инновационной.

**3.** **Электронные письма для вовлечения неактивных пользователей.** Интерактивные элементы в письмах реактивации, например, мини-игры или опросы, вовлекают пользователей в диалог и повышают вероятность их возвращения. Пример использования AMP для реактивации [**смотрите в статье**](https://pixcraft.io/ru/blog/povisili_cr_na_55). 

**4.** **Регулярные рассылки.** AMP-технология позволяет создавать динамические емейлы, содержимое которых обновляется в реальном времени. Это особенно полезно для отображения актуальной информации, такой как цены, наличие товаров или акций. AMP-письмо «живет» 30 дней, после чего отображается статичная HTML-версия. Для этого используется компонент [**AMP List**](https://docs.pixcraft.io/ru/amp/documentation/amp-components/amp-list).

## Главные мысли 

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

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

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

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

small_photo_2024-10-24_15-36-34.jpg

thumbnail_photo_2024-10-24_15-36-34.jpg

photo_2024-10-24_15-36-34.jpg

Как внедрить AMP-письма в вашу email-стратегию

Что выбрать — классический HTML или инновационный AMP для рассылок? У каждого формата свои сильные стороны. С AMP вы создаёте интерактивный опыт, который подталкивает пользователей к действию, но требуется значительно больше времени на разработку, а старый добрый HTML гарантирует одинаковое отображение практически в любом почтовом клиенте.

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

## Различия между HTML и AMP-письмами 

Для начала дадим определения: 

**AMP-письмо** — это HTML-сообщение созданное с помощью фреймворка AMP for email. Благодаря AMP-компонентам и ограниченной поддержке JavaScript, в такие электронные письма можно добавлять интерактивные элементы. Сообщения выглядят живее и интереснее для пользователей. 

**HTML-емейл** — это письмо, созданное с использованием языка гипертекстовой разметки (HTML). В отличие от обычных текстовых сообщений без каких-либо элементов (формат plain-text), HTML-письма могут содержать не только текст, но и картинки. 

<Img
img="/api/uploads/html_ru_a99e6a0cdb.png"
alt="Пример HTML-сообщения"
src="Пример HTML-письма"
/>

Дальше чуть подробнее разберём, в чём всё-таки различия:
 
### Вёрстка писем

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

В рамках единой емейл-вёрстки необходимо предусмотреть отображение как в современных почтовых клиентах, так и в устаревших, не поддерживающих медиазапросы (например, Yandex), или имеющих ограниченную поддержку HTML и CSS (как, например, Outlook). Но при этом вы не будете ограничены в возможностях использования хаков для тёмной темы или же использования медиазапросов, сможете контролировать размеры и начертание шрифтов как в десктопе, так и в мобильной версии письма. 

Если вы используете конструктор email, то специальные знания HTML не нужны. [**В емейл-конструкторе PixCraft**](https://pixcraft.io/ru/builder) можно легко создать любые шаблоны, включая  мастер-шаблон из ваших собственных или готовых блоков. Вы сохраняете единый стиль письма и не тратите время на вёрстку. А ещё можно использовать [**PixCraft плагин для Figma**](https://pixcraft.io/ru/figma), чтобы превратить ваши дизайны в готовые к отправке письма. Получаются профессиональные email-рассылки без заморочек с кодом.

Вёрстка **AMP-емейлов** требует понимания как HTML, так и специфики AMP. Если вы уже знакомы с HTML, то освоить тонкости AMP-писем будет проще. 

Помимо визуальных элементов (например, прокручивающихся галерей или витрин с товарами), у AMP есть и другие компоненты:

- **Компонент amp-bind.** С ним создают элементы, которые реагируют на действия пользователя.
- **Компонент amp-list.** Он даёт возможность подгружать данные с внешних источников (например, с вашего сайта).
- **amp-form.** Компонент позволяет создавать формы для сбора данных от подписчиков.

HTML-письма поддерживаются практически во всех почтовых клиентах, включая устаревшие (например, Outlook). А AMP-сообщения работают только в Gmail, Mail.ru, Yahoo Mail (в веб-интерфейсе и приложениях) и в AOL (только веб-интерфейс). AMP-версию в среднем увидит только 40-45% подписчиков. 

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

Верстать AMP-письма может показаться сложным, но с PixCraft это проще простого. Конструктор писем делает процесс их создания лёгким и приятным даже для тех, кто далёк от кода.

### Отображение

Основное отличие новой технологии от традиционных HTML-писем — почти что полная поддержка CSS. Это включает поддержку медиазапросов, а также использование различных эффектов и анимаций (с ограничениями в Gmail и с полной поддержкой в Mail.ru). 

Кроме того, в AMP есть возможность [**настройки под тёмную тему**](https://altcraft.com/ru/blog/invertirovanie-cvetov-v-rassylke): если у пользователя стоит тёмное оформление, то письмо подстроится под него. Правда, поддержка под это есть только в Mail.ru.

А ещё, конечно, отличаются уровни интерактивности: если в HTML реализуются только ховер-эффекты, то в AMP можно использовать формы для сбора обратной связи, через bind можно менять отображаемый контент по действиям пользователя, а с помощью amp-list — вообще подтягивать контент с сайта в режиме реального времени. 

<Img
img="/api/uploads/amp_584a374138.gif"
alt="Пример AMP-сообщения"
src="Пример AMP-письма"
/>

### Аналитика

В HTML-емейлах отслеживаются только открытия сообщения и клики по ссылкам. 

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

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

**С PixCraft вы не упустите ни одной важной метрики. Вы сможете** [**отслеживать**](https://docs.pixcraft.io/ru/amp/documentation/analytics): 

- Время, проведённое в письме — чтобы узнать, вовлечены ли пользователи (или не очень);
- HTML/AMP-открытия — чтобы разобраться, какая версия письма работает лучше;
- Взаимодействие с AMP-компонентами — чтобы увидеть не только данные из форм, но и отследить любые события в письме с помощью трекинг-пикселей и интеграции с Google Analytics 4. 

## Главное  

HTML и AMP-письма — это два разных подхода к созданию email-рассылок. Если HTML-письма — это статичный контент, то с AMP-сообщениями пользователи могут взаимодействовать. Благодаря AMP можно реализовать различные интерактивные элементы, такие как карусели, формы, «живые ленты», аккордеоны и многое другое. 

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

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

В статье выясним, чем AMP-письма отличаются от классических HTML-сообщений. 

small_html vs amp.jpg

thumbnail_html vs amp.jpg

html vs amp.jpg

AMP-письма или HTML-письма: что использовать 

**AMP-письмо** — это электронное сообщение,  в котором читатель может взаимодействовать с его элементами: заполнять анкеты, просматривать галереи, выбирать товары и оформлять заказы.

<Img
img="/api/uploads/coffi_3_1_d46cc071b9.gif"
alt="Пример AMP-письма"
/>

Технология AMP (accelerated mobile pages — «ускоренные мобильные страницы»), разработанная в 2015 году, изначально создавалась для того, чтобы веб-страницы загружались быстрее на мобильных устройствах. Со временем её возможности расширились, и теперь она используется для электронных писем. Причём пользоваться этой технологией может абсолютно любой желающий. Однако, чтобы начать, придётся обеспечить соответствие рассылки [**техническим требованиям**](https://docs.pixcraft.io/ru/amp/documentation/amp-setup) и получить разрешение от почтовых провайдеров. 

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

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

<Img
img="/api/uploads/amp_emaily_quiz_1_1_2a0090b53c.gif"
alt="Письмо на базе PixCraft"
/>

Если говорить о структуре, то  AMP-емейл состоит из трёх частей:

- простой текстовой версии для старых почтовых программ (опционально)
- стандартной HTML-версии 
- и специальной AMP-части, которую понимают только современные почтовые клиенты.

## В каких сервисах есть поддержка AMP 

По состоянию на 2024-й год, AMP-емейлы корректно отображаются в веб-интерфейсе и мобильных приложениях Gmail, Mail.ru и Yahoo Mail, а также в веб-интерфейсе AOL.

Те, кто читают электронные письма через этих провайдеров, смогут увидеть все AMP-элементы и обновления прямо в своём почтовом ящике. Люди, предпочитающие Yandex.Почту, Outlook или сервис от Apple, смогут открыть только  стандартную HTML-версию письма без дополнительных возможностей.

Однако, учитывая, что Mail.ru и Gmail [**являются**](https://www.cnews.ru/news/top/2023-09-25_rossiyane_ne_hotyat_proshchatsya) самыми популярными почтовыми сервисами в России, у большинства подписчиков ваш интерактивный контент отобразится. 

## Как AMP-письма выводят email-маркетинг на новый уровень

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

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

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

**Письма можно** [**менять в режиме реального времени**](https://pixcraft.io/ru/email). Вы можете не только редактировать текст сообщения после отправки, но и обновлять различные элементы, такие как картинки или кнопки. Например, если вы запустили рекламную кампанию с ограниченным по времени предложением, то по окончании акции можно быстро обновить сообщение, добавив информацию о новых скидках. Также с AMP проще исправлять ошибки. Если в обычном емейле любое изменение требует новой рассылки, то в интерактивном вы можете вносить корректировки в реальном времени, не беспокоясь о том, что ваши подписчики получат устаревшую информацию.

## Почему AMP с PixCraft — это просто 

Многие компании откладывают создание «живых» имейл-рассылок на неопределённый срок. Причина проста: считается, что разработка AMP-писем требует глубоких знаний HTML и JavaScript. Даже при наличии специалиста создание интерактивных элементов занимает значительно больше времени, чем обычная вёрстка писем.

**PixCraft меняет правила игры.**

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

**Преимущества PixCraft:**

- Простота. Не требует глубоких знаний HTML и JavaScript.
- Скорость. Создание интерактивных писем занимает гораздо меньше времени.
- Гибкость. Конвертируйте ваши существующие HTML-письма в AMP для добавления «живых» элементов.
- Мобильная адаптация. Работает даже без медиазапросов, например, в Yandex.
- Готовые блоки. Широкий выбор блоков для различных типов контента (формы, рейтинги, живые ленты и другие).

**С PixCraft вы можете:**

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

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

AMP — это технология, позволяющая использовать интерактивный контент прямо в письмах. 

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

С помощью PixCraft вы можете создавать динамические письма легко и быстро, без специальных знаний и по себестоимости обычных HTML-емейлов.  




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

small_amp-emaily-main.jpg

thumbnail_amp-emaily-main.jpg

amp-emaily-main.jpg

Что такое AMP-письма и как они меняют email-маркетинг

## АБ-тестирование эффективности 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%**.

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

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

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