Logo

AMP for email: как создавать и тестировать интерактивные письма

Любовь Роленко

Web-дизайнер и верстальщик Stripo.email

На вебинаре рассмотрели такие вопросы:

  1. Какие интерактивные элементы можно создать без особых знаний верстки
  2. Основные инструменты, необходимые для верстки AMP-писем
  3. Как добавить AMP в ваше письмо, практика и разбор кода

Первый пример – это небольшая форма опросов, после заполнения которой пользователь увидит промокод. Давайте посмотрим, как она работает. Итак, выбираем какой-то ответ. Заполнили форму, нажимаем “Отправить” и видим “Спасибо” и какой-нибудь код. Также можно скрывать эту форму при появлении ответа.

Еще один пример – заказ пиццы. Здесь есть несколько вариантов начинок, и при клике на какую-то из них мы меняем цену, название и картинку. Цена, название и картинка увеличиваются при клике. Вот такая симпатичная форма, ее мы тоже разберем в деталях. Давайте посмотрим, какие инструменты нам понадобятся. Верстать я буду в Stripo. Если кто-то хочет верстать, не используя редактор, вы можете выбрать свой любимый html-редактор – у меня Sublime, возможно, я в нем сегодня тоже немного покажу. 

Верстаем это как обычное html-письмо, просто с использованием необходимых элементов. Первое, что нам понадобится, – это Playground для тестирования нашей верстки. Дальше – документация Google. Здесь она частично переведена на русский язык, то есть некоторые страницы не переведены, некоторые переведены, и она довольно удобная. Если разберетесь с документацией, у вас проблем не будет. Еще есть такой инструмент Stripo Swagger – он специально для тестирования таких писем, которым необходим какой-то запрос на сервер. Когда мы загружаем в письме последние статьи или, как в примере, заполним форму и захотим отправить это на сервер, то в Swagger вы сможете настроить запросы, настроить JSON и протестировать это все. 

Чем отличается HTML-письмо от AMP

Я сразу расскажу, чем отличается HTML-письмо от AMP. Зайдем в документацию, здесь у них страничка Start и указаны основные моменты. Во всех AMP-письмах в HTML обязательно добавляется специальный атрибут. Также присутствует основной скрипт, который должен быть в каждом AMP-письме. Дальше, когда вы подключаете какой-то компонент, у каждого компонента есть еще свой дополнительный скрипт. То есть мы будем добавлять скрипты по ходу использования каких-то компонентов. И также обязательно блок Style – он скрывает AMP-элементы, пока они не загрузились. 

Дальше идет обычная верстка с некоторыми нюансами. Например, тега img в AMP нет. Они заменили картинки на свой специальный тег amp-img. В принципе, здесь абсолютно те же атрибуты, единственное, что обязательна ширина и высота картинки в пикселях. Еще один момент в Style: когда вы добавляете свой тег style со своими стилями, обязательно нужно добавить атрибут amp-custom. Все эти моменты вам покажет валидатор – если вы что-то забыли, не переживайте. Как только ставите свой код, здесь будет перечень ошибок. Если вы верстаете в Stripo, тогда вам даже не нужно думать об этих основных элементах. Как только вы свою верстку из Stripo экспортируете в формат AMPHTML, то автоматически будут проставлены все необходимые теги, всем тегам style будет добавлен этот атрибут, то есть все очистится.

Еще есть перечень атрибутов, которые AMP не поддерживает. Это в основном все атрибуты с приставкой о стиле bouquet. Валидатор вам их покажет, также на превью письма в версии AMPHTML, если в ней будут какие-то ошибки, появится такая небольшая улыбка с количеством ошибок. Это сейчас увидим при верстке – сделаем ошибку и посмотрим, как это выглядит. Если вы верстаете самостоятельно в своем редакторе, обязательно вставляйте периодически код в валидатор и проверяйте на ошибки. Потому что запомнить все атрибуты, которые он не поддерживает, очень сложно. Просто вставляйте, проверяйте, убирайте лишнее, добавляйте то, что нужно. Если верстаете в Stripo, смотрите на предпросмотре, есть ошибки или нет. Вставляете кусок AMP-кода, и автоматический редактор подставит необходимые скрипты.

