Маркетинг Шаблоны AMP
~ 9 мин читать
16159 просмотры
оценить
30 апреля 2020

iOS и Android теперь поддерживают AMP-письма в Gmail

Stripo / Blog / iOS и Android теперь поддерживают AMP-письма в Gmail

Всем привет! У нас отличные новости!

Gmail закончил выкатывать поддержку АМР-контента для iOS. Теперь динамические письма работают в Gmail App как на Android, так и на iOS. До апреля 2020 АМР поддерживался только Android.

Вам больше не нужно ничего делать, чтобы увидеть AMP-письма в своих входящих на мобильных устройствах — динамические письма теперь включены по умолчанию для всех пользователей Gmail, в том числе G-Suite.

Небольшой экскурс в историю технологии AMP for Email

В марте 2019 года Google реализовал технологию AMP for Email. А со 2 июля она стала доступна для всех пользователей Gmail, включая G-Suite.

На данном этапе технология AMP for Email поддерживалась только почтовиками Gmail и Mail.ru на десктопных устройствах. 

Yahoo и AOL также планируют реализовать поддержку АМР.

Изначально данного типа письма были предназначены только для десктопных устройств.

Но 21 ноября Гугл начал выкатывать поддержку АМР-писем для мобильных. Релиз данной функции для Android был закончен в декабре 2019. Однако релиз АМР для iOS был замедлен Гуглом, и вот только в апреле 2020 поддержка АМР-писем на мобильных стала доступна пользователям айфонов. Теперь данную функциональность поддерживают и Android, и iOS.

Как AMP письма отображаются на мобильных сейчас

Мы протестировали семь основных AMP-компонентов и поделились своими отзывами и результатами с командой Gmail. Кстати, вы тоже можете это сделать ;) Google открыт для комментариев. Некоторые баги, которые мы обнаружили и передали в Гугл, уже исправлены.

1. AMP-аккордеон

Вот AMP-шаблон, который мы использовали для тестирования данного компонента. Вы можете посмотреть его код в нашем демо-редакторе, а также использовать его для собственных тестов. 

Аккордеон придает письмам лаконичность и избавляет клиентов от утомительного скролла, так как вы “прячете” контент в разделах аккордеона. Клиенту необходимо кликнуть по названию нужного раздела, чтобы увидеть его содержание.

Неважно, используете ли вы наш Drag-n-Drop блок с AMP-аккордеоном или вставляете собственный код, созданный с помощью Google Playground — в любом случае AMP-аккордеон правильно отображается как на iOS, так и на Android.

AMP-Emails_Accordion_Non-Expanded-Section

(AMP-аккордеон с нераскрытыми разделами. Gmail на Android)

 AMP-Emails-on-Mobiles_Accordion_Expanded-Section

(AMP-аккордеон с раскрытым разделом. Gmail на Android)

Обнаруженные проблемы:

Проблем не обнаружено — аккордеон правильно сработал на iOS и Android.

2. AMP-карусель

В этот раз мы использовали для тестирования два шаблона:

  1. шаблон с изображениями предпросмотра;

  2. шаблон без изображений предпросмотра.

Вы можете посмотреть их коды в нашем демо-редакторе, а также использовать их для собственных тестов.

Карусель изображений избавляет от утомительного скроллинга и позволяет email-маркетологам размещать несколько баннеров на одном экране.

AMP-Carousel_Loading-Process_with-Arrows

(АМР-карусель. Gmail на Android)

Обнаруженные проблемы:

Проблем не обнаружено — карусель правильно отработала на iOS и Android.

Ранее в карусели на мобильных пропадали стрелочки. Но Гугл уже устранил данную неполадку.

3. Эффект AMP-лайтбокса

Эффект lightbox позволяет увеличивать отдельные элементы письма. Мы применили его к изображениям.

Наш тест показал, что эффект lightbox неплохо работает как на Android, так и на iOS, но только если письмо короткое.

AMP_Lightbox_Expanded-Photo

(Gmail на Android, lightbox-эффект, увеличенное фото)

Если же вы создаете стандартной длины промо-письмо, то вы столкнетесь с некоторыми проблемами Lightbox-эффекта.

Обнаруженные проблемы:

Изображение увеличивается по клику где-то в середине письма (имеется в виду в длину). Остальная часть экрана становится черной.

LightBox-Effect_AMP_Android_Gmail

(мне пришлось еще и скроллить вниз, чтобы найти увеличенное изображение)

А вот как вашим клиентам узнать, что нужно скроллить вниз, чтобы увидеть изображение?

