Как опубликовать ленту блога Shopify в шаблоне электронной почты Klaviyo

Как опубликовать ленту блога Shopify в шаблоне электронной почты Klaviyo

Мы продолжаем улучшать и оптимизировать нашу Shopify Plus маркетинговые усилия модного клиента по электронной почте с использованием Klaviyo. Klaviyo имеет прочную интеграцию с Shopify, что позволяет использовать множество предварительно созданных и готовых к работе сообщений, связанных с электронной коммерцией.

Удивительно, но вставка вашего Сообщения в блоге Shopify в электронную почту НЕ является одним из них! Что еще больше усложняет ситуацию… документация по созданию этого электронного письма не является исчерпывающей и даже не документирует их новейший редактор. Так, Highbridge пришлось немного покопаться и придумать, как это сделать самим… и это было непросто.

Вот разработка, необходимая для того, чтобы это произошло:

  1. Фид блогов – Фид Atom, предоставляемый Shopify, не обеспечивает никакой настройки и не включает изображения, поэтому нам нужно создать собственный XML-канал.
  2. Лента данных Klaviyo – Созданный нами XML-канал необходимо интегрировать в Klaviyo как поток данных.
  3. Шаблон электронной почты Klaviyo – Затем нам нужно преобразовать ленту в шаблон электронной почты, в котором изображения и контент должным образом отформатированы.

Создайте собственную ленту блога в Shopify

Мне удалось найти статью с примером кода для создания пользовательский канал в Shopify для Mailchimp и сделал довольно много правок, чтобы очистить его. Вот шаги для создания настраиваемый RSS-канал в Shopify для вашего блога.

  1. Перейдите к своему Интернет-магазин и выберите тему, в которую вы хотите поместить ленту.
  2. В меню Действия выберите Изменить код.
  3. В меню «Файлы» перейдите к «Шаблоны» и нажмите Добавить новый шаблон.
  4. В окне Добавить новый шаблон выберите Создать новый шаблон для Блог.

Добавьте жидкую ленту блога в Shopify для Klaviyo

  1. Выберите тип шаблона жидкость.
  2. В качестве имени файла мы ввели Клавио.
  3. В редакторе кода поместите следующий код:

{%- layout none -%}
{%- capture feedSettings -%}
  {% assign imageSize = 'grande' %}
  {% assign articleLimit = 5 %}
  {% assign showTags = false %}
  {% assign truncateContent = true %}
  {% assign truncateAmount = 30 %}
  {% assign forceHtml = false %}
  {% assign removeCdataTags = true %}
{%- endcapture -%}
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" 
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:media="http://search.yahoo.com/mrss/"
  >
  <channel>
    <title>{{ blog.title }}</title>
    <link>{{ canonical_url }}</link>
    <description>{{ page_description | strip_newlines }}</description>
    <lastBuildDate>{{ blog.articles.first.created_at | date: "%FT%TZ" }}</lastBuildDate>
    {%- for article in blog.articles limit:articleLimit %}
    <item>
      <title>{{ article.title }}</title>
      <link>{{ shop.url }}{{ article.url }}</link>
      <pubDate>{{ article.created_at | date: "%FT%TZ" }}</pubDate>
      <author>{{ article.author | default:shop.name }}</author>
      {%- if showTags and article.tags != blank -%}<category>{{ article.tags | join:',' }}</category>{%- endif -%}
      {%- if article.excerpt != blank %}
      <description>{{ article.excerpt | strip_html | truncatewords: truncateAmount | strip }}</description>
      {%- else %}
      <description>{{ article.content | strip_html | truncatewords: truncateAmount | strip }}</description>
      {%- endif -%}
      {%- if article.image %}
      <media:content type="image/*" url="https:{{ article.image | img_url: imageSize }}" />
      {%- endif -%}
    </item>
    {%- endfor -%}
  </channel>
</rss>

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

Shopify Имя изображения Размеры
пико 16px х 16px
значок 32px х 32px
большой палец руки 50px х 50px
маленький 100px х 100px
компактный 160px х 160px
среда 240px х 240px
широкий 480px х 480px
большой 600px х 600px
X 1024 1024 1024px х 1024px
X 2048 2048 2048px х 2048px
мастер Самое большое доступное изображение

  1. Ваш канал теперь доступен по адресу вашего блога с добавленной строкой запроса для его просмотра. В случае нашего клиента URL канала:

https://closet52.com/blogs/fashion?view=klaviyo

  1. Теперь ваш канал готов к использованию! При желании вы можете перейти к нему в окне браузера, чтобы убедиться в отсутствии ошибок. Мы собираемся убедиться, что он правильно анализируется на следующем шаге:

Добавьте ленту своего блога в Klaviyo

Чтобы использовать новую ленту блога в Klaviyo, вы должны добавить его как фид данных.

  1. Перейдите в Каналы данных
  2. Выберите Добавить веб-канал
  3. Введите Название фида (пробелы не допускаются)
  4. Введите URL фида который вы только что создали.
  5. Введите метод запроса как ПОЛУЧИТЬ
  6. Введите тип контента как XML

Klaviyo Добавить ленту блога Shopify XML

  1. Нажмите Обновить фид данных.
  2. Нажмите предварительный просмотр чтобы фид заполнялся корректно.

Предварительный просмотр ленты блога Shopify в Klaviyo

Добавьте ленту своего блога в свой шаблон электронной почты Klaviyo

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

  1. Перетащите Разделенный блок в свой шаблон электронной почты.
  2. Установите в левой колонке значение Фото товара и ваш правый столбец на Текст блок.

Klaviyo Split Block для Shopify Статьи в блоге

  1. Для изображения выберите Динамическое изображение и установите значение:

{{ item|lookup:'media:content'|lookup:'@url' }}

  1. Установите замещающий текст на:

{{item.title}}

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

{{item.link}}

  1. Выберите правая колонка для установки содержимого столбца.

Название и описание поста в блоге Klaviyo

  1. Добавьте свой содержание, не забудьте добавить ссылку в заголовок и вставить выдержку из поста.

<div>
<h3 style="line-height: 60%;"><a style="font-size: 14px;" href="{{ item.link }}">{{item.title}}</a></h3>
<p><span style="font-size: 12px;">{{item.description}}</span></p>
</div>

  1. Выберите Настройки разделения меню.
  2. Установить на Макет 40% / 60% чтобы предоставить больше места для текста.
  3. Включить Стек на мобильном телефоне и установить Справа налево.

Klaviyo Split Block для Shopify Статьи в блоге, собранные на мобильных устройствах

  1. Выберите Параметры отображения меню.

Klaviyo Split Block для Shopify Параметры отображения статей в блогах

  1. Выберите «Повтор контента» и поместите ленту, которую вы создали в Klaviyo, в качестве источника в Повторить для поле:

feeds.Closet52_Blog.rss.channel.item

  1. Установить Псевдоним элемента as пункт.
  2. Нажмите Предварительный просмотр и тестирование и теперь вы можете видеть свои сообщения в блоге. Обязательно протестируйте его как в настольном, так и в мобильном режиме.

Klaviyo Split Block Предварительный просмотр и тестирование.

И, конечно же, если вам нужна помощь в Shopify оптимизация и Klaviyo реализации, не стесняйтесь обращаться к Highbridge.

Раскрытие: я партнер в Highbridge и я использую свои партнерские ссылки для Shopify и Klaviyo в этой статье.