Автоматизируйте email-маркетинг без программистов с eSputnik

Верстка формы опроса

Вставляем пустую структуру. Я буду рядом с этой формой верстать html-блок. В принципе, если вы верстаете у себя в редакторе, вы можете делать абсолютно то же самое. Нам нужна форма, чтобы отправить какие-то данные на сервер. Давайте теперь выберем документацию компонента. Обратите внимание, чтобы здесь был именно email, не веб-сайт. Потому что есть и для того, и для того документация. AMP-form: обратите внимание на вот эту шапочку. У каждого компонента сверху написан скрипт, который необходимо подключить, чтобы он работал. 

Напомним, в Stripo они подключаются автоматически, вам не нужно копировать этот скрипт, но если вы верстаете в другом месте, то обязательно в шапку вставлять скрипт каждый раз, когда вы используйте новый компонент. Если вы забыли подключить, вставьте в валидатор, вам обязательно это напишет. Пример простенькой формы. В принципе, мы можем ее скопировать и поменять то, что нам нужно. 

Вставляем наш HTML в форму. Вот такая форма у нас по умолчанию изначально появляется. Сейчас открою более расписанный код. Итак, это обычная html-форма. Ей можно добавить какой-нибудь id, чтобы легче было прописывать стили или как-то к ней обращаться. Method в данном случае Post, потому что мы отправляем какие-то данные на сервер. Если бы мы хотели забирать данные с сервера и показывать у нас в письме, тогда метод был бы Get. 

Вот здесь немного отличается атрибут от стандартного атрибута html – это специальный Google AMP атрибут. Здесь написана ссылка на сервер, на ту страницу, где мы обрабатываем этот запрос. На данный момент это ссылка на наш тестовый сервер Swagger. Но когда вы уже будете отправлять настоящее письмо своим пользователям, вам нужно будет поставить ссылку на свой сервер и настроить на нем обработку запросов.

Также на сервере нужно будет настроить CORS-политику – все это написано в документации Google. То есть вам достаточно обратиться к своему администратору, дать эту ссылку на CORS-политику, чтобы он все настроил. Потому что наш тестовый сервер Swagger только для тестов, вы не сможете отправлять письма, которые ссылаются на него, своим пользователям.

Ссылка у нас есть, и дальше мы видим: здесь идет набор полей. Поля могут быть абсолютно разные, вот сейчас тут input type и input type email. Это текстовое поле, мы можем ввести сюда какое-нибудь имя, текст, и такое же поле, только для email. Это все html5, его поддерживает AMP, поэтому можно вставлять input типа data. Например, он будет с календарем, или добавлять такие атрибуты как required. Этот атрибут значит, что поле обязательно и форма не отправится, если вы его не заполните.

Давайте попробуем отправить пустую форму. Нажимаем, и вы видите сообщение: “Заполните это поле”. То есть если вы добавили атрибут required, то вам браузер не позволит отправить пустую форму. Этот атрибут не обязателен – можете добавлять, можете нет, на ваше усмотрение. У нас два поля на данный момент и input type submit со значением «отправить» – это наша кнопочка. Пока что здесь subscribe, мы ее переименуем. То есть вот именно такая кнопка отправляет нашу форму. Она должна обязательно быть, без нее ничего не будет работать. 

Обратите внимание, что это все я взяла в такой вот тег div с классом hidden. Зачем я это сделала? Для того чтобы после того, как мы отправили форму, она спряталась. Мы это дополнительно пропишем в CSS, чтобы после отправки не было этой формы, а просто появилось сообщение, что все хорошо. 

Дальше вот в этом же компоненте form используются два вот таких блока: div с атрибутом submit-success и с атрибутом submit-error. В этих блоках мы пишем то, что будет показываться после отправления формы. В submit-success после того, как форма успешно отправилась, и в блоке error, если какая-то ошибка. Это все есть в документации, мы вот абсолютно такую же форму скопировали.

