Как опубликовать ленту блога Shopify в шаблоне электронной почты Klaviyo
Мы продолжаем улучшать и оптимизировать нашу Shopify Plus маркетинговые усилия модного клиента по электронной почте с использованием Klaviyo. Klaviyo имеет прочную интеграцию с Shopify, что позволяет использовать множество предварительно созданных и готовых к работе сообщений, связанных с электронной коммерцией.
Удивительно, но вставка вашего Сообщения в блоге Shopify в электронную почту НЕ является одним из них! Что еще больше усложняет ситуацию… документация по созданию этого электронного письма не является исчерпывающей и даже не документирует их новейший редактор. Так, DK New Media пришлось немного покопаться и придумать, как это сделать самим… и это было непросто.
Вот разработка, необходимая для того, чтобы это произошло:
- Фид блогов – Фид Atom, предоставляемый Shopify, не обеспечивает никакой настройки и не включает изображения, поэтому нам нужно создать собственный XML-канал.
- Лента данных Klaviyo – Созданный нами XML-канал необходимо интегрировать в Klaviyo как поток данных.
- Шаблон электронной почты Klaviyo – Затем нам нужно преобразовать ленту в шаблон электронной почты, в котором изображения и контент должным образом отформатированы.
Создайте собственную ленту блога в Shopify
Мне удалось найти статью с примером кода для создания пользовательский канал в Shopify для Интуитивная почтовая программа и сделал довольно много правок, чтобы очистить его. Вот шаги для создания настраиваемый RSS-канал в Shopify для вашего блога.
- Перейдите к своему Интернет-магазин и выберите тему, в которую вы хотите поместить ленту.
- В меню Действия выберите Изменить код.
- В меню «Файлы» перейдите к «Шаблоны» и нажмите Добавить новый шаблон.
- В окне Добавить новый шаблон выберите Создать новый шаблон для Блог.
- Выберите тип шаблона жидкость.
- В качестве имени файла мы ввели Клавио.
- В редакторе кода поместите следующий код:
{%- 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>
- При необходимости обновите пользовательские переменные. Одно замечание по этому поводу заключается в том, что мы установили размер изображения на максимальную ширину наших электронных писем, 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 |
мастер | Самое большое доступное изображение |
- Ваш канал теперь доступен по адресу вашего блога с добавленной строкой запроса для его просмотра. В случае нашего клиента URL канала:
https://yourshopifysite.com/blogs/fashion?view=klaviyo
- Теперь ваш канал готов к использованию! При желании вы можете перейти к нему в окне браузера, чтобы убедиться в отсутствии ошибок. Мы собираемся убедиться, что он правильно анализируется на следующем шаге:
Добавьте ленту своего блога в Klaviyo
Чтобы использовать новую ленту блога в Klaviyo, вы должны добавить его как фид данных.
- Перейдите в Каналы данных
- Выберите Добавить веб-канал
- Введите Название фида (пробелы не допускаются)
- Введите URL фида который вы только что создали.
- Введите метод запроса как ПОЛУЧИТЬ
- Введите тип контента как XML
- Нажмите Обновить фид данных.
- Нажмите предварительный просмотр чтобы фид заполнялся корректно.
Добавьте ленту своего блога в свой шаблон электронной почты Klaviyo
Теперь мы хотим встроить наш блог в наш шаблон электронной почты в Klaviyo. По моему мнению и по той причине, по которой нам понадобился настраиваемый канал, мне нравится разделенная область контента, где изображение находится слева, а заголовок и отрывок — внизу. Klaviyo также имеет возможность свернуть это в один столбец на мобильном устройстве.
- Перетащите Разделенный блок в свой шаблон электронной почты.
- Установите в левой колонке значение Фото товара и ваш правый столбец на Текст блок.
- Для изображения выберите Динамическое изображение и установите значение:
{{ item|lookup:'media:content'|lookup:'@url' }}
- Установите замещающий текст на:
{{item.title}}
- Установите адрес ссылки, чтобы, если подписчик электронной почты нажмет на изображение, он перешел на вашу статью.
{{item.link}}
- Выберите правая колонка для установки содержимого столбца.
- Добавьте свой содержание, не забудьте добавить ссылку в заголовок и вставить выдержку из поста.
<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>
- Выберите Настройки разделения меню.
- Установить на Макет 40% / 60% чтобы предоставить больше места для текста.
- Включите Стек на мобильном телефоне и установить Справа налево.
- Выберите Параметры отображения меню.
- Выберите «Повтор контента» и поместите ленту, которую вы создали в Klaviyo, в качестве источника в Повторить для поле:
feeds.Closet52_Blog.rss.channel.item
- Установить Псевдоним элемента as пункт.
- Нажмите Предварительный просмотр и тестирование и теперь вы можете видеть свои сообщения в блоге. Обязательно протестируйте его как в настольном, так и в мобильном режиме.
И, конечно же, если вам нужна помощь в Shopify оптимизация и
Klaviyo реализации, не стесняйтесь обращаться к DK New Media.Раскрытие: я партнер в DK New Media и я использую свои партнерские ссылки для Shopify и Klaviyo в этой статье.