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

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

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

Figma — это мощный инструмент для дизайнеров, а с помощью плагинов его возможности можно расширить ещё больше. 

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

## [Mockup Plugin](https://www.figma.com/community/plugin/817043359134136295/mockup-plugin-devices-mockups-print-mockups-ai-mockups) 

<Img
img="/api/uploads/figma_mockup_706f96370e.jpg"
alt="Mockup плагин"
/>

Инструмент для создания мокапов.  

- Большая библиотека. В ней вы найдёте макеты устройств, брендовые элементы и другие уникальные решения. - У некоторых мокапов есть варианты — можно менять размер или цвет. Также есть возможность создавать свои макеты. 
- Есть ИИ. После загрузки [**лого**](https://altcraft.com/ru/glossary/logotip-chto-eto-i-kak-ego-sozdat) или ввода текста генерируется готовое решение. 
- Можно редактировать уже готовые мокапы. 
- Установка бесплатная. [**Подписка**](https://www.ls.graphics/unlimited-access) с безлимитным доступом ко всей библиотеке за $10 в месяц. 

## [Batch Styler](https://www.figma.com/community/plugin/818203235789864127/batch-styler) 

<Img
img="/api/uploads/figma_batch_styler_bd19fabb54.jpg"
alt="Batch Styler плагин"
/>

Бесплатный плагин для изменения цвета и стилей. 

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

## [Styles & Variables Viewer](https://www.figma.com/community/plugin/1332412206147274506/export-styles-and-variables-to-css)

<Img
img="/api/uploads/figma_styles_variables_0357b65b37.jpg"
alt="Styles and Variables плагин"
/>

После того как вы обновили стили, можно приступить к их выгрузке в CSS. В этом поможет наш плагин styles&variables viewer. Он позволит заменить dev-режим Фигмы, а в чем-то он даже значительно удобнее.

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

Существует 3 доступных режима работы:

- Вывод всех переменных Figma.
- Вывод всех стилей Figma.
- Вывод стилей для выбранного элемента.

Причем при выделении будут отображены:

- Все его CSS-стили;
- Если слой текстовый, то текст для удобного копирования;
- Если у слоя есть фоновое изображение, то кнопка для экспорта оригинального изображения;
- Если выбрано 2 слоя — размеры слоёв и расстояние между ними.

## [Dark Me](https://www.figma.com/community/plugin/1210863977149285175/dark-me) 

<Img
img="/api/uploads/figma_darkme_977ccc3dd6.jpg"
alt="Darkme плагин"
/>

Плагин для создания тёмной темы для пользовательского интерфейса или электронного письма. 

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

## [PixCraft Email Generator ](https://pixcraft.io/ru/figma)

<Img
img="/api/uploads/figma_email_generator_64873a39be.jpg"
alt="Email generator плагин"
/>

Плагин для создания писем. 

- **Позволяет легко создавать готовые к отправке HTML электронные письма.** Плагин обеспечивает корректное отображение в любых почтовых клиентах, включая мобильные и все версии Outlook. Помимо этого, мобильную адаптацию можно гибко настраивать.
- **Много готовых ассетов.** Библиотека содержит более ста готовых компонентов, включая блоки контента, шапки и подвалы писем, кнопки, изображения, текстовые блоки, разделители и AMP-компоненты. Также можно создавать свои собственные ассеты и разбивать их на категории. 
- **Есть возможность предпросмотра.** Не выходя из плагина, вы можете проверить, как письмо отображается на мобильных устройствах различной ширины, а также в тёмном режиме.
- **Экспорт.** Вы можете экспортировать макет прямо из плагина в [**Altcraft**](https://altcraft.com/ru), Unisender, Sendsay, Enkod, Dashamail, Mailganer и другие. Если же в списке нет подходящей ESP, то можно выгрузить в виде zip-архива.
- **Поддерживает** [**AMP**](https://pixcraft.io/ru/blog/amp-emails-chto-takoe). Можно экспортировать не только стандартный HTML, но и [**AMP HTML**](https://pixcraft.io/ru/blog/kak-vnedrit-amp-pisma-v-vashu-email-strategiyu). Вставляйте в письма формы, карусели и другие интерактивные элементы. 

## [Iconify](https://www.figma.com/community/plugin/735098390272716381/iconify)

<Img
img="/api/uploads/figma_iconify_e42c5c1996.jpg"
alt="iconify плагин"
/>

Библиотека векторных иконок. 

- Более 200 тысяч иконок и 150 наборов. 
- Можно импортировать иконки или просто перетаскивать их из плагина в Figma.
- Легко заменять выбранные иконки.
- Иконки всегда импортируются в формате SVG без дополнительной оплаты. 
- Сохраняется последняя посещённая вами страница — легко продолжить поиск. 

## [Isometric](https://www.figma.com/community/plugin/741184519069077841/) 

<Img
img="/api/uploads/figma_isometric_2c0427f0e7.png"
alt="Isometrics плагин"
/>

Простой плагин для Figma для создания изометрических слоёв. 

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

## [Beautiful Shadows](https://www.figma.com/community/plugin/1068595505353552645/)

<Img
img="/api/uploads/figma_beautiful_shadows_9e754cc930.png"
alt="Beautiful Shadows плагин"
/>

Инструмент для создания и настройки теней. 

- Прост в использовании — достаточно перетащить источник света в окне плагина относительно центрального элемента.
- Цвет тени настраивается. 
- Имеет открытый исходный код и распространяется по лицензии MIT.

## [Remove BG](https://www.figma.com/community/plugin/738992712906748191/remove-bg)

<Img
img="/api/uploads/figma_plugins_remove_bg_f7409a4911.jpg"
alt="Remove BG плагин"
/>

Инструмент для удаления фонов. 

- Фон изображений удаляется автоматически всего одним кликом. 
- Можно добавить белый фон к фото, сделать его прозрачным (PNG); выделить, изолировать или получить вырезанный объект.
- Для использования требуется учётная запись remove.bg. Базовый план подписки — €0,90 за изображение, единоразовый платёж — €9. 

## [Jitter. Animation for Figma](https://www.figma.com/community/plugin/961270034818256057/) 

<Img
img="/api/uploads/figma_jitter_f4c1474d38.jpg"
alt="Jitter плагин"
/>

Простой бесплатный плагин для создания анимаций. 

- Позволяет легко анимировать интерфейсы (мобильные приложения, веб-сайты, лендинги, микровзаимодействия). Интуитивно понятный процесс создания анимаций. 
- Есть экспорт в формате видео (до 4K, 60 fps), GIF и Lottie. Поддерживается прозрачный фон.
- Можно создать свою систему моушн-дизайна.
- Легко делиться анимированными шаблонами.
- Есть возможность анимировать текст. 
- Есть готовые пресеты. Просто настройте их под свой проект в несколько кликов.

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

Плагины для Figma — это настоящая находка для дизайнеров, которые хотят ускорить и упростить свою работу. 

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

С плагинами вы сможете создать более сложные дизайны и повысить свою продуктивность.

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

small_figma-main.jpg

thumbnail_figma-main.jpg

figma-main.jpg

Топ-10 полезных плагинов для Figma

Представьте, что ваши письма могут быть не просто текстом, а «мини-сайтами», где можно прокручивать галереи товаров, заполнять форму или сразу делать заказ. Это всё возможно благодаря 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%**.

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

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

Блог