В принципе, основные моменты я рассказала, давайте попробуем это сверстать. Вот мы вставили из документации форму, код и перешли на предварительный просмотр, и вот ошибка: атрибут target не поддерживается в теге form. Нажимаем «Исправить в редакторе кода».

Вот у нас есть форма, я выбрала наш блок, форма с атрибутом target. И да, действительно этот атрибут для веб-сайтов, email пока что не поддерживает AMP email. Почему так? Почему в документации пример с таким элементом? На данный момент документация дорабатывается и, к сожалению, еще не все компоненты описаны именно для email. Здесь она смешанная, и проскакивают такие атрибуты, которые на данный момент не поддерживаются. Поэтому, даже если вы берете код из документации, проверяйте его. Мы просто удалим это. 

Вы могли заметить, что поля у нас не очень красивые. Да, стиля по умолчанию нет, его придется дописывать самостоятельно или добавить в CSS. Но какие-то элементы можно, например, взять. Давайте вместо label мы поставим тег «p», и у нас уже подтянулись какие-то стили по умолчанию, текст стал более маленьким и симпатичным. 

В форме ниже я добавила такое: radio button, обычное текстовое поле и text area. Можно повторить то же самое. Также вы можете добавить сюда checkbox, разные текстовые поля, поля даты, цифровые или время – это уже ваша фантазия и ваши потребности. 

Что у нас первое? Просто вопрос про цену. Убираем input, он нам тут не понадобится, и добавим сюда radio button. Мы можем посмотреть в документации – здесь тоже есть примеры с другими элементами. Можно посмотреть: здесь есть input name, value, type radio.

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

Что мы сделали? Добавили 2 radio button. Обратите внимание: если мы хотим, чтобы пользователь выбрал только одно значение, name должен быть одинаковый. Если бы это были checkbox, то пользователь мог бы выбирать сколько угодно значений, тогда name у каждого был бы разный. Нам только одно нужно, поэтому мы пишем одно. Value – это то, что нам будет отправлено на сервер, значение этого поля. Ну и type radio говорит, что это вот такой кружочек. Теперь посмотрим на предварительном просмотре. Они нажимаются, но хотелось бы, чтобы еще и по тексту можно было кликнуть. Давайте это сделаем, это просто: нужно добавить тег label. Мы сам input и текст оборачиваем в label. Таким образом, даже при клике по тексту будет отмечаться наш radio button. 

Теперь давайте добавим просто текстовое поле. В принципе, у нас уже есть input, мы его просто немного поправим. Возьмем все в параграф сделаем. Теперь input type нужен text, потому что это будет просто текстовое поле. Здесь можно писать name какой угодно, но желательно более понятный. Представим, у нас здесь цена. Давайте так и напишем – price. А здесь был вопрос «Товар соответствовал описанию?», тогда можно name написать goods.

Смотрится не очень, но можно сделать в разных параграфах. У нас каждый элемент в своем параграфе, и таким образом они переносятся. Можно еще добавить немного отступ. Чтобы добавить какой-то стиль, мы прописываем атрибут style. Здесь уже пишем все стили, которые хотели бы применить к этому элементу. Давайте напишем отступ снизу, это у нас padding bottom и 10 px, точка с запятой.

Теперь значение input type text у нас есть, name мы ему добавили, сделали обязательным полем для заполнения. Давайте добавим стилей этому текстовому полю. Пишем style, добавить padding – это внутренний отступ сделать больше. Нужно еще добавить border radius 3 px – закругления небольшое, и сам border другой – 1 px. Все стили мы просто пишем через точку с запятой в строку. Можно еще добавить ширину, width поставим 220 px. Хотелось бы добавить еще большое текстовое поле для большого отзыва.

Опять вставим параграф, напишем здесь «Ваш отзыв» и под ним text area. Можем скопировать те же стили сюда, только тут есть у него специальные атрибуты, с помощью которых можно управлять его шириной и высотой. Уберем ширину стилей.

Rows говорит, сколько строчек у нас будет. Например, мы добавим 6 – он станет выше. Cols – сколько вертикально колонок, то есть управляет его шириной. Мы можем добавить небольшой отступ под текстовым полем, копировать этот стиль и вставить его вот сюда.

