Kako objaviti svoj Shopify blog feed u predlošku e-pošte Klaviyo
Nastavljamo poboljšavati i optimizirati naše ShopifyPlus e-mail marketing napori modnog klijenta koristeći Klaviyo. Klaviyo ima čvrstu integraciju s Shopifyjem koja omogućuje mnoštvo komunikacija povezanih s e-trgovinom koje su unaprijed izgrađene i spremne za rad.
Iznenađujuće, umetanje vašeg Shopify Blog Postovi u e-poruku ipak NIJE jedan od njih! Otežavanje stvari… dokumentacija za izradu ove e-pošte nije temeljita i čak ne dokumentira njihov najnoviji urednik. Tako, DK New Media morali smo malo kopati i sami smisliti kako to učiniti... i nije bilo lako.
Evo razvoja potrebnog da se to dogodi:
- Feed bloga – Atom feed koji pruža Shopify ne pruža nikakvu prilagodbu niti uključuje slike, tako da moramo izraditi prilagođeni XML feed.
- Klaviyo Data Feed – XML feed koji smo izgradili treba biti integriran kao izvor podataka u Klaviyo.
- Predložak e-pošte Klaviyo – Zatim moramo raščlaniti feed u predložak e-pošte gdje su slike i sadržaj pravilno oblikovani.
Izradite prilagođeni blog feed u Shopifyju
Uspio sam pronaći članak s primjerom koda za izradu a prilagođeni feed u Shopifyju za Intuit Mailchimp i napravio dosta izmjena kako bi ga počistio. Evo koraka za izgradnju a prilagođeni RSS feed u Shopifyju za svoj blog.
- Idite do vašeg Online Store i odaberite temu u koju želite postaviti feed.
- U izborniku Radnje odaberite Uredi kôd.
- U izborniku Datoteke idite na Predlošci i kliknite Dodajte novi predložak.
- U prozoru Dodaj novi predložak odaberite Izradite novi predložak za blog.
- Odaberite Vrsta predloška tekućina.
- Za naziv datoteke, unijeli smo klaviyo.
- U uređivač koda postavite sljedeći kod:
{%- 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>
- Po potrebi ažurirajte prilagođene varijable. Jedna napomena o tome je da smo veličinu slike postavili na maksimalnu širinu naših e-poruka, širinu 600px. Evo tablice veličina slika Shopifyja:
Shopify Naziv slike | Dimenzije |
piko | 16px x 16px |
ikona | 32px x 32px |
palac | 50px x 50px |
mali | 100px x 100px |
kompaktni | 160px x 160px |
srednji | 240px x 240px |
veliki | 480px x 480px |
velik | 600px x 600px |
1024 X 1024 | 1024px x 1024px |
2048 X 2048 | 2048px x 2048px |
majstor | Najveća dostupna slika |
- Vaš je feed sada dostupan na adresi vašeg bloga s dodanim nizom upita za pregled. U slučaju našeg klijenta, URL feeda je:
https://yourshopifysite.com/blogs/fashion?view=klaviyo
- Vaš feed je sada spreman za upotrebu! Ako želite, možete se kretati do njega u prozoru preglednika kako biste bili sigurni da nema pogrešaka. Osigurat ćemo da se pravilno analizira u našem sljedećem koraku:
Dodajte svoj blog Feed u Klaviyo
Kako biste iskoristili svoj novi feed za blog Klaviyo, morate ga dodati kao Data Feed.
- Dođite na Feedovi podataka
- odabrati Dodajte web feed
- Unesite Naziv feeda (nema mjesta)
- Unesite URL feeda koje ste upravo stvorili.
- Unesite način zahtjeva kao GET
- Unesite vrstu sadržaja kao XML
- Kliknite Ažurirajte feed podataka.
- Kliknite pregled kako bi se osiguralo da se feed pravilno popunjava.
Dodajte svoj blog feed u svoj Klaviyo predložak e-pošte
Sada želimo svoj blog ugraditi u naš predložak e-pošte Klaviyo. Po mom mišljenju i razlogu zašto nam je trebao prilagođeni feed, sviđa mi se podijeljeno područje sadržaja gdje je slika s lijeve strane, naslov i izvadak ispod. Klaviyo također ima opciju sažimanja ovoga u jedan stupac na mobilnom uređaju.
- Povucite a Split blok u svoj predložak e-pošte.
- Postavite lijevi stupac na an Slika a vaš desni stupac na a Tekst blok.
- Za sliku odaberite Dinamična slika i postavite vrijednost na:
{{ item|lookup:'media:content'|lookup:'@url' }}
- Postavite zamjenski tekst na:
{{item.title}}
- Postavite adresu veze tako da ako pretplatnik e-pošte klikne na sliku, ona će ih dovesti do vašeg članka.
{{item.link}}
- Odaberite desni stupac za postavljanje sadržaja stupca.
- Dodajte svoje sadržaj, svakako dodajte vezu na svoj naslov i umetnite izvadak posta.
<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>
- Odaberite Podijelite postavke Tab.
- Postavite na a 40% / 60% raspored kako bi se osiguralo više prostora za tekst.
- Omogućiti Stack na mobitelu i postaviti S desna na lijevo.
- Odaberite Display Options Tab.
- Odaberite Content Repeat i stavite feed koji ste stvorili u Klaviyo kao izvor u Ponovi za polje:
feeds.Closet52_Blog.rss.channel.item
- Postavi Alias stavke as stavka.
- Kliknite Pregled i testiranje i sada možete vidjeti svoje postove na blogu. Obavezno ga testirajte u radnom i mobilnom načinu rada.
I, naravno, ako vam treba pomoć u Shopify optimizacija i
Klaviyo implementacije, ne ustručavajte se obratiti se DK New Media.Otkrivanje: Ja sam partner u DK New Media i koristim svoje pridružene veze za Shopify i Klaviyo u ovom članku.