Решение:

Мы не рекомендуем использовать этот эффект, так как Gmail решили прекратить его поддержку.

4. Боковое AMP-меню/Sidebar

Боковое меню представляет собой навигационное меню, которое открывается в левой/правой части экрана.

Оно экономит драгоценное пространство в письмах, не раздражает получателей, так как они могут «закрыть» его когда угодно – и при этом направляет подписчиков именно туда, куда они хотят.

Для нашего теста мы использовали код бокового меню, который предлагает Google. Тест показал, что боковое меню, которое также известно как Sidebar, хорошо работает и на Android, и на iOS с небольшой разницей. Важно отметить, что мы не применяли для боковой панели никаких стилей – просто вставили ссылки (но вы можете применять стили, если хотите):

  • Gmail на Android

В этой ОС ссылки стали зелеными.

AMP_SideBar_Expanded

  • Gmail на iOS

В iOS ссылки стали синими.

AMP_Sidebar-on-iOS

Мы проверили — все ссылки работали. А боковое меню закроется, если вы нажмете кнопку «Закрыть».

Обнаруженные проблемы:

Никаких. Боковая панель корректно работала на iOS и Android.

5. AMP-форма

Вот шаблон, который мы использовали для нашего теста, добавив в него фейковый «endpoint», созданный с помощью нашего Mock-сервера, чтобы проверить, действительно ли наша форма работает и способна ли она отправлять отзывы на реальный сервер. Вы тоже можете попробовать это сделать.

Формы позволяют собирать отзывы клиентов прямо в письмах.

Мне это нравится :)

Все сработало! Причем и на iOS, и на Android.

Мы проверили — “ответы” были доставлены на наш Mock-сервер :)

Тем не менее мы заметили небольшую разницу. Если же просто дать оценку 5 баллов или же дать оценку с комментарием, после чего нажать «Отправить отзыв», то получим:

  • Gmail на Android

В форме появилось «Спасибо за ваш отзыв», при этом я по-прежнему вижу свою «оценку» и комментарий.

AMP-Form-on-Gmail

  • Gmail в iOS

Хотя это и не имеет особого значения, но на iOS мой отзыв исчез. При этом я вижу «Спасибо».

AMP_Form_Gmail-on-iOS

Обнаруженные проблемы:

Никаких. Форма очень хорошо сработала в этих двух ОС, что действительно круто :)

6. AMP-селектор

Для тестирования мы использовали этот AMP-шаблон. Вы можете посмотреть его код. 

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

Это избавляет от необходимости добавлять в одно письмо все богатство вашего ассортимента и размещать в промо множество карточек товаров.

Все хорошо работало как на Android, так и на iOS.

AMP-Selector_iOS

(AMP-селектор на iOS)

Обнаруженные проблемы:

Никаких проблем. Кнопочки селектора отрабатывают — выбирая больший диаметр пиццы, меняется изображение и цена моего заказа.

7. AMP-список

Для теста мы использовали этот шаблон.

Назначение списков — помочь нам обеспечить пользователей свежим контентом. Вся информация обновляется в тот момент, когда клиент нажимает кнопку «Читать дальше», «Посмотреть обновления» и т.д.

Вот как мое письмо выглядело на десктопном экране:

Обнаруженные проблемы:

Некоторые сложности были. Хотя в целом все хорошо работало на мобильных устройствах — и просто отлично на десктопных.

  • Gmail на Android

Кнопка активна, контент обновляется при каждом нажатии. Но она не была выставлена по центру.

 AMP_Live-List_Android

  • Gmail на iOS

То же самое — контент обновляется, когда я нажимаю на кнопку. Но дизайн кнопки немного сломался.

Button-on-iOS_Gmail

Решение:

Gmail не распознает "input type = submit" для кнопок.

Вот что мы сделали с дизайном кнопок:

  • заменили "input type" на "button type";

  • добавили закрывающий тег кнопки в конце фрагмента кода </button>;

  • убрали часть "value", которая содержала название кнопки в письме;

  • поместите "label button" (название кнопки) перед закрывающим тегом.

Вот код, который мы использовали для «застиливания» кнопки:

<button type="submit" name="add-to-cart" style="outline:none;text-decoration:none;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:18px;color:#FFFFFF;border-style:solid;border-color:#34265f;border-width:12px 40px;display:inline-block;background: none 0% 0% repeat scroll #34265f; border-color: #34265f; border-radius: 30px;font-weight:normal;font-style:normal;line-height:22px;width:auto;text-align:center;cursor:pointer;" role="button" tabindex="4" on="tap:AMP.setState({showArticles: '1'})">View actual posts</button>

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

