Рассказываем, как настраивали, с какими проблемами столкнулись и что пришлось докручивать по ходу дела.
Механика: как должно работать письмо
Email-рассылка с календарём состоит из двух частей:
- Интерактивная версия AMPHTML — открывается у пользователей, чьи почтовые клиенты поддерживают работу с АМП-контентом. К таким сервисам относятся Gmail, Mail.ru и Yahoo.
- Традиционная HTML-версия — показывается остальным подписчикам. Выглядит как обычное письмо со ссылкой на сайт с календарём.
Интерактивная версия содержит специальные скрипты Google AMP, которые помогают обновлять информацию в письме в режиме онлайн. Открыв AMPHTML-версию, получатель сможет выбрать дату и время и записаться к врачу сразу из письма.
В письмах такого типа важно, чтобы данные календаря отображались корректно. Потому в момент, когда подписчик взаимодействует с рассылкой, на сервер отправляется запрос на получение актуальной информации.
Когда пользователь нажимает на кнопку «Записаться к врачу», на сервер отправляется запрос о бронировании. Если дата и время свободны, клиент получает сообщение с благодарностью. Если записаться не удалось, сообщение об этом отобразится под кнопкой.
Реализация, проблемы и их решение
Проблема 1. Количество сотрудников
Изначально перед нами стояла задача настроить блок так, чтобы пользователи могли записаться к любому врачу из клиники. Но всё оказалось не так просто. Можно прописать даты и время для конкретного доктора, но загрузить в письмо список врачей с сервера не получится. Чтобы реализовать идею, нужно вручную прописать в шаблоне данные обо всех врачах клиники. Соответственно, каждый раз, когда список врачей будет меняться, придётся править шаблон.
Примерно так бы выглядел код письма (пример time-zone):
При этом, когда мы писали ТЗ для технического специалиста Stripo, поставили обязательные условия для списка:
- Ограничить окно выпадающего списка врачей 5-10 позициями так, чтобы пользователь мог пролистать список. При этом фамилии докторов автоматически рассортированы по алфавиту.
- Подсвечивать в календаре даты, когда у выбранного врача есть свободное время.
В АМП реализовать идею не удалось, потому что функционал выпадающего списка ограничен. В клинике несколько десятков врачей, и списки в рассылке получились бы огромными, записаться было бы практически нереально. Потому нам пришлось подготовить письма по принципу «одно сообщение — один врач».
Проблема 2. Безопасность
Чтобы обеспечить пользователям конфиденциальность, динамические письма подчиняются дополнительным требованиям и ограничениям безопасности Google. Чтобы соответствовать этим требованиям, нужно правильно настроить заголовки CORS в соответствии с документацией Google. О том, как настроить заголовки, написано здесь (см. секцию CORS Headers) и здесь.
Когда мы внедрили все настройки, понадобились конечные точки на сервере, чтобы с их помощью передавать данные непосредственно из письма на сервер и обратно.
С помощью поддержки Stripo мы поставили задачу программисту (без него не обойтись).
Для реализации этого кейса нужны следующие сервисы (end-points):
1. Получение данных с сервиса
Для получения данных используется сервис с адресом (end-point) https://amp.stripo.email/v1/list/ytxje/calendar1
На его примере нужно реализовать реальный сервис, который будет возвращать данные в указанном ниже формате. После реализации сервиса нужно указать его в шаблоне вместо Mock-сервиса Stripo (как показано на скриншоте)
В момент, когда письмо открывается, данные загружаются в таком формате:
{ "items": [
{ "times": [
{
"date": "2021-03-02",
"times": [
{"t": "10:00"},
{"t": "11:00"},
{"t": "12:00"},
{"t": "13:00"}
] },
{ "date": "2021-03-03",
"times": [
{"t": "14:00"},
{"t": "15:00"},
{"t": "16:00"}
] },
{
"date": "2021-03-04",
"times": [] } ] }
],
"date-range": [
{ "min": "2021-03-02",
"max": "2021-03-04"
} ] }
date-range — диапазон дат, которые есть в JSON. Только эти даты будут активны в календаре. Тут можно указать только две даты — первую и последнюю.
times — массив с временными слотами. В нём должны быть перечислены все даты, входящие в диапазон. Если в какую-то дату нет доступного времени, её нужно оставить с пустым массивом "times", не удалять. Если какой-то даты из диапазона не будет, надпись «На эту дату записи нет» не отобразится, вместо неё будет пустой блок.
date — дата.
t — время. В массиве times должны быть перечислены все доступные часы. Если врач свободен с 10:00 до 13:00 и принимает раз в час, массив будет выглядеть таким образом:
"times":
[ {"t": "10:00"},
{"t": "11:00"},
{"t": "12:00"},
{"t": "13:00"} ]
Когда время забронируют, например, 11:00, нужно будет удалить из массива {"t": "11:00"},.
2. Отправки данных с формы
В нашем шаблоне используется сервис Mock-сервер с адресом (end-point) https://amp.stripo.email/v1/form/qvkc/test1.
На его примере нужно создать реальный сервис, который будет принимать данные в указанном ниже формате и корректно их обрабатывать.
После реализации сервиса нужно указать его в шаблоне вместо Mock-сервиса Stripo (как показано на скриншоте).
Когда пользователь нажмёт на кнопку, данные передадутся на сервис в следующем формате:
{
"__amp_source_origin": "info@stripo-test.email", // email отправителя
"date": "2021-02-24", // выбранная дата
"time": "11:00" // выбранное время
"phone": "+7065343454", // введенный телефон
"name": "Олег" // введенное имя
}
Обратите внимание: __amp_source_origin — это email-адрес отправителя. В пункт автоматически подставляется почта, с которой делается рассылка (в нашем случае это info@stripo-test.email). Готовый сервис должен в ответе возвращать в заголовках этот адрес, чтобы прокси Google работал корректно.
Проблема 3. Добавить ID специалиста и кабинета
Нам нужны были ID врача и кабинета, в котором доктор принимает пациентов. Иначе создать запись не удалось бы.
Решение оказалось довольно простым. Нужно было добавить поле "input" с полями "ID врача" и "ID кабинета" в шаблон письма. Код конечной точки изменился, но незначительно:
В итоге мы справились с задачей. Вот так выглядит форма с интерактивным блоком:
Что в итоге?
АМР — классная, но ещё развивающаяся технология. В блоках могут встречаться баги. Потому, если захотите внедрить в письмо интерактивный элемент, приготовьтесь к трудностям. Некоторые удастся решить самостоятельно или с помощью техподдержки, но порой придётся обращаться к программистам. Впрочем, сложности — не повод отказываться от интерактива в письмах. По статистике, рассылки с АМР открывают на 128% чаще, по ссылкам переходят на 133% чаще.
Планируете внедрить письма с интерактивным блоком, но нет желания настраивать? Свяжитесь с нами. Сделаем.
