Маркетинг Шаблоны How-to
~ 9 мин читать
2 комментарии
4941 просмотры
оценить
22 ноября 2019

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

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

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

21 ноября Gmail начал поддержку динамических писем в Gmail App для Android и iOS. Ожидается, что данная функциональность станет доступной для всех пользователей в течение 15 дней.

(UPD: по состоянию на 29.01 Андроид поддерживает АМР полностью, а вот для iOS выкатка поддержики еще в процессе). 

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

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

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

На данном этапе технология AMP for Email поддерживалась только почтовиками Gmail и Mail.ru на десктопных устройствах. 6 сентября для разработчиков Outlook выпустил бета-версию поддержки АМР писем.

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

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

Но примерно две-три недели назад стало возможным протестировать работу АМР писем в Gmail на мобильных. Beta-версия была выпущена исключительно в целях тестирования, доступна после регистрации. А уже 21 ноября поддержка АМР писем на мобильных стала доступна широкой аудитории. Данную функциональность поддерживают Android и iOS.

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

Когда Gmail объявили, что мы можем присоединиться к beta-каналу для тестирования 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-карусель изображений с помощью Stripo или Google Playground — в любом случае они будут отображаться на iOS и Android с незначительными проблемами.

  • Gmail на Android

Стрелки навигации появляются только во время загрузки письма, но после полной загрузки стрелки просто исчезают. Это происходит потому, что элементы attribute controls по умолчанию скрыты на устройствах с сенсорным экраном.

Я попыталась «перелистнуть» с одного изображения на следующее свайпая — не сработало.

AMP_Image-Carousel-with-Preview

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

  • Gmail на iOS

Стрелки навигации появляются в процессе загрузки письма, а затем исчезают. Опять же, это происходит из-за скрытия элементов attribute controls на устройствах с сенсорным экраном.

AMP-Carousel_Loading-Process_with-Arrows

(Стрелки навигации появляются в процессе загрузки)

AMP-Carousel-When-Loaded

(Стрелки навигации исчезают, когда письмо полностью загружено)

Ситуация с «перелистыванием» изображений немного отличается — я могу перелистывать изображения, но они при этом иногда “мигают”.

Посмотрите наш скринкаст, чтобы увидеть, как изображения «мигают» при перелистывании.

Решение:

Google, разумеется, в курсе проблемы с исчезающими стрелками. Вы также можете ознакомиться с ее обсуждением здесь.

В конце ноября Srtipo обновит блок AMP-карусели — и данный attribute controls будет автоматически добавлен ко всем каруселям, которые вы создаете у нас с использованием упомянутого блока.

А пока что есть два способа преодолеть эту проблему:

  • активировать опцию «Показывать превью» при создании AMP-карусели

как мы говорили выше, изображения предпросмотра кликабельны;

Toggling-Preview-Button-and-Setting-Preview-Width

  • вручную добавить элементы attribute controls в код AMP-карусели

Когда вы закончите создание AMP-карусели в Stripo, вам понадобится:

  • кликнуть по вашей AMP-карусели в шаблоне;

  • открыть редактор кода;

  • заменить фрагмент кода, который идет после class=, вот этим фрагментом "esd-block-html esdev-disable-select";

  • добавить "controls" перед "width";

Activating-Arrows-for-Mobile-Devices_AMP-Emails

  • готово!

Это важно:

После этого ваша AMP-карусель не будет видна в «рабочей зоне». Вы сможете увидеть ее только в режиме предпросмотра.

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)

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

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

Хотя нужно отметить, что в настоящее время Gmail не разрешает использовать селекторы атрибутов. Иначе говоря, на данный момент нет возможности «застилить» кнопки селекторов. Но очень скоро и они будут поддерживаться Gmail.

7. AMP-список

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

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

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

AMP_List_Web-Version

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

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

  • 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).

Важно отметить:

Пока данная функциональность не будет ПОЛНОСТЬЮ доступна всем пользователям Gmail (мы уже говорили, что релиз данной функциональности займет от 15 дней), вам нужно зарегистрироваться в Google как лицо, желающее тестировать и получать AMP-письма на мобильные телефоны. Другими словами, нужно получить разрешение на просмотр AMP-писем на мобильных устройствах 

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

AMP_Enabling-Dynamic-Emails-on-Mobile-Devices

Получение разрешения от Google

Теперь мы можем приступить к получению разрешения Google.

Это очень просто. Вам нужно:

  • перейти на эту страницу — она, правда, доступна только на английском языке;

  • кликнуть ссылку «Перейти к» (Navigate to), чтобы присоединиться к группе «Разработчики» (Developers);

  • в новой вкладке ввести свой email-адрес, который вы собираетесь использовать для тестов — для этого вам нужно войти в систему Google, используя этот аккаунт;

  • и нажать «Вступить в группу»;

  • в течение 24-48 часов Gmail предоставит вам доступ для тестирования AMP-писем на мобильных.

Важно отметить:

Не ждите уведомлений. Их не будет. Просто проверьте через 24-48 часов, была ли ваша учетная запись добавлена ​​в группу разработчиков.

Добавление 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 и выше.

Какие другие почтовики поддерживают AMP на мобильных

Mail.ru поддерживает AMP на мобильных устройствах. Они утверждают, что только десктопный Octavius и мобильные приложения отображают AMP.

И десктопная, и мобильная версии этого почтовика поддерживают AMP.

В завершение

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

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

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

Harald Walker 4 месяца назад

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 4 месяца назад

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

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

← Предыдущие статьи Следующие статьи →
Stripo Template Kits_Featured Image
7 дней назад · 8 мин читать
Template Kits, или как получить гайдлайны для создания шаблонов и брендовую айдентику в одном месте

Template Kits является нашей совершенно новой услугой, цель которой — помочь: a) вам создавать фирменные брендовые рассылки независимо от того, какое агентство или email-дизайнера вы нанимаете для построения своих будущих кампаний; b) дизайнерам легко усвоить правила и требования к письмам для любого бренда, чтобы создавать рассылки без лишних затрат времени; c) облегчить и ускорить процесс онбординга новичков в вашей команде. Мы генерируем Template Kit для любого вашего проекта в течение всего одной минуты совершенно бесплатно. Содержимое Template Kit: подробные рекомендации для создания шаблонов «Brand Guidelines» — здесь мы собираем всю информацию...

Дизайн Шаблоны How-to
10 дней назад · 7 мин читать
Как сделать письмо адаптивным

Адаптация писем под мобильные устройства, также известная как mobile-friendly design, уже перестала быть чем-то уникальным — теперь это одна из обязательных опций. Поэтому при создании адаптивного письма с помощью Stripo вы можете смело использовать нашу библиотеку готовых шаблонов — все они уже адаптивны. Соответственно, созданные на их основе сообщения будут корректно отображаться на всех устройствах. Но часто бывает и так, что вам нужно решить нестандартную проблему — вы хотите, чтобы ваше письмо отображался на мобильных девайсах особым образом. Итак, давайте поговорим именно...

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