Технология АМР (Accelerated Mobile Pages) превращает email-рассылки в аналог веб-сайтов. Пользователи могут прямо в письме выполнить целевое действие: оформить заказ, забронировать билеты или выбрать дату встречи с врачом. Клиент обратился к нам с задачей — подготовить письмо с АМП-элементом «Календарь», чтобы подписчики могли без перехода на сайт записаться к доктору.
Рассказываем, как настраивали, с какими проблемами столкнулись и что пришлось докручивать по ходу дела. Пример календаря для записи
Механика: как должно работать письмо
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):
На его примере нужно реализовать реальный сервис, который будет возвращать данные в указанном ниже формате. После реализации сервиса нужно указать его в шаблоне вместо Mock-сервиса Stripo (как показано на скриншоте) Сервис с адресом end-point В момент, когда письмо открывается, данные загружаются в таком формате:
date-range — диапазон дат, которые есть в JSON. Только эти даты будут активны в календаре. Тут можно указать только две даты — первую и последнюю.
times — массив с временными слотами. В нём должны быть перечислены все даты, входящие в диапазон. Если в какую-то дату нет доступного времени, её нужно оставить с пустым массивом "times", не удалять. Если какой-то даты из диапазона не будет, надпись «На эту дату записи нет» не отобразится, вместо неё будет пустой блок.
date — дата.
t — время. В массиве times должны быть перечислены все доступные часы. Если врач свободен с 10:00 до 13:00 и принимает раз в час, массив будет выглядеть таким образом:
На его примере нужно создать реальный сервис, который будет принимать данные в указанном ниже формате и корректно их обрабатывать.
После реализации сервиса нужно указать его в шаблоне вместо 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 кабинета" в шаблон письма. Код конечной точки изменился, но незначительно: Добавить поле "input" В итоге мы справились с задачей. Вот так выглядит форма с интерактивным блоком: Результат: календарь в письме
Что в итоге?
АМР — классная, но ещё развивающаяся технология. В блоках могут встречаться баги. Потому, если захотите внедрить в письмо интерактивный элемент, приготовьтесь к трудностям. Некоторые удастся решить самостоятельно или с помощью техподдержки, но порой придётся обращаться к программистам. Впрочем, сложности — не повод отказываться от интерактива в письмах. По статистике, рассылки с АМР открывают на 128% чаще, по ссылкам переходят на 133% чаще.
Планируете внедрить письма с интерактивным блоком, но нет желания настраивать? Свяжитесь с нами. Сделаем.