Содержание

Создание первого AMP-письма

Формат «AMP для писем» позволяет отправителям электронной почты использовать AMP в своих сообщениях электронной почты, обеспечивая поддержку целого ряда новых функций. Электронные письма, созданные с помощью AMP, могут содержать интерактивные элементы (такие как кольцевые галереи изображений или аккордеоны), а также обновлять включенный в сообщение контент; получатели таких писем могут выполнять определенные действия, например отвечать на форму, не покидая своего почтового ящика.

Формат «AMP для писем» совместим с существующими электронными письмами. AMP-версия сообщения встраивается в электронное письмо как новый MIME-блок, дополняющий блоки HTML и plaintext, что обеспечивает совместимость со всеми почтовыми клиентами.

Совет: со списком платформ электронной почты (ESP), клиентов и поставщиков, поддерживающих AMP для писем, можно ознакомиться в разделе Поддерживаемые платформы электронной почты на странице часто задаваемых вопросов.

Пройдите этот урок, чтобы создать и отправить свое первое динамическое электронное письмо, основанное на технологии AMP. Посмотреть его готовый код можно здесь.

Начните с шаблонного кода AMP для писем

Песочница AMP поддерживает формат AMP для писем, что позволяет вам разрабатывать, тестировать и проверять свои AMP-письма. Откройте Песочницу AMP и убедитесь, что в верхнем левом углу выбран формат AMP for Email. Вы должны увидеть следующий код:

<!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-письма. Также обратите внимание на другие образцы корректно сформированных писем, представленные в раскрывающемся списке в правом верхнем раскрывающемся меню.

Давайте рассмотрим ряд заметных отличий AMP-писем от классических электронных писем в формате HTML:

AMP-письма должны обозначать свой формат путем включения в тег html строки ⚡4email или amp4email.
Тег <head> также должен содержать <script>, загружающий среду выполнения AMP. <script async src="https://cdn.ampproject.org/v0.js"></script>
В AMP-письме должен присутствовать шаблонный код CSS, скрывающий содержимое письма до загрузки AMP. <style amp4email-boilerplate>body{visibility:hidden}</style>

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

В AMP-письма можно включать только скрипты AMP, относящиеся к совместимым компонентам.

Добавьте изображение

В AMP-письмах можно использовать большинство HTML-тегов, которые используются в электронных письмах, однако некоторые теги, такие как <img>, заменяются эквивалентным AMP-тегом <amp-img>.

Тег <amp-img> требует, чтобы ширина и высота изображения были определены, и, в отличие от <img>, <amp-img> требует наличия закрывающего тега </amp-img>.

<amp-img src="https://link/to/img.jpg" alt="photo description" width="100" height="100" > </amp-img>

Файлы GIF поддерживаются с помощью компонента <amp-anim>.

Поскольку электронные письма не размещаются на вашем сервере, URL-адреса в AMP-письмах должны использовать абсолютные пути, а также протокол HTTPS.

Placekitten — сайт, с которого можно загружать изображения котят в качестве элементов-заполнителей. Вы можете даже выбирать размеры изображения непосредственно через URL!

Чтобы включить изображение в наше первое электронное письмо, добавьте в него приведенный ниже код.

<body> <amp-img src="https://placekitten.com/800/400" alt="Welcome" width="800" height="400" > </amp-img> </body>

Сделайте его адаптивным

Электронные письма просматриваются на разных устройствах и экранах разных размеров, однако благодаря встроенной в AMP системе макетов это не проблема! Компонент amp-layout и медиа-запросы позволяют с легкостью делать электронные письма адаптивными. Чтобы добавленное нами изображение котенка подстраивалось под размер экрана, добавьте в элемент <amp-image> атрибут layout="responsive".

Подробнее о том, как AMP работает с макетом и медиа-запросами.

<amp-img layout="responsive" src="https://placekitten.com/800/400" alt="Welcome" height="400" width="800"></amp-img>

Увеличивайте и уменьшайте окно браузера, чтобы наблюдать за тем, как меняется размер изображения! Список поддерживаемых компонентов для конкретных макетов можно посмотреть здесь.

Адаптируйте способ отображения и макет

На тот случай, если одного изображения недостаточно, AMP для писем поддерживает такие элементы макета, как аккордеоны и боковые панели.

В этом уроке мы воспользуемся элементом <amp-carousel>, чтобы отобразить фотографии кошек, которые ищут хозяев.

Добавьте скрипт amp-carousel в элемент head сообщения электронной почты.

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" ></script>

Затем оберните наше первое изображение в теги <amp-carousel>.

<amp-carousel layout="responsive" width="800" height="400" type="slides"> <amp-img layout="fill" src="https://placekitten.com/800/400" alt="Welcome" height="400" width="800" ></amp-img> </amp-carousel>

Вы могли заметить, что ничего не изменилось, и это хорошо! У нашей кольцевой галереи есть атрибут type=slides, что означает, что она будет показывать по одной фотографии за раз. Поскольку мы поместили в теги только одну фотографию, пользователь не увидит стрелок прокрутки галереи.

Заменим изображение котенка внутри элемента <amp-carousel> на фотографии наших бездомных кошек.