iOS_Updated-Button_Gmail-Live-List

Как тестировать AMP-письма на мобильных?

Сделать это можно тремя способами: 1) отправить письмо через ESP, если ваш email-адрес уже в белом списке Google, 2) добавить наш адрес, который мы используем для отправки тестовых писем как доверенного отправителя на ваш аккаунт Gmail, или 3) отправить из Google Playground (amp@gmail.dev).

Попадаем в белый список Гугла

Нам необходимо зарегистрироваться в Гугле как АМР-рассыльщик. В противном случае Гугл будет показывать лишь HTML-версию нашим клиентам. Все это делается в целях безопасности данных наших получателей.
Итак, сама процедура регистрации не отнимет у вас много времени. Сам процесс апрувинга вашей кандидатуры Гуглом может занять от 2 дней до месяца. В среднем, они отвечают очень быстро. Свой ответ мы получили спустя две недели с момента подачи заявки.

В нашей статье «Как попасть в белый список Google для отправки AMP-писем» мы делимся пошаговой инструкцией.

Добавление Stripo как доверенного отправителя

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

Это требуется для отправления писем на ваши мобильные устройства с нашего тестового аккаунта.

Как добавить Stripo в качестве доверенного отправителя в аккаунт Gmail:

  • откройте Gmail на десктопном устройстве;

  • зайдите в настройки;

  • в выпадающем меню выберите «Настройки»;

Gmail-Settings

  • поставьте галочку в разделе «Динамические письма»;

Enabling-Dynamic-Content_Ru

  • кликните раздел «Настройки разработчика», чтобы иметь возможность получать тестовые AMP-письма;

  • введите наш адрес info@stripo-test.email, чтоб получать тестовые письма от Stripo;

  • поставьте галочку возле пункта «Разрешить динамические письма от amp@gmail.dev»;

Adding-Trusted-Sender_Ru

Таким образом вы разрешаете и нам, и Google отправлять вам динамические письма.

  • нажмите «Сохранить».

Отправка AMP-писем из Google Playground

Google Playground позволяет создавать, валидировать и тестировать AMP-письма. Он отправляет тестовые письма с адреса amp@gmail.dev.

Чтобы иметь возможность получать AMP-письма с упомянутого адреса, вам нужно поставить флажок «Всегда разрешать динамические письма от amp@gmail.dev».

Мы описали все необходимые шаги в предыдущем разделе.

Важно: все эти настройки могут быть сделаны только на десктопных устройствах. Они немедленно применяются и для мобильных устройств.

Но не забудьте обновить страницу Gmail на мобильных ;) Выйдите из системы, а затем войдите снова.

Какие версии Android и iOS поддерживают AMP

Android — 5,01 и выше.

iOS — 6 и выше.

Напоминаем

Для того, чтоб ваши получатели увидели именно АМР-письмо, нужно:

  • получить от Google разрешение на отправку АМР-контента;
  • в случае возникновения каких-либо ошибок, которые можно обнаужить именно в меню «Предпросмотр», их нужно устранить в коде. Хотя письма, созданные с помощью наших АМР-блоков, не будут содержать ошибоок;
  • включить HTML-версию в письмо. В противном случае, оно может быть совсем не доставлено;
  • убедиться, что ваш ESP/CRM поддерживает отправку АМР-контента;
  • учитывать, что на данный момент только Gmail (веб версия и приложение на мобильном, как на Android, так и на iOS) и Mail.ru (веб версия и приложение на мобильном, как на Android, так и на iOS) поддерживают АМР-контент. Yahoo и Outlook скоро пополнят этот список;
  • письма теряют АМР-контент при пересылке.

В завершение

Если вы еще не видите функции AMP, вы можете присоединиться к бета-каналу тестирования AMP-писем в Gmail на Android и iOS.

Google анонсировал, что примерно через 15 дней после 21 ноября поддержка станет общедоступной и будет работать по умолчанию во всех аккаунтах Gmail в вышеупомянутых ОС.

Смело создавайте AMP-письма — все больше почтовиков и приложений теперь поддерживают эту функциональность.

Лысенко Григорий 2 года назад

Десктопный gmail не отображает AMP письма, а в настройках нет динамических писем

Анна Кузнецова прокомментировал Лысенко Григорий 2 года назад

