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

Как создать 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

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

Те получатели, чьи почтовики поддерживают 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 ;

Adding Trusted Sender_Ru

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

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

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

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

← Предыдущие статьи Следующие статьи →
6 дней назад · 15 мин читать
10 примеров тизерных емейл-кампаний

Промо-рассылки и анонсы выглядят примерно одинаково и не всегда работают, потому что клиенты к ним привыкли и им эти емейлы не интересны. Поэтому мы расскажем, как стать интересными для клиентов. И покажем, как оживить ваши рекламные кампании, создавая высокопроизводительные емейл-тизеры. Почему они срабатывают? Ответ: они по-настоящему интригуют и формируют интерес к вашей продукции. Стратегия успешной тизерной емейл-кампании Естественно, перед началом любой кампании вы должны тщательно продумать стратегию. Какую именно стратегию? При помощи тизерных рассылок мы обычно пытаемся анонсировать три типа...

Дизайн Маркетинг Шаблоны How-to
Email-Design-Trends_Stripo
06 февраля · 14 мин читать
12 топ-трендов дизайна рассылок в 2020 году

Каждый год приносит нам свежие идеи дизайна рассылок. Некоторые из них стоит опробовать прямо сейчас. Мы сделали подборку трендов, благодаря которым ваши письма засияют новыми красками. Результаты опроса, проведенного Litmus, и прогнозы специалистов Email on Acid, а также лучшие примеры дизайна писем в наших входящих, говорят о таких трендах этого года: AMP компоненты в рассылках, или динамический контент; персонализация; интерактивность; контент в режиме реального времени; анимации; оптимизация писем под темную тему; 3-D изображения; иллюстрации; кастомные шрифты, или типографика как элемент письма; автоматизация...

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