Содержание маркетингаЭлектронная торговля и розничная торговляЭлектронный маркетинг и автоматизация

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

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

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

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

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

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

Мне удалось найти статью с примером кода для создания пользовательский канал в Shopify для Интуитивная почтовая программа и сделал довольно много правок, чтобы очистить его. Вот шаги для создания настраиваемый 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 10241024px х 1024px
X 2048 20482048px х 2048px
мастерСамое большое доступное изображение
  1. Ваш канал теперь доступен по адресу вашего блога с добавленной строкой запроса для его просмотра. В случае нашего клиента URL канала:
https://yourshopifysite.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 реализации, не стесняйтесь обращаться к DK New Media.

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

Douglas Karr

Douglas Karr является директором по маркетингу OpenINSIGHTS и основатель компании Martech Zone. Дуглас помог десяткам успешных стартапов MarTech, помог в комплексной проверке приобретений и инвестиций Martech на сумму более 5 миллиардов долларов, а также продолжает помогать компаниям во внедрении и автоматизации их стратегий продаж и маркетинга. Дуглас — международно признанный эксперт по цифровой трансформации, а также эксперт в области MarTech и спикер. Дуглас также является автором опубликованного руководства для чайников и книги по бизнес-лидерству.

Статьи по теме

Вернуться к началу кнопки
Закрыть

Adblock обнаружен

Martech Zone может предоставить вам этот контент бесплатно, потому что мы монетизируем наш сайт за счет доходов от рекламы, партнерских ссылок и спонсорства. Мы были бы признательны, если бы вы удалили блокировщик рекламы при просмотре нашего сайта.