Дизайн Структура Шаблоны How-to
~ 11 мин читать
4547 просмотры
оценить
23 июля

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

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

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

Stripo-AMP4Emails-AMP-Carousel

В своей инструкции по созданию 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 пикселей, чтобы сохранить соотношение;

Stripo-How-to-Build-AMP-emails-with-Stripo-Setting-the-AMP-Carousel-Image-Size

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

Stripo-How-to-Build-AMP-Emails-with-Stripo_Replacing-the-Links-to-Images-with-Proper-Ones

  • Выделите и скопируйте код встраивания с 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”;

Stripo AMP Emails Include Element In

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

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

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

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

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

Stripo-Building-AMP-Emails-with-Google-Playground_Script

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

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  • Откройте редактор HTML-кода всего шаблона, нажав кнопку “Редактор кода” над шаблоном;

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

Stripo-How-to-Build-AMP-Emails-with-Stripo_Inserting-the-Embed-Script

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

Those recipients whose email clients support AMP, will see this AMP image carousel, while other — will not. Hence, we need to create a perfect banner for them, too, as a fallback.

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

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

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

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

Stripo AMP email Include Element in Traditional HTML email

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

Stripo-How-to-Build-AMP-Emails-with-StripoShowing-andHiding-Elements-for-Emails

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

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

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

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

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

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

Stripo Preview Button

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

Stripo AMP Emails HTML and AMP HTML Preview

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

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

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

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

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

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

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

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

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

Gmail Settings

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

Enabling Dynamic Content_Ru

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

Enabling Dynamic Content in Emails_Entering Email Address_Save Button

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

Если это ваш корпоративный аккаунт в 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;

Stripo AMP Emails The Exporting Options

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

Stripo Downloaing Files as AMP HTML

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

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

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

Это важно:

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

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

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

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

← Предыдущие статьи Следующие статьи →
27 августа
Емейл-кампании к Черной Пятнице и Киберпонедельнику

В этом году Черная пятница, а вместе с ней и начало грандиозных распродаж в сотнях магазинов выпадают на 23 ноября. Это значит, что приближается пора, когда каждый маркетолог мечтает побить прошлогодний рекорд по продажам, а его клиент — ухватить товары по невероятным скидкам. И, чем ближе к ноябрю,  тем сложнее и интереснее становится охота на покупателей в сезон Черной пятницы, Дня благодарения, Киберпонедельника и предрождественских распродаж. 9 советов для подготовки к Черной Пятнице и Киберпонедельнику Не стоит бояться, ведь благодаря...

Дизайн Маркетинг Шаблоны How-to
HR Email Templates_How to Create Beautiful Templates_Featured Image_Stripo
13 августа
Шаблоны писем для HR-менеджеров: как сделать привлекательную рассылку

Итак, вы менеджер по персоналу в поисках подходящего шаблона, чтобы сэкономить время? Как говорят в Одессе, их есть у нас. А еще есть полезные советы по дизайну и контенту электронных писем. Что бы вы ни делали – приветствуете нового сотрудника, сообщаете команде какие-то новости… - вы тратите много времени, если создаете письмо с нуля. Stripo предлагает несколько готовых шаблонов специально для HR, с которыми вы существенно сэкономите время. Общайтесь с сотрудниками проще и намного быстрее. Редактируйте контент наших шаблонов и...

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