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

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

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

Что такое «Живая лента»

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

• AMP-form, которая позволяет встроить в письмо полноценную форму. С её помощью можно легко собрать быстрый опрос с выбором одного или нескольких вариантов или предложить подписчику оставить отзыв. Данные можно применять для сегментации и анализа аудитории, например, в RFM-анализе.
  
  
• AMP-list, позволяющий подгружать данные из внешних источников и показывать в письме динамический контент. К примеру, это могут быть акции и специальные предложения, подборки товаров или оформление в зависимости от времени суток.
  
  
• AMP-forward-link, благодаря которой можно подтверждать подписку или регистрацию сразу в письме без перехода на сайт.
  
  
• «Живая лента», с помощью которой подписчик может оставить комментарий непосредственно внутри письма.

С «Живой лентой» письмо перестаёт быть односторонним каналом, где голос есть только у бренда, а подписчики остаются лишь в роли читателей. Вместо этого оно превращается в площадку для дискуссии и обмена мнениями:

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

Как создать «Живую ленту» в Pixcraft

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

Создание поля для комментария

На рабочем экране вашего профиля перейдите в меню «Компоненты» и нажмите кнопку «Новый компонент».

Выберите «Живая лента», укажите название (например, «Отзывы на новую коллекцию» или «Комментарии к рассылке») и при желании добавьте краткое описание, после чего нажмите «Создать компонент».

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

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

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

Модерация и контент-безопасность

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

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

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

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

Подключение «Живой ленты» и сбор данных

Следующий шаг — настроить, как именно «Живая лента» будет отображаться в письме. Для этого доступны как основные параметры подключения, так и готовый HTML- и TJML-код, который можно вставить напрямую.

Вебхуки. Здесь пользователь может указать URL-адрес внешней базы данных или сервиса, на который Pixcraft будет отправлять POST-запрос при каждом новом сообщении в форме. Такой механизм позволяет, например, моментально получать уведомления о новых комментариях в Telegram-боте или любую другую систему.

Сразу после отправки сообщения формируется «пакет данных», который передаётся на указанный адрес. Он включает:

• componentId — ID компонента в Pixcraft;
  
  
• campaignId — ID кампании (если компонент привязан к рассылке);
  
  
• email — адрес подписчика;
  
  
• date — время события в формате UNIX;
  
  
• owner — ID владельца формы;
  
  
• data — содержимое в формате application/x-www-form-urlencoded.

Более подробно с принципом работы вебхуков можно ознакомиться в документации.

Action-xhr. Это адрес обработчика формы, который используется при ручной настройке. Именно туда отправляются данные, когда подписчик нажимает кнопку «Отправить».

List src. Также используется при настройке вручную. Это источник данных, из которого подгружаются все комментарии в «Живую ленту». Здесь можно настроить количество сообщений, отображаемых в письме за один раз, а также порядок их вывода:

• Asc (отображение по возрастанию, от старых к новым);
  
  
• Desc (отображение по убыванию, от новых к старым);
  
  
• Rand (отображение случайных комментариев из источника);
  
  
• Default (значение по умолчанию).

Готовые варианты кода для интеграции в письмо включают:

• HTML-код для <head> — обеспечивает подключение AMP-библиотек и минимальных стилей. Пример кода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<style amp-custom>
.wrap_list {
  position: relative;
  height: auto;
  min-height: 100px;
}
#wrap_listXXXX .commentlist {
  min-height: 100px;
}
#wrap_listXXXX .commentlist,
#wrap_listXXXX .commentlist > div {
  position: static;
}
#wrap_listXXXX .commentlist > div {
  min-height: 100px;
  height: auto;
}
</style>

