Как создать AMP-письма с помощью Stripo

Хотите идти в ногу со временем и отправлять AMP-емейлы своим получателям?

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

Google также предлагает Gmail AMP for Email Playground, где вы можете писать код AMP-писем от хедера до футера. Но письма, которые вы создадите с его помощью, отображаются только у клиентов с десктопным Gmail. Что касается Yahoo, Outlook.com, Mail.ru — они тоже будут поддерживать AMP для писем. Но как насчет остальных ваших клиентов?

Сегодня мы покажем, как с помощью Stripo создавать AMP письма, которые корректно отображаются во всех почтовиках (если те поддерживают АМР).

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

Как создать AMP письмо с помощью Stripo

На сегодняшний день существует два способа создания AMP писем с помощью Stripo:

Способ 1. Вставить код AMP HTML элемента в шаблон

Этот способ требует всего нескольких шагов

Шаг 1. Создайте шаблон в традиционном HTML формате.

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

Шаг 2. Создайте AMP-элемент с помощью Gmail AMP for Email Playground.

Google предлагает 10 подготовленных AMP-элементов:

1. AMP-список;
2. AMP-список2;
3. AMP-bind1;
4. AMP-bind2;
5. AMP-форма;
6. AMP-гармошка;
7. AMP-анимация;
8. AMP-карусель;
9. AMP-текстовое поле;
10. AMP-времени назад.

Давайте используем AMP-карусель.

• В Gmail Playground в выпадающем меню выберите AMP-карусель;

• Кликнув по ней, слева в редакторе кода вы увидите код AMP-карусели. Найдите следующую строку в коде:

<amp-img src="https://www.google.com/images/background/p1.jpg" width="800" height="600" layout="responsive"></amp-img>” 

и удалите ее;

• Теперь в этом примере кода отредактируйте ширину изображения, которая была установлена по умолчанию, с 800 до 600 пикселей, так как это наиболее распространенная ширина;

• Измените высоту с 600 до 480 пикселей, чтобы сохранить соотношение;

• Теперь замените все ссылки в атрибуте <href> ссылками на нужные изображения, которые находятся на вашем сайте или любом другом хостинге изображений;

• Выделите и скопируйте код встраивания с 4 изображениями в AMP-карусель;

<div class="images">

    <amp-carousel width="600" height="480" layout="responsive" type="slides">

       <amp-img src="https://image.freepik.com/free-photo/school-backpack-school-supplies-with-chalkboard-background_53476-528.jpg" width="600" height="480" alt="a sample image"></amp-img>

       <amp-img src="https://image.freepik.com/free-photo/stylish-teenage-workspace-with-yellow-backpack-reading-lamp_23-2147878350.jpg" width="600" height="480" alt="another sample image"></amp-img>

       <amp-img src="https://image.freepik.com/free-photo/father-leads-little-child-school-boy-go-hand-hand-parent-son-with-backpack-back_90791-15.jpg" width="600" height="480" alt="and another sample image"></amp-img>

       <amp-img src="https://image.freepik.com/free-photo/rear-view-group-diverse-kids-wearing-backpack_53876-75383.jpg" width="600" height="480" alt="and another sample image"></amp-img>

   </amp-carousel>

</div>

• В Stripo перетащите структуру с 1 колонкой в подготовленный шаблон;

• На панели настроек в разделе “включить в” установите “⚡HTML”;

Это означает, что AMP-карусель будет отображаться только в тех почтовиках, которые поддерживают AMP;

• Перетащите в структуру блок HTML;

• Дважды кликните по нему, чтобы открыть редактор HTML-кода;

• Замените “Вставьте свой HTML-код” на код встраивания;

• В Google Gmail Playground скопируйте скрипт, который указывает, какой AMP-элемент вы собираетесь использовать. Он находится в хеде письма под атрибутами <style> перед закрывающим тегом </head>;

• Если вы тоже собираетесь использовать AMP-карусель, вот скрипт для встраивания:

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

• Откройте редактор HTML-кода всего шаблона, нажав кнопку “Редактор кода” над шаблоном;

• Вставьте скрипт для встраивания прямо над закрывающим атрибутом </head>;

