Як створити AMP-розсилку в Stripo

Хочете бути сучасними та надсилати одержувачам електронні листи на основі найновішої технології AMP?

У своїх інструкціях зі створення AMP-листів Gmail зазначили, що при побудові подібних листів у сервісі Email Playground вам треба додавати певні елементи коду до хедера листа та до типу документа. Втім, Stripo може зробити за вас усе необхідне — тож вам взагалі не знадобляться навички кодування!

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

Тому ми збираємося просто зараз навчити вас створювати за допомогою Stripo такі AMP-листи, що будуть коректно відображатися в будь-яких email-клієнтах.

Нагадаємо: щоб мати можливість надсилати AMP-листи, вам треба зареєструватися в Google. У нашому пості ми поділилися власним досвідом, як потрапити до білого списку Google.

Як зробити AMP-листа за допомогою Stripo

Наразі в Stripo є три способи створення AMP-листів:

Спосіб 1. Використання AMP-блоків, доступних у Stripo

На сьогодні ми пропонуємо блок AMP-карусель зображень. Це означає, що вам не треба робити жодних змін у коді. Також не потрібні навички HTML-кодування.

Просто перетягніть цей блок у свій HTML-шаблон.

Якщо докладніше, ось що треба зробити, щоб побудувати AMP-карусель:

• перетягніть блок AMP-карусель до свого HTML-шаблону;

• налаштуйте ширину зображення попереднього перегляду. Це такі маленькі зображення під вашою каруселлю. Вони вказують, скільки слайдів у каруселі та як вони виглядають;

• додайте до каруселі потрібну кількість слайдів;

• не забудьте додати посилання для всіх слайдів. Клікнувши по них, користувачі будуть перенаправлені на відповідні сторінки вашого сайту.

Важливе зауваження:

Цей елемент за замовчуванням побачать лише ті одержувачі, email-клієнти яких підтримують технологію AMP for Emails. Інші ж потребують резервного варіанту — наприклад, це може бути банер плюс комплект карток товару, також відомих як контент-модулі.

Не забувайте додавати резервний елемент лише до HTML-версії розсилки.

Повний мануал ви знайдете у спеціальній публікації нашого блогу.

Всі інші елементи вашого листа мають бути активовані для обох версій.

Цього року ми плануємо реліз ще двох AMP-блоків.

Спосіб 2. Використання коду з Gmail Playground.

Для цього потрібні лише кілька кроків:

Крок 1. Зробити традиційний HTML-шаблон.

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

Крок 2. Створити AMP-елемент за допомогою Gmail AMP for Email Playground.

Google пропонують широкий вибір готових до використання 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> на лінки потрібних вам зображень з вашого сайту чи будь-якого іншого хостингу;

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

<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>

Крок 3. Вставити код вбудовування в Stripo

• перетягніть у редакторі Stripo структуру з 1 колонкою у свій шаблон;

• у розділі “Включати” на панелі налаштувань увімкніть “⚡HTML”;

Це означає, що AMP-карусель зображень відображатиметься лише у тих email-клієнтах, що підтримують 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>;

• закрийте редактор коду. От і все!

Ті отримувачі, email-клієнти яких підтримують AMP, побачать цю карусель зображень, але інші – ні. Отже, нам треба створити для них бездоганний банер як резервний варіант.

Для цього вам треба:

• перетягнути структуру з однією колонкою у шаблон;

• на панелі налаштувань у розділі “Включати” обрати HTML-версію. Таким чином, ваш банер буде ввімкнено лише для тих, чиї поштові клієнти не підтримують AMP;

• створити банер.

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

Контейнери/елементи, позначені як HTML, будуть відображені лише тим адресатам, чиї поштові клієнти не підтримують AMP for Emails. А от елементи ⚡HTML побачать ті, чиї email-клієнти мають підтримку AMP.

Елементи та контейнери, що не мають позначок, працюватимуть в обох версіях електронного листа.

Спосіб 3. Використання готових AMP-шаблонів ​​Stripo

Stripo пропонує серію готових до використання AMP-шаблонів. В них є модулі з AMP-каруселлю, лайтбоксом та меню-акордеоном. Зображення AMP-каруселі призначені для демонстрації декількох зображень або банерів на одному скролі екрану без потреби крутити вниз. Ефект лайтбокса – призначений для збільшення масштабу певного зображення після кліку; використовується в промо-листах для карток товарів. Щодо меню-акордеона — його місія полягає в структуруванні тексту по вкладках або інших логічних групах. Після натискання будь-якої вкладки її зміст випадає вниз.

Отже, для створення AMP-листів за допомогою наших готових шаблонів вам треба:

• обрати шаблон, що якнайкраще відповідає потребам вашої поточної кампанії;

• увійти до аккаунту, щоб працювати з ним та зберігати зміни;

• ввести дату для пошуку та знайти шаблон за датою створення;

• відредагувати контент – лого, футер тощо;

Важливе зауваження:

