Как да публикувате своя Shopify блог емисия във вашия имейл шаблон на Klaviyo

Продължаваме да подобряваме и оптимизираме нашите ShopifyPlus използване на усилията за имейл маркетинг на модния клиент Klaviyo. Klaviyo има солидна интеграция с Shopify, която позволява множество комуникации, свързани с електронната търговия, които са предварително изградени и готови за работа.

Изненадващо, вмъкването на вашия Shopify Публикации в блога в имейл обаче НЕ е един от тях! Прави нещата още по-трудни... документацията за създаване на този имейл не е задълбочена и дори не документира най-новия им редактор. Така, Highbridge трябваше да се поразровим и да разберем как да го направим сами... и не беше лесно.

Ето необходимото развитие, за да се случи това:

1. Емисия за блога – Атомната емисия, предоставена от Shopify, не предоставя никаква персонализация, нито включва изображения, така че трябва да изградим персонализиран XML канал.
2. Klaviyo Data Feed – Изграденият от нас XML канал трябва да бъде интегриран като канал за данни в Klaviyo.
3. Шаблон за имейл на Klaviyo – След това трябва да анализираме емисията в имейл шаблон, където изображенията и съдържанието са правилно форматирани.

Създайте персонализирана блог емисия в Shopify

Успях да намеря статия с примерен код за създаване на a персонализирана емисия в Shopify за MailChimp и направи доста редакции, за да го почисти. Ето стъпките за изграждане на a персонализирана RSS емисия в Shopify за вашия блог.

1. Придвижете се до вашето Онлайн Магазин и изберете темата, в която искате да поставите емисия.
2. В менюто Действия изберете Редактиране на код.
3. В менюто Файлове отидете до Шаблони и щракнете Добавете нов шаблон.
4. В прозореца Добавяне на нов шаблон изберете Създайте нов шаблон за блог.

5. Изберете Тип шаблон на течност.
6. Въведохме името на файла клавийо.
7. В редактора на кода поставете следния код:

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

8. Актуализирайте персонализираните променливи, ако е необходимо. Една забележка по този въпрос е, че сме задали размера на изображението на максималната ширина на нашите имейли, широка 600px. Ето таблица с размерите на изображенията на 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
майстор	Най-голямото налично изображение

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

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

10. Вашата емисия вече е готова за използване! Ако желаете, можете да отидете до него в прозорец на браузъра, за да сте сигурни, че няма грешки. Ще се уверим, че анализира правилно в следващата ни стъпка:

Добавете своя блог емисия в Klaviyo

За да използвате новия си блог емисия в Klaviyo, трябва да го добавите като информационна емисия.

1. Отидете до Емисии за данни
2. Изберете Добавете уеб емисия
3. Въведете Име на емисия (не са разрешени интервали)
4. Въведете URL адрес на емисия които току-що създадохте.
5. Въведете метода на заявка като GET
6. Въведете Тип съдържание като XML

7. Кликнете Актуализиране на емисията за данни.
8. Кликнете Предварителен преглед за да се уверите, че емисията се запълва правилно.

Добавете своя блог емисия към вашия имейл шаблон на Klaviyo

Сега искаме да вградим нашия блог в нашия имейл шаблон Klaviyo. Според мен и причината, поради която се нуждаехме от персонализирана емисия, харесвам разделно съдържание, където изображението е отляво, а заглавието и откъсът са отдолу. Klaviyo също има опцията да свие това в една колона на мобилно устройство.

1. Плъзнете a Разделен блок във вашия имейл шаблон.
2. Задайте лявата си колона на an Изображение и дясната ви колона към a Текст блок.

3. За изображението изберете Динамично изображение и задайте стойността на:

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

4. Задайте алтернативния текст на:

{{item.title}}

5. Задайте адреса на връзката така, че ако абонатът на имейл кликне върху изображението, това ще го доведе до вашата статия.

{{item.link}}

6. Изберете дясна колона за да зададете съдържанието на колоната.

7. Добавете своето съдържание, не забравяйте да добавите връзка към заглавието си и да поставите откъса от публикацията.

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

8. Изберете Разделяне на настройките раздела.
9. Задайте на a 40% / 60% оформление за да осигурите повече място за текст.
10. Разреши Стек на мобилни устройства и поставете От дясно на ляво.

11. Изберете Опциите на дисплея раздела.

12. Изберете Content Repeat и поставете канала, който сте създали в Klaviyo като източник в Повторете за поле:

feeds.Closet52_Blog.rss.channel.item

13. Нагласи Псевдоним на артикула as точка.
14. Кликнете Преглед и тест и вече можете да видите публикациите си в блога. Не забравяйте да го тествате както в настолен, така и в мобилен режим.

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

Разкриване: Аз съм съдружник в Highbridge и използвам моите партньорски връзки за Shopify и Klaviyo в тази статия.