Input type submit – здесь просто поменяем value, напишем «Отправить». Здесь – «Спасибо за ваш отзыв». Тут пока просто напишем «Ошибка». Наша форма готова. Делаем ее AMP, переходим на предпросмотр и проверяем. Ошибок никаких не видно: здесь все нажимается, что-то можно написать, все в порядке. Теперь нам нужна ссылка, куда на сервер мы это будем отправлять.

О работе в Swagger

Сейчас я вам расскажу о Swagger. Если вы зайдете, то внизу увидите три пункта, которые нам понадобятся. Первый пункт – «Прочитать и создать конечную точку». Конечной точкой и я буду называть ссылку, по которой ваша форма обращается, чтобы что-то получить или записать. То есть это будет конечная точка. В первом пункте Get вы можете просмотреть все точки, которые созданы. Например, здесь при создании точки есть название для точки и группа, по которым вы можете посмотреть все, что уже создано. 

Во втором можно создать эту точку. Обратите внимание: здесь есть два метода – Post или Get. Post используется, если мы отправляем что-то на сервер. В нашей форме, к примеру, мы будем использовать Post. Get используется, если мы что-то показываем с сервера – список статей в письме выводим или еще какие-то данные. Мы сейчас создадим эту точку вместе. Второй пункт нам сегодня не понадобится. Здесь можно протестировать эти точки, если у вас, например, нет сейчас формы в письме, но вы хотите настроить какую-то точку и посмотреть, что она действительно работает. Здесь как бы имитации отправки каких-то данных, или наоборот вы можете ввести какое-то название точки и увидеть, что вы получите. 

В последнем пункте можно посмотреть данные, которые мы отправили с формы с письма. Мы заходим в первый пункт, выбираем Post для создания. Здесь написан пример, показан JSON, все по шаблону. Нажимаем Try it out и заполняем. Название точки любое, какое вам кажется понятным. Я напишу Opinion. Group – здесь удобная для вас группа названий, кампаний или слово, которым вы хотите сгруппировать все ваши точки. Я просто могу написать Test. Method – мы хотим отправлять данные с формы на сервер, значит и оставляем Post. Response – здесь вот такой момент: после того как мы отправили форму, мы хотим получить промокод. Тут мы напишем этот промокод. Нам понадобится только один пункт, и раз это только один пункт, мы уберем лишние скобки. Назовем его просто Сode – это ключ. Я покажу, куда мы его сейчас впишем в письме. Code напишем PROMO, цифры – это наш промокод.

Спускаемся ниже, нажимаем Execute. Еще ниже у нас очень много всего. Нужно посмотреть сюда, здесь написано 200, значит все в порядке. Написан пример того, что мы получили со ссылкой. Эту ссылку мы и будем подключать у нас в письме. Копируем ее, выбираем нашу форму, которую мы только что заполняли. Вот form, action, вставляем нашу ссылку. Теперь промокод. Я написала здесь переменный код, копируем его тоже. Нам нужно его вывести, когда человек заполнил и отправил форму, то есть вот здесь «Спасибо за ваш отзыв» и промокод. 

Фигурные скобки – это компонент специальный, переводится как «усы», и если перевернуть, похоже на усы. Здесь даже на русском можно почитать «Тег для переменной, который выводит значение переменной». Это специальная запись для каких-то переменных, которые нам присылает сервер. Благодаря этой записи, когда мы получим значение, выведется именно значение, а не сама переменная. Для тех, кто верстает самостоятельно, используя вот такие скобки: вы должны подключить в шапке этот скрипт.

Давайте посмотрим, что у нас получилось. Какой-нибудь текст отправить, спасибо за ваш отзыв, PROMO123. Мы получили этот элемент, и теперь можно в последнем пункте check проверить, действительно ли эти данные были записаны на сервере. Открываем, нажимаем Try it out, здесь просят заполнить Endpoint название – мы писали Opinion, и группа была test. Execute, пролистываем вниз и видим price, yes, goods, буквы, которые мы вписали. Я забыла добавить name. Вы видите: если не добавлять полям name, мы не получим их значения. Давайте просто напишем Text. 

