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

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

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

Что такое AMP-forward-link

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

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

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

Для чего AMP-forward-link используется на практике

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

Подтверждение подписки (Double Opt-In)

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

Сбор дополнительных сведений

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

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

Отписка с обратной связью

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

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

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

Как создать AMP-forward-link в Pixcraft

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

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

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

Далее нажмите «Создать компонент», после чего откроется новая страница с настройками. В отличие от других компонентов со множеством опций, таких как формы или «Живая лента», у AMP-forward-link необходимо указать только два обязательных значения:

1. Сообщение об успешной отправке. Это текст, который увидит пользователь сразу после подтверждения действия. Он может быть лаконичным («Спасибо, ваша подписка подтверждена!») или более развернутым, с дополнительными инструкциями или приглашением к следующему шагу.


2. Домен для ссылок. Здесь указывается домен confirm-ссылки. Обратите внимание: если ваш ESP использует систему трекинга кликов, домен может подменяться при отправке письма.

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

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

Структура сгенерированного кода

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

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

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

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

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

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

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

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

1
2
3
 <div class="loading" submitting>
        Loading...
  </div>

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

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

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

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

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

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

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

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

Заключение

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

Попробуйте Pixcraft бесплатно в течение 14 дней и оцените все возможности нашего визуального конструктора писем. А если вы хотите прокачать навыки в email-маркетинге — загляните в наш Telegram-канал. Там мы делимся полезными материалами, лайфхаками и идеями для работы.