Пам'ятайте, що ви можете перетягувати вищезгадані модулі в шаблони з вашої особистої бібліотеки контенту, щоб створювати листи легше та швидше (звичайно, якщо ви їх раніше зберігали).

• клікніть по AMP HTML елементу в шаблоні, щоб відредагувати його;

• якщо ви працюєте з зображеннями, то на панелі налаштувань вам буде запропоновано замінити зображення та додати потрібні лінки у звичний спосіб роботи з зображеннями;

• якщо ж ви працюєте з AMP меню-акордеоном, то після кліку по ньому вам доведеться внести деякі зміни безпосередньо в код, де весь текстовий компонент написано білим кольором, а стилі – шрифти, кольори, розділювачі тощо — знаходяться в атрибутах "style".

Важливе зауваження:

Всі вищезгадані шаблони містять не лише елементи AMP, але й резервні варіанти. Тому ви можете бути впевнені: отримувачі, чиї email-клієнти не підтримують Gmail AMP для листів, побачать повну традиційну версію HTML вашого листа.

Тепер, коли ваш AMP-лист готовий, треба його попередньо переглянути.

Попередній перегляд AMP-листів за допомогою Stripo

Це дуже важливий етап створення електронних листів будь-якого типу, хоч AMP, хоч традиційних HTML.

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

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

• щоб переглянути іншу версію, просто клікніть відповідну кнопку.

Важливе зауваження:

Будь ласка, майте на увазі, що AMP-елементи поки що не працюють на мобільних пристроях. Усі одержувачі побачать традиційну версію в HTML форматі, якщо відкриють листа на мобільному.

Після попереднього перегляду листа, створеного за допомогою AMP Playground, ми дуже рекомендуємо тестувати його. Наш вбудований інструмент тестування перевірить лише традиційну HTML-версію, а також покаже, чи відображаються елементи AMP у Gmail та Mail.ru. Але він не покаже, чи клікабельні елементи AMP. Щоб перевірити це, треба надіслати тестового листа.

Як тестувати AMP-листи за допомогою Stripo

Щоб мати змогу надсилати такі листи зі Stripo, вам треба надати нам дозвіл на надсилання тестових повідомлень за вашою адресою.

Якщо це ваш особистий аккаунт, вам треба:

• перейти до панелі налаштування Gmail і клікнути іконку “Налаштування”;

• у меню, що випадає, клікніть розділ “Налаштування”;

• у новому вікні в розділі “Загальні” знайдіть “Динамічний контент” та відкрийте “Налаштування розробника”;

• додайте цю електронну адресу: info@stripo-test.email;

• натисніть "ОК".

Якщо ж це корпоративний аккаунт G-suite, вам потрібно:

Починаючи з 2 липня цього року всі користувачі G-suite теж можуть отримувати листи з елементами AMP.

Попросіть свого менеджера активувати для вас "Динамічні листи". І тоді вам залишиться додати нашу адресу, щоб отримувати тестові листи від Stripo.

Будь ласка, майте на увазі, що зміни активуються протягом 24 годин.

Як експортувати AMP-листа до вашого ESP

Наразі лише чотири ESP підтримують AMP for Emails:

1. eSputnik – методи API та SMTP;

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

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

4. SendGrid – лише API.

До eSputnik та SparkPost ви можете експортувати АМР листи за допомогою прямого експорту, як ви експортували звичайні листи раніше.

Прямий експорт усіх видів листів до Amazon SES незабаром буде реалізовано. 

Проте, ви не можете експортувати AMP-листи зі Stripo прямо до SendGrid.

Отже, як експортувати AMP-листа зі Stripo:

• натисніть кнопку "Експортувати";

• серед багатьох варіантів оберіть AMPHTML;

• у вікні, що випадає, натисніть “HTML-файл”. Тоді усі зображення буде розміщено на наших серверах;

• у своєму ESP (SendGrid) відкрийте розділ "кодувати свого листа";

• перетягніть завантажений файл AMP HTML у цей розділ;

• готово!

Ще раз нагадуємо, що вам треба потрапити у білий список Google, перш ніж надсилати AMP-листи .

Email-клієнти, що підтримують AMP-листи:

• Gmail – так;

• Mail.ru – так;

• Outlook – ось-ось буде, чесно-чесно;

• Yahoo та AOL також працюють над цим – восени 2019 буде.

Це важливо:

Не забувайте, що електронний лист AMP, котрий ви зробили, містить обидві версії: AMP HTML і традиційну HTML.

У тих отримувачів, чиї клієнти не підтримують AMP, відобразиться традиційна HTML-версія листа; ті ж, чиї email-клієнти вже підтримують AMP, побачать ваші листи “на повен зріст” :) Пам'ятаєте, що ми навчилися приховувати AMP-елементи у звичайних листах?

Більш детальну інформацію про створення сучасних електронних листів можна знайти на нашій сторінці AMP-конструктора.

Почніть робити AMP-листи у Stripo просто зараз!