Еще посмотрим, как скрывать эту форму. Вернусь к Swagger: с помощью этого инструмента можно тестировать, проверять. Если какие-то будут вопросы по этому инструменту, обращайтесь в техподдержку, мы всегда поможем и объясним более подробно. Можно удалить вторую форму, чтобы не мешала. Давайте сделаем так, чтобы при отправке у нас пропадала основная форма. Я показывала, что добавила div с каким-то классом, который вы можете назвать как угодно, и hidden написала. И в этот div мы завернем все, что хотим спрятать, вместе с кнопкой «Отправить». Все поля мы просто завернули в div. И как же теперь его спрятать? После отправки форм автоматически добавляется какой-то из этих классов. Если отправка успешна – success, если не успешна – error. Мы можем привязаться к этому классу и в случае успешной отправки просто скрывать этот блок, который мы обернули в div. 

Открываем CSS, это нужно писать именно в CSS подключенном, потому что онлайн работать не будет. Класс нашей формы, и дальше указываем класс div, который мы написали, и простой стиль display none. Проверим: отправить, форма спряталась, ответ у нас пока что не застиленный, но его можно сделать красивым с отступами и с каким-то шрифтом. Это письмо мы разобрали. 

Верстка шаблона выбора товара

Следующий шаблон, который хотелось бы рассмотреть, вот такая пицца – выбор товара. Необязательно пицца, может быть одежда, обувь, что угодно. Это письмо я не буду верстать с нуля, просто покажу, как это работает. У меня вынесен этот код отдельно в файл, давайте посмотрим здесь. Я открою предпросмотр, чтобы показывать, как это работает, как это верстается. Идея такая: при клике на какой-то элемент, на какую-то начинку у нас меняется картинка, заголовок и цена. Давайте посмотрим с картинкой. Получается три картинки на каждую начинку. Когда активна одна, то все остальные просто скрыты. Вот amp-img одна, вторая, третья. Здесь стандартные src, width, height, я не буду останавливаться на них. Основной элемент – это еще один компонент – amp-bind, он переведен, можно почитать, как он работает, что с ним и куда. Основная идея этого элемента, что какие-то атрибуты, как например, атрибут hidden, мы можем менять динамически. Также и атрибут text. Такого атрибута нет, но вот в AMP это есть. 

Мы можем наш текст заменять с помощью этого атрибута. Как только меняется переменная, которая находится здесь, автоматически заменяется значения: h2 обычный тег заголовка. Все атрибуты в квадратных скобках уже автоматически считаются, как вот эти атрибуты bind. И здесь мы указываем переменную, в которой будет храниться значение нашего элемента. У картинок то же самое: мы меняем атрибут hidden, то есть картинка или скрыта, или показана. Обратите внимание, что первое у нас по умолчанию показано, остальные скрыты, у них уже есть атрибут hidden.

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

Вот верстка наших трех картинок. Для того чтобы при клике на эти элементы что-то менялось, нужен специальный элемент amp-selector – это и плюс, и минус. В одном письме может сочетаться множество элементов, они дают огромную возможность делать множество интересных вещей, но это и путает. Поэтому нужно ознакомиться со всеми элементами, чтобы понимать, как это работает. 

Селектор: русский перевод есть, здесь написаны все основные принципы использования и так далее. У нас есть селектор, у которого name stuffing. Name нужен для того, чтобы, если мы все это будем отправлять на сервер, выбранное значение отправилась. AMP-selector работает как любой набор тех же чекбоксов или radio button. Представим, есть атрибут selected, в котором присваивается значение выбранного элемента. То есть обычный radio button, просто с другим синтаксисом. Мы указываем, что в значение выбранного элемента будет записываться переменная selected stuffing. Здесь сложно, потому что мы используем не одно значение, а несколько. То есть при клике мы меняем и название, и картинку, которая у нас зависит от выбранной начинки, и цену. Поэтому мы пишем такой массив.

Название 