• HTML-код для <body> — структура формы и блока с «Живой лентой». Контент, который пользователь непосредственно увидит в письме. Пример кода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<form method="POST" action-xhr="https://app.pixcraft.io/amp/post/XXXX?key=YOUR_KEY" on="submit-success: AMP.setState({confFormXXXX: true})">
  <div [hidden]="confFormXXXX">
    <div class="field">
      <label>Введите ваш комментарий</label>
      <textarea name="t_0847_vvedite_vash_kommentarii_595" required></textarea>
    </div>
    <button type="submit">Submit</button>
    <input type="hidden" name="email" value="${email}">
  </div>
    <div submit-success>
      <template type="amp-mustache">
        {{success}}
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
    Please fill in correctly {{#error}}<b>{{title}}<br></b> {{/error}}
    </template>
    </div>
    <div class="loading" submitting>
      Loading...
    </div>
</form>
<div class="wrap_list" id="wrap_listXXXX">
  <amp-list class="commentlist" id="shortlist" layout="fill" src="https://app.pixcraft.io/amp/get/XXXX?key=YOUR_KEY">
    <template type="amp-mustache">
      <div class="list-card">
        <div class="list-item">
          Введите ваш комментарий
          <div>{{t_0847_vvedite_vash_kommentarii_595}}</div>
        </div>
      </div>
    </template>
  </amp-list>
</div>

• TJML — готовый фреймворк от Pixcraft. Позволяет совмещать HTML и AMP-контент письма в едином коде. Пример кода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<m-form action="https://app.pixcraft.io/amp/post/XXXX?key=YOUR_KEY" on="submit-success: AMP.setState({confFormXXXX: true})">
  <div data-amp-hidden="confFormXXXX">
    <div class="field">
      <label>Введите ваш комментарий</label>
      <textarea name="t_0847_vvedite_vash_kommentarii_595" required></textarea>
    </div>
    <m-button bgcolor="#7D4DA3">Submit</m-button>
      <input type="hidden" name="email" value="${email}">
    </div>
    <m-form-success>[[success]]</m-form-success>
    <m-form-error>Пожалуйста, введите корректно [[#error]]<b>[[title]]<br></b> [[/error]]</m-form-error>
    <div class="loading" submitting>
      Загрузка...
    </div>
</m-form>
<div class="wrap_list" id="wrap_listXXXX">
  <m-list class="commentlist" id="shortlist" layout="fill" src="https://app.pixcraft.io/amp/get/XXXX?key=YOUR_KEY">
    <div class="list-card">
      <div class="list-item">
        Введите ваш комментарий
        <div>[[t_0847_vvedite_vash_kommentarii_595]]</div>
      </div>
    </div>
  </m-list>
</div>

С точки зрения получателя письма «Живая лента» напоминает привычное взаимодействие в соцсетях или мессенджерах:

• Подписчик заполняет форму и нажимает «Отправить».
  
  
• Данные отправляются на сервер.
  
  
• AMP-list подгружает новые сообщения из List src. Если включена «Публикация по умолчанию», сообщение отображается сразу. Если активна премодерация, оно ждёт одобрения модератора и лишь затем становится видимым в рассылке.

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

Как собирать статистику и управлять сообщениями

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

В этом разделе собирается вся информация о взаимодействии пользователей:

• комментарии;
  
  
• события, связанные с формой;
  
  
• метрики за всё время работы или за выбранный период.

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

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

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

Как добавить скрытое поле для отображения имени

Добавить «Живой ленте» индивидуальности можно с помощью механизма автоматической подстановки случайных псевдонимов. Например, если в форме не предусмотрен ввод имени, система автоматически подставит вместо него значение из заранее заданного списка.

Технически это реализуется через скрытые поля. В поле передаётся массив с набором вариантов (например, «Неопознанный ёж», «Неопознанный котейка» и подобных), после чего система случайным образом выбирает один из них и подставляет его в качестве имени пользователя.

В коде механизм выглядит следующим образом:

1
<input name="some_name" type="hidden" [value]="['Неопознанный котейка', 'Неопознанный слоник','Неопознанный дракоша','Неопознанный аксолотль','Неопознанный индюк'][floor(random() * 4)]" />

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

Важно отметить: для использования такой подстановки нужно, чтобы до отправки формы хотя бы один раз произошло изменение состояния (on="tap:AMP.setState({})"). Это можно сделать нативно, скрыв форму под кнопку или спойлер: при открытии значение рассчитается и подставится автоматически.

Заключение

С «Живой лентой» рассылка из простого канала доставки информации трансформируется в полноценную интерактивную площадку. Обратная связь собирается мгновенно, а вовлечённость растёт благодаря активному диалогу.

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

Хотите прокачать навыки в email-маркетинге? Загляните в наш Telegram-канал. Там мы делимся полезными материалами, лайфхаками и идеями для работы.