Источники данных: для чего это нужно?

Письма на основе AMP содержат динамический контент. И здесь довольно часто возникает потребность в компонентах amp-list.

Внедрение геймификации и обновление контента рассылок в режиме реального времени, а также возможность выбирать и подтверждать время встречи непосредственно в письмах — все это динамический контент. Реализовать его можно с помощью компонента amp-list.

Перейдя по данной ссылке вы найдете более подробную информацию об источниках данных и о том, как их использовать - https://stripo.email/ru/blog/working-with-data-source-in-stripo/

Кроме того, посмотрите наше видео для облегчения визуального восприятия.

Использование источника данных Stripo

Чтобы использовать Stripo в качестве источника данных, вам нужно:

  • войти в раздел «Данные»;

  • перейти во вкладку «Источники данных»;

  • нажать кнопку «Подключите источник данных»;

  • в новом окне ввести всю необходимую информацию об этом конкретном соединении;

  • скопировать URL-адрес;

На данный момент у нас есть 2 варианта подключения источников данных:

  1. добавление созданного файла JSON;

  2. извлечение данных из Google Sheet.

И так, давайте для начала подключим файл JSON, для этого необходимо:

  • вставить файл JSON, который вы подготовили заранее (или тот, который мы создадим вместе далее по статье), во вкладку JSON;

  • готово.

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

Если вы собираетесь использовать этот компонент в нескольких письмах, то мы советуем давать источнику данных название, которое отражает цель всей кампании.

Каждый раз при публикации новых статей или видео в своем блоге нужно редактировать JSON, чтобы эти обновления добавились в рассылки. Но в самих письмах ничего изменять не надо. Stripo передает эти изменения и обновления в ваши рассылки через endpoint (URL-адрес, который мы с вами сейчас создадим). Он поменяет изображения, текст и все остальное. То есть вам не придется редактировать или заменять приветственные письма в вашем ESP.

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

Использование компонентов amp-list в сфере eCommerce позволяет показывать в приветственных и промо-рассылках самые популярные товары.

Создание файла JSON

Перед настройкой JSON вам необходимо определиться с задачей своего amp-list.

Я хочу отправлять в приветственных письмах свежие статьи моего блога.

В качестве основы для нашего файла JSON мы используем фрагмент кода, предоставленный Google.

{   "items": [     
{
"title": "AMP YouTube Channel",
"url": "https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" },

{
"title": "AMP Start",
"url": "https://ampstart.com/"
}
] }

Часть файла JSON, приведенная ниже, повторяется. Вы можете вставлять его столько раз, сколько потребуется.

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

Вы можете редактировать файл JSON в любом текстовом редакторе или в приложении Sublime Text.

Набор элементов зависит от контента, который вы хотите показать получателям.

Итак, я хочу, чтобы наши подписчики увидели:

  • титульное изображение/шапку статьи;

  • название статьи;

  • краткое описание;

  • кнопку «Читать дальше».

Вот JSON, который я собираюсь использовать для приветственных писем:

{ "items": [ 
{
"title": "20 цепляющих тем и маркетинговых идей ко Дню Отца", "url": "https://stripo.email/blog/20-catchy-fathers-day-email-subject-lines-marketing-ideas/",
"imgUrl": "https://stripo.email/photos/shares/Blog/Stripo-Fathers-Day-Featured-Image.jpg",
"text": "Согласно исследованиям NRF, в 2019 году жители США потратили более 16 миллиардов долларов на подарки ко Дню Отца." },

{
"title": "AMP-письма: 10 способов использования технологии AMP",
"url": "https://stripo.email/blog/ways-to-use-amp-in-emails/", "imgUrl": "https://stripo.email/photos/shares/Blog//AMP_Ways-to-Use-AMP_Stripo_Featured-Image.png",
"text": "Эффективность AMP — уже доказанный факт. В частности, конверсия повышается как минимум в ПЯТЬ раз"
}
] }

Где:

  • title — название поста в блоге;

  • url — ссылка на этот пост в блоге;

  • imgUrl — ссылка на титульную картинку/шапку статьи;

  • text — краткое описание/аннотация.

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