<amp-carousel id="carousel-with-preview" width="800" height="400" layout="responsive" type="slides" on="slideChange:AMP.setState({currentCat: event.index})" > <amp-img layout="fill" src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_caleb_woods.jpg" alt="photo courtesy of Unsplash" ></amp-img> <amp-img layout="fill" src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_craig_mclaclan.jpg" alt="photo courtesy of Unsplash" ></amp-img> <amp-img layout="fill" src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_lightscape.jpg" alt="photo courtesy of Unsplash" ></amp-img> <amp-img layout="fill" src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_nick_karvounis.jpg" alt="photo courtesy of Unsplash" ></amp-img> </amp-carousel>

Теперь у вас должна быть возможность менять фотографии, нажимая на стрелки навигации с левой и правой сторон кольцевой галереи.

Будьте стильными

AMP позволяет стилизовать заголовок документа с помощью <style amp-custom>. Кроме того, теперь можно использовать ранее запрещенные классы и псевдоклассы CSS. Их полный список приведен здесь.

Давайте обновим Hello, AMP4EMAIL world и сделаем из него настоящее название.

<body> <h1>Adorable Adoptable Animals</h1> ... </body>

А затем добавим в head немного стиля.

<head> ... <style amp-custom> h1 { font-family: arial; margin: 10px; } .center { text-align: center; } .carousel-preview { margin-top: 10px; } </style> </head>

Добавьте динамические возможности

Обычно в электронных письмах допускается только статический контент. Благодаря AMP для электронных писем открывается совершенно новый мир возможностей! Теперь пользователи могут отвечать на формы, динамически обновлять содержимое списков и взаимодействовать с контентом.

В этом уроке мы будем использовать <amp-bind> для отображения имени кошки и информации о ней, когда пользователь просматривает слайд с этой кошкой. Начните с включения скрипта amp-bind в элемент head сообщения электронной почты.

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" ></script>

Далее мы объявим переменную amp-bind «myState», представив ее в виде строки JSON внутри тега <amp-state>. Поскольку у нас есть четыре фотографии кошек, мы укажем состояние для всех четырех.

<body> <amp-state id="myState"> <script type="application/json"> { "cats": [ { "name": "Aakash", "description": "Very sweet gentleman that is quite shy in a shelter environment. He may hide under his blanket upon initial approach, but he is an affectionate lovebug." }, { "name": "Filip", "description": "Friendly and enjoys pets and head rubs. Is known to sit on keyboards and refuses to touch anything with catnip on it." }, { "name": "Julian", "description": "Both bold and extremely sweet. Wastes no time in investigating new smells, objects, and places, but enjoys lazing in the sun!" }, { "name": "John", "description": "This playful and spirited cat would like to be outside his kennel and will be so happy when he gets to his forever home with more room to move." } ] } </script> </amp-state> </body>

Предусмотренные в AMP действия и события используются для инициирования различных состояний. В нашем случае мы хотим обновлять состояние, когда пользователь нажимает на стрелки навигации по кольцевой галерее. Галерея инициирует событие slideChange, при обнаружении которого мы обновим переменную currentCat с помощью AMP.setState.

<h1>Adorable Adoptable Animals</h1> <amp-carousel width="800" height="400" layout="responsive" type="slides" on="slideChange:AMP.setState({ currentCat: event.index} )" > ... </amp-carousel>

В данном коде состояние currentCat сопоставляется с фотографией кошки по текущему индексу кольцевой галереи. Таким образом, если отображается слайд event.index=2, состояние будет сопоставлено с элементом, находящимся по индексу массива 2.

Осталось показать имя нашей кошки и информацию о ней. Добавьте следующий код под закрывающим тегом amp-carousel.

</amp-carousel> <div class="center"> <h1> <span [text]="myState.cats[currentCat].name">Aakash</span> is available for adoption! </h1> </div>

Расширение amp-bind использует выражения и привязки для динамического изменения контента. В приведенном выше примере код использует привязку [text] для обновления текста в теге <span> при каждой смене состояния путем вычисления выражения "myState.cats[currentCat].name".

Для повышения производительности и во избежание неожиданных «скачков» контента amp-bind не оценивает выражения при загрузке страницы. Это означает, что визуальным элементам должно быть присвоено состояние по умолчанию и они не должны использовать amp-bind для изначального рендеринга.

Не забудьте добавить информацию о наших кошках после </div>!

 </div> <p class="center">About <span [text]="myState.cats[currentCat].name"> Aakash</span></p> <p class="center" [text]="myState.cats[currentCat].description">Very sweet gentleman that is quite shy in a shelter environment. He may hide under his blanket upon initial approach, but he is an affectionate lovebug.</p> </body>

Теперь, когда вы перелистываете фото кошек в кольцевой галерее, их имена и информация о них также должны меняться.

Отправьте AMP-письмо

Чтобы узнать, как отправить письмо на свой почтовый ящик, ознакомьтесь с дополнительными материалами о тестировании AMP-писем.

Поздравляем — вы отправили свое первое AMP-письмо!

Следующие шаги можно узнать в нашем руководстве Основы AMP для писем.

Written by @CrystalOnScript