Григорий, Спасибо за Ваш вопрос. Данная проблема могла возникнуть по следующим причинам: а) Вы отправляли письма с нашего тестового адреса. Дабы тестовые АМР-письма работали в Gmail, нужно внести Страйпо в список доверенных отправителей. На скриншоте показано, как это можно сделать: https://prnt.sc/sbcrme б) У Вас корпоративный аккаунт в Gmail. Если Вы используете G-Suite, то опция "динамические письма" появится только после того, как ее включит сис админ. Обновления вступят в силу в течение 24 часов. Вам точно также нужно будет внести Stripo в доверенные отправители, дабы Gmail мог показать АМР контент ваших тесовых писем. Если же после внесения данных изменений АМР не отобразится, обратитесь, пожалуйста, к нам в тех поддержку stripo@support.email, чтоб мы могли более детально разобрать проблему и выявить причину, почему же АМР не сработал. Спасибо.

Harald Walker 2 года назад

The data-next-button-aria-label and data-prev-button-aria-label attributes of amp-carousel also don't seem to work in Gmail (desktop). It keeps displaying the default text.

Анна Кузнецова прокомментировал Harald Walker 2 года назад

Harald, Thank you so much for your comment. Right, these attributes are removed by Gmail. This is a very important thing to know. When writing this post, we tested only basic layouts but did not test all possible attributes. There's whole lot of them :) Once again, thank you very much

Вас также может заинтересовать

Предыдущие статьи Следующие статьи
banner9
06 июня · 15 мин читать
ТОП-10 email-редакторов 2022 года

Все конструкторы email-шаблонов для вас на одно лицо? И вы затрудняетесь с выбором подходящего инструмента для своих кампаний, верно? Неудивительно, ведь их очень много. Мы сделаем обзор самых популярных конструкторов, чтобы выделить их отличительные особенности и помочь вам найти наилучший HTML-редактор шаблонов для ваших текущих потребностей. Я попробую создать одинаковый шаблон с одними и теми же медиафайлами во всех редакторах, чтобы увидеть, чем отличаются эти инструменты. Лучшие конструкторы email-шаблонов Для нашего обзора мы выбрали такие редакторы: Stripo, HubSpot, Campaign Monitor,...

Дизайн Маркетинг Шаблоны
24 мая · 18 мин читать
Лучшие шрифты для рассылок: советы и хитрости

Одна из самых серьезных проблем при создании электронных писем — правильно выбрать шрифт. Вес, высота, ширина, цвет, форма, интервал… Все ли здесь имеет значение? Да, важно все, но самое главное — выбрать читабельный шрифт. В этой статье мы расскажем, как выбрать лучший профессиональный шрифт для рассылки. Создавайте элегантные письма с помощью Stripo в кратчайшие сроки, используя наши готовые шаблоны Ознакомиться   Шрифты HTML-писем: основные правила, которые нужно соблюдать При выборе оптимального шрифта следует учитывать три базовых правила: 1. Не используйте более двух шрифтов...

Дизайн Шаблоны
Greatest Examples of GIF animations in Emails_Cover Image
27 октября 2021 · 10 мин читать
Гиф-анимации в письмах: 16 лучших примеров

Гифки отлично будут смотреться в ваших письмах, если вы хотите продемонстрировать продукт, привлечь внимание пользователей к какому-либо элементу письма или же просто ненавязчиво украсить текст. В этой статье мы представили лучшие примеры гиф-анимаций в рассылках. Примеры GIF в письмах В этой подборке собраны лучшие примеры использования GIF в письмах, где каждая анимация выполняет свою миссию. 1. Adidas (Источник: рассылка от Adidas) Adidas использовал анимацию в письме, чтобы показать, в каком еще цвете доступен данный товар. Выглядит аккуратно и просто, но при этом...

Дизайн Маркетинг
08 апреля 2021 · 17 мин читать
Дизайн подписи в письмах: 14 лучших примеров

Хорошие подписи в письмах помогают нам развивать бизнес и производить хорошее впечатление на клиентов. И поскольку это последний элемент, который люди видят в письмах, нам нужно сделать подписи креативными и запоминающимися. Давайте рассмотрим лучшие примеры подписей и их правильное использование в письмах и шаблонах рассылок. Стоит отметить, что профессиональные подписи с подробной контактной информацией нужны для любого бизнеса. Используйте этот шаблон, чтобы создавать подписи для рассылок быстрее Использовать Такой пример подписи хорошо подходит для юридических консультаций, банковского дела и т.д....

Дизайн Маркетинг Шаблоны
Будьте всегда в курсе последних новостей в области email-маркетинга!