Весь текст в кавычках после двоеточий нужно заменить вашим контентом. Сделайте это вручную.

Кавычки в коде не меняйте на наши «ёлочки» — оставляем как есть.

И просто вставьте свой код во вкладке JSON в источнике данных Stripo.

Создание динамических писем с компонентами amp-list

Теперь, когда у нас есть URL-адрес, который на самом деле называется endpoint, мы можем встраивать его в наши приветственные письма.

Шаг 1. Создание приветственного письма

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

В моем случае будет следующая структура:

  • титульное изображение/шапка;

  • название;

  • аннотация;

  • кнопка.

Очень важно правильно настроить размер для титульной картинки — пропорции здесь можно задать только один раз.

Убедитесь, что все элементы принадлежат к одной и той же структуре.

Шаг 2. Встраивание endpoint

  • первым делом вам нужно получить код только что созданной структуры. Для этого кликните иконку «Структура» в шаблоне, после чего откройте редактор кода;

  • скопируйте фрагмент кода, который начинается с <table width="100%" cellspacing…>;

  • перетащите новую структуру с одним контейнером в то самое место, где хотите разместить свои статьи из блога;

  • перетащите в структуру базовый блок «HTML»;

  • дважды кликните по этому блоку в шаблоне, чтобы открыть его код;

  • вставьте элемент кода, который скопировали на предыдущем шаге;

  • после чего в самом верху добавьте в код блока вот этот фрагмент:

<amp-list layout="fixed-height" height="360" width="auto" src="https://stripo.email/emailformdata/v1/list/ecxs/stripo-welcome-emails"> 
<template type="amp-mustache">

Где:

https://amp.stripo.email/v1/list/haig/welcome-emailsstripo-1 — это endpoint, который мы недавно сделали в разделе «Создание файла JSON»;

  • вставьте закрывающие теги (ниже) в конце кода вашего блока;

</template> 
</amp-list>
  • выделенная часть кода, относящаяся к титульной картинке/шапке статей, должна быть заменена вот этим фрагментом:

<a href="{{url}}" target="_blank"> 
<amp-img width="540" height="180" alt="{{title}}" src="{{imgUrl}}" layout="responsive">
</amp-img>
</a></td>

(Не забудьте настроить оптимальную ширину и высоту вашего изображения).

Важно:

Вам не нужно вставлять какие-либо другие скрипты в <head> письма. Stripo добавляет всё автоматически.

Это необходимо для показа изображений в AMP-письмах.

  • а теперь, пожалуйста, замените все ссылки после <a href> на {{url}} — важно, чтобы они были в кавычках! И не убирайте фигурные скобки;

  • ссылка после src должна быть заменена на {{imgUrl}};

  • альтернативный текст для изображения должен быть заменен на {{title}};

  • аннотацию, она в коде белым цветом, следует заменить на {{text}} — пожалуйста, не добавляйте здесь кавычки;

  • вот так выглядит мой готовый код:

  • проверьте себя: единственная реальная ссылка, содержащаяся в вашем коде — это и есть ваш endpoint;

  • все остальные данные будут получены из вашего JSON;

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

  • проверьте шаблон в режиме предпросмотра — если все сделано правильно, то вы увидите в письме свои статьи.

Это важно:

Вы вставляете этот код всего один раз — и он подтянет столько единиц контента, сколько нужно (то есть ровно столько, сколько вы настроили в своем файле JSON. В нашем случае, два элемента). Иными словами, его не нужно вводить дважды, если вы хотите поделиться двумя статьями в одном письме.

Извлечение данных из Google Sheet

У вас есть возможность подключить Google Sheet к письму через источники данных.

Дополнительную информацию о том, как подключить Google Sheet, можно найти в нашей блоговой статье.

Также обратите внимание на видео, в котором показаны все шаги по подключению Google Sheet к письму.

Если у вас остались вопросы, напишите нам по адресу support@stripo.email.

Вы нашли ответ?