Как создать AMP письмо и сохранить ответы из опроса
Как создать AMP письмо
В письма, созданные в формате AMP, можно подставлять интерактивные элементы (игры, карусели и так далее), а также создавать опросники внутри самого письме без переадресации на сторонние ресурсы.
Мы поддерживаем отправку AMP писем вместе со стандартными шаблонами. При настройке емейл рассылки нужно сверстать обычный шаблон HTML или в конструкторе, и добавить AMP версию письма.
AMP формат поддерживают не все почтовые сервисы, но поддерживают Yahoo Mail, Gmail и Mail.ru. Поэтому клиенты с этими доменами получат AMP версию, а остальные клиенты версию со стандартным HTML.
Первое, что необходимо сделать - это получить разрешения от Google и mail.ru на отправку AMP-писем. На официальном сайте Google есть инструкция по настройке. Такое разрешение нужно получить для каждого домена, с которого будут происходить отправки рассылок, эти домены будут помещены в white-list Gmail. На официальном сайте mail.ru так же есть инструкция и форма для завки в white-list. То же самое - для Yahoo Mail.
И у Gmail, и у mail.ru есть возможность попробовать amp-письма в "песочнице".
До получения разрешения от почтового сервиса даже тестовые письма из рассылок будут приходить в HTML-формате. В Gmail есть возможность разрешить отображение amp-письма для тестирования для одного отправителя в настройках почты (Настройки - Общие - Динамический контент - Настройки для разработчиков).
Пример минимального кода, который имеет необходимую разметку для формирования AMP письма
<!doctype html>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<style amp-custom>
h1 {
margin: 1rem;
}
</style>
</head>
<body>
<h1>Hello, I am an AMP EMAIL!</h1>
</body>
</html>
Пример верстки с подстановкой формы в AMP
<!doctype html>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js" async></script>
<script custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" async></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
<form method="post" action-xhr="https://hooks.zapier.com/hooks/catch/…./…./">
<fieldset>
<label>
<span>Name:</span>
<input type="text" name="firstName" required>
</label>
<br>
<label>
<span>Email:</span>
<input type="email" name="email" required>
</label>
<input type="hidden" name="mindboxId" hidden value="${Recipient.Id}">
<br>
<input type="submit" value="Subscribe">
</fieldset>
<div submit-success>
<template type="amp-mustache">
Subscription successful!
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Subscription failed!
</template>
</div>
</form>
Кликните по <a href="${Message.UnsubscribeLink}"> ссылке , чтобы отписаться. </a>
</a>
</body>
</html>
Расширение amp-form позволяет создавать формы
<form>
с полями для ввода данных и передачи их в AMP-документ.
URL вебхука (который будем создавать ниже) подставляем в тег
<form method="post" action-xhr="https://hooks.zapier.com/hooks/catch/…./…./">
В тег
<input>
передаются данные из формы.
В теге
<input type="hidden" name="mindboxId" hidden value="${Recipient.Id}">
подставляем майндбокс айди, который автоматически трекается при открытии письма. Нам важен этот скрытый тег, чтобы в дальнейшем передать по этому айди значению данные в майндбокс с помощью операции (настройка операции будет описана ниже).
Сама форма в письме с таким кодом будет выглядеть так
Более подробную информацию по настройке и верстке AMP формата письма можно найти на Email on Acid, Freshinbox, amp.dev.
Проверить созданный шаблон перед отправкой можно в AMP Gmail for Email Playground.
Как сохранить ответы из опроса в AMP через Zapier
Краткая инструкция по шагам:
Шаг 1. Получить доступ к майндбокс в [Zapier](https://zapier.com/app/dashboard) по [ссылке](https://zapier.com/developer/public-invite/115248/c7691cf746722cf4a0c2a279c9b1c834/)
Шаг 2. Добавить новый Zap
Шаг 3. В триггере (Trigger) выбрать создание вебхука (Webhooks) – событие триггера Catch Hook – сгенерированный хук сохранить
Шаг 4. В событии (Action) найти Mindbox – выбрать поле Вызвать операцию
Шаг 5. На проекте в майндбоксе создать операцию, как указано на картинке
Шаг 6. Перенести настройку операции в Zapier, как указано на картинке
Шаг 7. Протестировать триггер с хуком и событие вызова операции. Сохранить и запустить Zap.
Готово! Теперь хук можно использовать в форме AMP.
Ниже более подробная инструкция с иллюстрациями и объяснениями шагом.
Подробная инструкция по настройке механики:
Шаг 1.
Необходима активная учетная запись в Zapier и настроенная доступ к Mindbox в нем. Получить доступ можно по ссылке, необходимо принять приглашение, нажав на кнопку Accept Invite & Build a Zap.
Шаг 2.
Далее нужно добавить новый Zap
Шаг 3.
Выбрать создание веб-хука
И следующим шагом Catch Hook, таким образом форма в AMP письме сможет передавать в Zapier необходимые данные с помощью веб-хука, которые будут попадать в майндбокс с помощью операции, которую настроим дальше.
Сгенерированный хук необходимо скопировать и подставить в АМР в тело верстки, и после нажать кнопку Продолжить.
Далее система предложит протестировать хук, но можно сразу перейти к настройке операции, которая будет передавать данные из хука в Майндбокс.
Шаг 4.
В списке находим Mindbox (чтобы наша платформа появилась в списке, необходимо принять приглашение) и выбираем её.
В этом шаге выбираем Вызвать операцию.
Шаг 5.
Теперь необходимо настроить эту операцию на проекте на стороне Майндбокс.
Настройки операции должны быть такие
Шаг 6.
В Zapier заполняем все поля данными из операции и точки интеграции, в теле запроса должны быть указаны все поля, которые будут передаваться из AMP письма через настроенный ранее хук в формате json. После заполнения полей нажимает Продолжить.
Шаг 7.
Система предлагает протестировать операцию и после этого Сохранить Zap.
Готово! Теперь Zap работает и вы можете передавать данные из опроса в Майндбокс.
Тестировать передачу данных на проекте можно только при отправке реального письма на тестового клиента. При заполнении полей в шаблоне или тестовом письме – данные к нам не записываются.