• Закройте редактор кода. Готово!

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

Для этого вам нужно:

• Перетащить структуру с одной колонкой в шаблон;

• На панели настроек в разделе “Включить в” выберите классический HTML – таким образом ваш баннер будет активен только для тех получателей, чьи почтовики не поддерживают AMP;

• Создайте баннер.

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

Контейнеры/элементы, помеченные как HTML, будут видны только тем получателям, чьи почтовики не поддерживают AMP. При этом элементы ⚡HTML будут показываться только тем, чьи клиенты поддерживают AMP.

Элементы/контейнеры, не имеющие пометок, будут работать в обеих версиях.

Теперь, когда ваше AMP письмо готово, нужно на него предварительно посмотреть.

Предварительный просмотр AMP писем с помощью Stripo

Это очень важный шаг при создании писем любого типа: AMP HTML или в традиционном формате HTML.

• Для превью AMP HTML в Stripo нажмите кнопку предварительного просмотра над шаблоном;

• На панели настроек в режиме предпросмотра выберите нужную версию своего письма;

• Чтобы проверить другую версию, просто переключитесь на нее.

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

Обратите внимание, что AMP-элементы не работают на мобильных устройствах. Все получатели увидят классическую HTML-версию при открытии письма на мобильных девайсах.

После предварительного просмотра мы настоятельно рекомендуем протестировать письмо. Наш встроенный инструмент тестирования работает только с традиционными HTML-версиями ваших сообщений.

Что касается версии AMP – инструкция ниже.

Как тестировать АМР письма в Stripo

Для того, чтоб иметь возможность отправлять тестовые АМР письма из Stripo, вам нужно проделать несколько шагов.

Если это ваш личный аккаунт, то вам нужно:

• в Gmail кликнуть на шестеренку "Настройки";
• в выпадающем меню выбрать пункт "Настройки";

• в новом окне в разделе найти пункт "Динамический" контент — поставить галочку для "Включить динамический контент в письмах" и открыть "настройки для разработчиков";

• ввести email адрес нашего тестового ящика: info@stripo-test.email ;

• нажмите "ОК".

Если это ваш корпоративный аккаунт в G-suite:

Со 2-ого июля этого года все владельцы аккаунтов G-suite  могут принимать АМР письма. 
Обратитесь к вашему системному администратору, чтоб он разрешил вам получение динамического контента — после чего в настройках Gmail у вас появится пункт "Динамический контент". Данные изменения вступают в силу в течение 24 часов.

Далее вам нужно будет проделать те же шаги, что и владельцы личных аккаунтов в Gmail.

Как экспортировать AMP письмо в ваш ESP-провайдер

Сегодня только четыре ESP поддерживают AMP для email:

1. eSputnik – только при помощи метода API. Метод SMTP будет добавлен в ближайшее время;

2. Amazon SES и PinPoint – только методом API;

3. SparkPost – методами SMTP и API;

4. SendGrid – только методом API.

Вы не можете экспортировать AMP-емейлы из Stripo в любой из вышеупомянутых ESP. Но вы можете скачать свой емейл в виде AMP HTML-файла и импортировать его в нужный ESP.

Итак, как экспортировать ваш AMP-емейл из Stripo:

• Нажмите кнопку “Экспортировать”;

• Среди множества вариантов выберите AMPHTML;

• В выпадающем окне нажмите “HTML-файл”. И все изображения будут размещены на наших серверах.

Напоминаем, что перед отправкой AMP-писем вам нужно попасть в белый список Google.

Почтовики, которые поддерживают AMP:

• Gmail — с первого дня;
• Mail.ru — с первого дня;
• Outlook — ожидается осенью этого года;
• Yahoo и AOL — в начале осени 2019.

Это важно:

Напоминаем, что, создавая АМР-письмо у нас, вы создаете сразу две версии письма: АМР- и классическую версии.

Те пользователи, почтовики которых поддерживают АМР, увидят, соответственно, АМР версию. Те подписчики, чьи почтовые клиенты не поддерживают АМР, увидят классическое письмо HTML.

Создать АМР-письмо сейчас.