Shopify blog hírfolyamának közzététele a Klaviyo e-mail sablonban

Shopify blog hírfolyamának közzététele a Klaviyo e-mail sablonban

Továbbra is fejlesztjük és optimalizáljuk ShopifyPlus divat kliens e-mail marketing erőfeszítései segítségével Klaviyo. A Klaviyo szilárd integrációval rendelkezik a Shopify-val, amely lehetővé teszi az e-kereskedelemmel kapcsolatos kommunikációk sokaságát, amelyek előre meg vannak építve és használatra készek.

Meglepő módon a saját Shopify blogbejegyzések e-mailbe azonban NEM tartozik ezek közé! A dolgok még nehezebbé tétele… az e-mail elkészítésének dokumentációja nem alapos, és nem is dokumentálja a legújabb szerkesztőt. Így, Highbridge ásnunk kellett, és ki kellett találnunk magunknak, hogyan csináljuk… és nem volt könnyű.

Íme az ehhez szükséges fejlesztés:

  1. Blog-hírcsatorna – A Shopify által biztosított atom feed nem nyújt semmilyen testreszabást, és nem tartalmaz képeket, ezért egyedi XML feedet kell készítenünk.
  2. Klaviyo adatfolyam – Az általunk készített XML feedet adatfolyamként kell integrálni a Klaviyo-ba.
  3. Klaviyo e-mail sablon – Ezután a hírfolyamot egy e-mail sablonba kell elemeznünk, ahol a képek és a tartalom megfelelően formázott.

Hozzon létre egyéni bloghírcsatornát a Shopify-ban

Találtam egy cikket példakóddal az a egyéni feed a Shopify-ban mert MailChimp és jó néhány szerkesztést végrehajtott a tisztítás érdekében. Itt vannak a lépések az a egyéni RSS feed a Shopifyban a blogodhoz.

  1. Navigáljon a Online áruház és válassza ki azt a témát, amelybe a hírfolyamot el szeretné helyezni.
  2. A Műveletek menüben válassza a lehetőséget Kód szerkesztése.
  3. A Fájlok menüben lépjen a Sablonok elemre, és kattintson a gombra Új sablon hozzáadása.
  4. Az Új sablon hozzáadása ablakban válassza a lehetőséget Hozzon létre egy új sablont mert blog.

Folyékony blogfeed hozzáadása a Shopify for Klaviyo szolgáltatáshoz

  1. Válassza ki a Sablon típusát folyadék.
  2. A Fájlnévnél megadtuk klaviyo.
  3. A kódszerkesztőben helyezze el a következő kódot:

{%- 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. Szükség szerint frissítse az egyéni változókat. Egy megjegyzés ezzel kapcsolatban, hogy a képméretet az e-mailjeink maximális szélességére, 600 képpont szélesre állítottuk. Íme egy táblázat a Shopify képméreteiről:

Shopify képnév Méretek
csúcs 16px x 16px
ikon 32px x 32px
hüvelykujj 50px x 50px
kicsi 100px x 100px
kompakt 160px x 160px
közepes 240px x 240px
nagy 480px x 480px
nagy 600px x 600px
1024 X 1024 1024px x 1024px
2048 X 2048 2048px x 2048px
mester Az elérhető legnagyobb kép

  1. Hírcsatornája mostantól elérhető blogja címén, a megtekintéshez hozzáfűzött lekérdezési karakterlánccal. Ügyfelünk esetében a feed URL-je:

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

  1. A hírcsatorna most használatra kész! Ha szeretné, egy böngészőablakban navigálhat rá, hogy biztosan ne legyen hibák. A következő lépésben gondoskodni fogunk a megfelelő elemzésről:

Add hozzá a blog hírfolyamát a Klaviyóhoz

Az új blog hírfolyamának használatához Klaviyo, hozzá kell adnia adatfolyamként.

  1. navigáljon Adatcsatornák
  2. választ Webes hírcsatorna hozzáadása
  3. Írjon be egy Hírcsatorna neve (szóközök nem megengedettek)
  4. Lépjen be a Feed URL amit most teremtett.
  5. Írja be a kérési módot mint GET
  6. Adja meg a Tartalomtípust mint XML

Klaviyo Shopify XML blog feed hozzáadása

  1. Kattints Adatfolyam frissítése.
  2. Kattints Preview hogy biztosítsa a feed megfelelő feltöltését.

Tekintse meg a Shopify blog hírfolyamát a Klaviyóban

Add hozzá a blog hírfolyamát a Klaviyo e-mail sablonhoz

Most a blogunkat szeretnénk e-mail sablonunkba építeni Klaviyo. Véleményem szerint, és amiért szükségünk volt egy egyéni hírfolyamra, szeretem az osztott tartalmi területet, ahol a kép bal oldalon, a cím és a kivonat alatta található. A Klaviyonak lehetősége van arra is, hogy ezt egyetlen oszlopba összecsukja mobileszközön.

  1. Húzza a Osztott blokk az e-mail sablonjába.
  2. Állítsa a bal oszlopot an-ra Kép a jobb oldali oszlop pedig a szöveg Blokk.

Klaviyo Split Block Shopify blogbejegyzésekhez

  1. A képhez válassza a lehetőséget Dinamikus kép és állítsa be az értéket:

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

  1. Állítsa az alternatív szöveget a következőre:

{{item.title}}

  1. Állítsd be a link címét, hogy ha az e-mail feliratkozó a képre kattint, akkor a cikkedhez kerüljön.

{{item.link}}

  1. Válassza ki a jobb oldali oszlop az oszlop tartalmának beállításához.

Klaviyo blogbejegyzés címe és leírása

  1. Adja hozzá tartalom, mindenképpen adj hozzá hivatkozást a címedhez, és szúrd be a bejegyzés kivonatát.

<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. Válassza ki a Felosztási beállítások Tab.
  2. Állítsa be a 40% / 60% elrendezés hogy több hely legyen a szövegnek.
  3. engedélyezése Stack a mobilon és állítsa be Jobbról balra.

Klaviyo Split Block a Shopify blogbejegyzésekhez Mobilon halmozott cikkek

  1. Válassza ki a Kijelző opciók Tab.

Klaviyo Split Block Shopify blogbejegyzések megjelenítési beállításai

  1. Válassza a Tartalom ismétlése lehetőséget, és adja meg a Klaviyo-ban létrehozott hírfolyamot forrásként Ismételje meg terület:

feeds.Closet52_Blog.rss.channel.item

  1. Állítsa be Tétel alias as tétel.
  2. Kattints Előnézet és tesztelés és most már láthatja a blogbejegyzéseit. Mindenképpen tesztelje asztali és mobil módban is.

Klaviyo Split Block Előnézet és teszt.

És persze ha segítségre van szüksége Shopify optimalizálás és Klaviyo megvalósításokat, ne habozzon megkeresni Highbridge.

Közzététel: Partner vagyok a Highbridge és ehhez használom a kapcsolt linkjeimet Shopify és a Klaviyo ebben a cikkben.