Создание HTML и AMP писем одновременно и без напрягов
Емейл-канал остается одним из наиболее эффективных в маркетинге, хотя используется давно, а изменений претерпел не так уж много. Последним из них стало появление технологии AMP for email, поддержку которой объявили Gmail, Mail. ru и Verizon Media: Yahoo и AOL. С ее помощью можно активно взаимодействовать как с пользователем, так и с сервером непосредственно из письма, что значительно увеличивает потенциал классических емейлов.
Узнайте больше о возможностях AMP for email из официальной документации.
Развитие AMP замедляется сложностью и дороговизной — вместе c HTML-письмом необходимо разрабатывать и его AMP-версию.
Основной сложностью классических HTML-писем является кроссплатформенность: емейл-верстка должна одинаково хорошо отображаться в веб-интерфейсах, почтовых клиентах вроде Outlook или Lotus, а также в мобильных приложениях, причем как с поддержкой медиазапросов, так и без нее.
Для решения этих задач был разработан емейл фреймворк, получивший название Ampier, а язык разметки, используемый фреймворком — TJML. Именно об этом новом фреймворке и пойдет речь ниже.
Подключение
Для работы фреймворка необходимо подключить js и css файлы. Это можно сделать добавив сразу после <body> следующий JavaScript код:
Такой вариант позволит избежать нежелательного кеширования и всегда использовать актуальную версию фреймворка.
Файлы можно подключить и напрямую, скачав app.js и app.css на GitHub.
Постройте в <body> следующую структуру:
В браузере появится панель инструментов фреймворка:
Интерфейс фреймворка
Отображение HTML и AMP-версий емейла иногда отличается (текстом, наличием форм, каруселей и т.д.), поэтому первый элемент управления — это переключение режимов AMP и HTML.
Следующий элемент панели — переключатель десктопной и мобильной версии емейла. Он позволяет проверить работу медиазапросов, перестроение и отображение мобильной версии в целом.
Режим Dark Mode Check показывает, как отобразится письмо в темной теме. Это, главным образом, относится к мобильным приложениям, но и в веб-интерфейсах некоторых почтовиков есть подобный режим преобразования.
У всех немного отличается формирование темной темы, но есть два базовых варианта:
- преобразование только светлого в темное;
- полная инверсия цвета (светлое — в темное, а темное — в светлое) — данный вариант характерен для Gmail на iOS.
Подробнее про особенности формирования темной темы можно посмотреть в статье.
Для выхода из режима Dark Mode Check нажмите < Back.
Данная кнопка делает полный скрин письма в один клик. Это удобно, например, когда нужно согласовать с дизайнером, как отображается мобильная версия или темная тема.
Переключатель отображения кода позволяет увидеть непосредственно сгенерированный HTML или AMP код, а также скопировать его в буфер обмена или сохранить в виде файла. Важной особенностью является то, что фреймворк вычисляет размер результирующего кода, поскольку Gmail и некоторые другие почтовики обрезают слишком большие письма. Если размер результирующего код превысит рекомендуемый, фреймворк выделит его красным цветом. Здесь же можно сжать код перед сохранением.
Автозавершение
Для продуктов JetBrains — PhpStorm и WebStorm — вы можете подключить web-types.json и использовать автозавершение: подсказки о доступных тегах, атрибутах и их значениях. Или же просто скачайте стартпак.
Начало работы
Итак, фреймворк подключен, что дальше?
Прежде всего необходимо ознакомиться с документацией — в рамках статьи нет смысла дублировать ее содержание, я опишу лишь базовые принципы.
Классическая емейл верстка строится на таблично-блочном подходе — разметка осуществляется с помощью таблиц, а для блоков, которые необходимо перестроить, используются инлайн-блочное отображение (совместно с условными комментариями для Outlook).
Фреймворк же оперирует тремя абстракциями, на основе которых строится структура:
- обертка (m-wrap) — применяется для задания фона, ограничения размера или же для указания выравнивания;
- перестраивающиеся блоки (m-boxes и m-box);
- не перестраивающиеся блоки (m-row и m-column).
Данный подход позволяет реализовать любую структуру в рамках письма. Помимо тегов, отвечающих за структуру, есть текст (m-text), кнопка (m-button), картинка (m-img) и другие.
Для наглядности давайте сверстаем простое письмо на TJML
Зададим цвет всего письма, прописав его в m-body. Также здесь укажем шрифт по умолчанию: его начертание, размер и цвет.
В данном случае, мы видим из документации, что многие значения соответствуют значениям по-умолчанию, а значит конструкцию можно сократить до
Далее нам нужно задать обрамление для ограничения ширины. Фоновый цвет пока указывать не будем, так как у футера нет фона.
Внутри нам нужно сделать еще 2 обрамления — для футера и для основного контента.
Теперь подробнее рассмотрим контент (то есть то что мы вставим вместо ! -- content --> )
В «шапке» мы видим 2 блока — логотип и телефон. Они хорошо уместятся на мобильном экране в 1 строку, т.е. блоки будут неперестраивающимися:
Далее следует картинка:
И текст, выровненный по левому краю с отступами в 20px:
Ниже расположены две карточки, которые в мобильной версии явно хотелось бы перестроить друг под друга:
Код второго блока m-box идентичен, поэтому его приводить не будем. Достаточно скопировать первый блок и вставить его следом. При этом не нужно думать о разбиении на строки\столбцы для Microsoft Outlook — условные комментарии будут автоматически рассчитаны и вставлены в HTML-версию письма.
А код футера представляет собой уже знакомый m-text, но в этот раз мы перезададим значения по-умолчанию:
TJML код в чистом виде пока не поддерживается большинством ESP, поэтому для загрузки письма в ESP нам потребуется выгрузить HTML и AMP код. Для этого можно нажать Download справа в верхней панели. Либо включить отображение кода с помощью переключателя Show Code и скопировать его.
Переключайте режимы HTML и AMP, чтобы выгрузить соответствующий код.
Pixel Perfect
Подход Pixel Perfect очень удобен: дизайн-макет накладывается на верстку для сопоставления прямо в процессе. Он ускоряет и упрощает верстку, а главное — обеспечивает четкое соответствие дизайну.
Для использования этой возможности в Ampier framework необходимо прописать атрибут pixel-perfect тегу tj-ui с указанием адреса дизайн-макета:
После этого в интерфейсе появится переключатель pixel-perfect, который активирует панель:
Для более точного наложения макета на вёрстку укажите смещение в пикселях (X и Y) вручную или воспользуйтесь стрелками.
Центральная кнопка задает режим наложения: обычный или «Вычитание»:
HTML в TJML
Использование специального синтаксиса TJML необходимо для преобразования этого кода в результирующий HTML-код (который обеспечивает одинаковый и корректный рендеринг в различных веб-интерфейсах и почтовых клиентах), а также позволяет преобразовать TJML в AMP-код, который пройдет валидацию.
Но в рамках фреймворка допускается и произвольный HTML-код, правда, при рендеринге HTML и AMP версии такой код останется без изменений. Например, использование тега <img> вместо <m-img> позволит корректно отобразить письмо в HTML-режиме, но вызовет ошибку при AMP-рендеринге. Так что эту возможность следует использовать осторожно, фактически взяв на себя ответственность за корректную работу и отображение финального кода.
Возможность размещения произвольного HTML-кода в рамках Ampier-framework также может использоваться для проверки отображения старых писем в темной теме. Для этого их содержимое нужно разместить в <m-body>.
Условный рендеринг AMP и HTML
Контент HTML и AMP-версий часто отличается, например, в HTML пользователю предлагают перейти на веб-версию AMP-письма. Возникает вопрос: как реализовать эти различия в рамках единого TJML-кода?
Здесь поможет условный оператор m-if где проверяется булевая переменная isAmp, которая:
- истина (true) при рендеринге AMP версии;
- ложна (false) при рендеринге HTML версии.
Используя эту же переменную и отрицание !isAmp, можно проверить, является ли текущая версия HTML.
Получаем:
- m-if="isAmp" — тег и его содержимое отобразится только в AMP-версии письма;
- m-if="!isAmp" — тег и его содержимое отобразится только в HTML-версии письма.
AMP-теги и их особенности
В AMP для использования amp-bind часто применяются атрибуты в квадратных скобках. В качестве их значения указывается состояние, например [class]=”myState”.
В TJML коде такая запись вызовет ошибку, поэтому динамические атрибуты, которые будут зависеть от состояний, нужно записывать следующий образом:
data-amp-class=”myState”
В общем виде запись будет выглядеть так:
где attribute — это атрибут, значение которого предполагается менять динамически через состояния. Список допустимых атрибутов и тегов можно посмотреть в официальной документации AMP.
Чаще всего HTML — это упрощенная версия AMP-письма, и фреймворк Ampier способствует этому. Например, карусель рендерится в HTML-версии как первый слайд этой карусели. По аналогии работают и другие элементы, характерные для AMP.
AMP mustache
При использовании форм и обработке ответов, при работе с amp-list и в других ситуациях обычно используются шаблоны Mustache. В TJML для этого предусмотрен тег m-template, аналогичный тегу template в AMP. Но есть одно важное отличие: переменные в m-template следует заключать не в фигурные {{ myVar }}, а в квадратные скобки [[ myVar ]].
AMP-формы и генерирование форм Ampier
Зачастую, говоря про AMP-письма, мы подразумеваем именно формы: возможность отправить информацию о действиях пользователя или другие данные на сервер. Естественно, для обработки этих данных и их хранения нужны другие инструменты — здесь нам и поможет сервис Ampier. Он интегрируется с фреймворком Ampier напрямую и позволяет сформировать необходимую структуру для хранения данных.
Для этого вам может потребоваться вспомогательная разметка форм и их элементов.
Атрибут data-title для m-form позволяет дать название компоненту. Это не обязательно, но с ним будет проще ориентироваться в статистике, особенно если в письме несколько форм.
Атрибут data-title можно задать также элементам форм (input, select, textarea), чтобы присвоить понятные названия и им.
Для элемента форм вы можете указать обязательность заполнения — используйте атрибут data-required со значением 1:
data-required="1"
Чтобы сформировать компонент в сервисе Ampier из TJML-кода, нажмите Save to Ampier: код и изображения экспортируются, а также сформируется необходимая структура данных на сервере для их хранения.
Результаты
В течение года фреймворк Ampier активно используется крупным российским маркетинговым агентством. На начальных этапах внедрения мы провели тестирование и увидели прирост производительности в среднем на 51.4% при расчете только HTML-писем (на тот момент AMP-рендеринг был в разработке). Причем увеличение производительности не сказывается на качестве конечного результата и не накладывает ограничений на структуру и дизайн.
При использовании AMP-рендеринга производительность в среднем вырастает на 150% за счет экономии на верстке HTML-версии и автоматического формирования AMP-версии письма.
Есть недорогие конструкторы, которые собирают amp письма. Проблема ещё в том, что нужно отправлять заявки на подтверждение отправки таких писем, ждать неделю, технические настройки для отправки amp (та же возможность отправки данных для обратной связи вызовет кучу проблем). И насколько помню в том же mail не везде работает amp технология (PC, мобильный браузеры)
Да, конструкторы есть, но они сильно ограничивают возможности и зачастую предлагают лишь карусели, аккордеоны и какие-то стандартные механики. Используя же TJML никакие ограничения не накладываются.
В рамках проекта Ampier мы занимаемся разработкой целой экосистемы для упрощения создания и отправки AMP-писем. В этой статье я рассказал лишь про 1 инструмент - Ampier framework, который подойдет фронтенд-разработчикам и верстальщикам. Помимо него у нас есть одноименный плагин для Figma, который также позволяет создавать HTML и AMP письма, но уже дизайнерам.
А также сервис Ampier, который позволяет хранить и обрабатывать данные форм, формировать данные для amp-list и много чего еще.
Для отправки AMP-писем необходимо соответствовать ряду технических требований, а также заполнить заявку на добавление в "белый список". Да, процедура одобрения обычно составляет около недели (а затем еще неделю нужно ожидать до "применения" изменений в случае с gmail), но это требуется сделать лишь однажды для адреса отправителя.
Говоря про поддержку технологии AMP - сейчас она поддерживается в веб-интерфейсе mail.ru, gmail, yahoo, aol, а также в мобильных приложениях mail.ru и gmail на iOS и Android. По опыту работы с различными компаниями AMP-версию письма видит чуть больше половины подписчиков для России и чуть меньше половины для Америки.