Указываем название (переменный продукт), у него 3 значения. Пишем product.selectedStuffing или точка selectedTitle. Здесь это тоже из amp-bind. Что это говорит? При нажатии на этот элемент мы устанавливаем значение каких-то переменных и в скобках специальных описываем те переменные, которые меняем. Каждому элементу мы указываем, какие переменные и какое значение они будут иметь. Все переменные у нас одинаковые, мы просто меняем им значение. 

Вернемся к картинкам. При клике на какой-то элемент мы поменяли выбранную начинку. В зависимости от того, какую начинку мы выбрали, показывается та или иная картинка.

Кроме того, что они меняются при изменении, они также увеличиваются. Это еще один компонент, он довольно простой, его можно применять ко всем картинкам. 

Здесь описано основное, что необходимо. Есть картинка, вызываем какой-то lightbox. Здесь указывается айдишник вот этого элемента – это как обложка: вот amp-image-box вставляется один раз для всего набора картинок, и у каждой картинки мы просто указываем айдишник этого элемента.

У каждой картинки есть on tap:gallery-lightbox. Здесь у второй картинки то же самое, у третьей то же самое. И вот этот блок с айдишником gallery-lightbox. Layout – этот атрибут говорит, что новый дисплей не будет показан, пока мы не скажем «Покажи», он будет скрыт. Все атрибуты описаны в документации, если вы что-то забудете, валидатор вам обязательно подскажет. Благодаря этому у нас увеличивается каждая картинка, на которую мы нажмем.

Заголовок

Заголовок, о котором я уже говорила. Текст меняется. Здесь вставляется значение вот этой переменной в текст selectedTitle. Сначала по умолчанию мы поставили первое Diavolo, потом мы выбираем: меняется на Pollo или на Padena. С ценой то же самое – в самом низу у нас есть цена, здесь опять же текст, только переменная selectedprice. У каждого элемента тоже есть эта переменная. И каждому мы говорим: при клике будет такое значение. В документации тоже указан этот контейнер, он как обертка идет для наших начинок, для наших radio button. У элемента, который мы делаем такой кнопкой, обязательно должны быть атрибуты option, roll, tabindex. Они обязательны, без них будет ошибка, соответственно, не будет работать. Role button выполняет роль кнопки, option здесь с нашим названием, чтобы отличать их друг от друга. Tabindex – это когда мы нажимаем на клавиатуре tab, он переходит из одного элемента ко второму, здесь учтен порядок перехода. 

В коде абсолютно то же самое, здесь очень много стилей, и выглядит оно не совсем читабельно. Здесь тоже AMP.setState, то есть я просто вынесла файл, более красиво оформила. Можно отправить это письмо себе на почту и посмотреть, как оно будет работать. 

Также у нас есть еще вторая часть этого письма. Если нажать Complete, мы увидим форму с доставкой. Это все можно реализовать таким же способом, как мы отправляли предыдущую форму. Или же можно при клике скрывать этот блок и показывать другой блок, так проще. А потом, когда мы заполним второй, отправлять все вместе на сервер. 

Тестирование

Пришло письмо, давайте глянем, что у нас получилось. Вот наш AMP-контент, нажимаю, все меняется: название, цена, картинка увеличивается. Обратите внимание: если вы хотите увидеть отправленный тест у себя в почте, нужно зайти в настройки, пролистать чуть ниже, пункт «Динамический контент». Во-первых, галочка «Включить» должна быть. Во-вторых, если нажать «Настройки для разработчиков», здесь этот адрес должен быть. Это только чтобы увидеть наши тесты. Когда пользователь уже отправляет через систему рассылки писем, тогда не нужно добавлять. Это только для тестирования именно из Stripo. В Mail.ru не нужно ничего добавлять, в новой версии почтового клиента автоматически будут у вас отображаться эти письма. Здесь мы тоже можем нажать Complete, заполнить что-то и отправить на сервер несколько шагов. Комбинируя какие-то элементы – ту форму, которую мы делали в первом примере, и вот этот блок с товарами – вы можете делать разнообразные письма.

Special Request Inline