Kako objaviti svoj Shopify blog feed u predlošku e-pošte Klaviyo

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, Highbridge morali smo malo kopati i sami smisliti kako to učiniti... i nije bilo lako.

Evo razvoja potrebnog da se to dogodi:

  1. 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.
  2. Klaviyo Data Feed – XML feed koji smo izgradili treba biti integriran kao izvor podataka u Klaviyo.
  3. 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 MailChimp i napravio dosta izmjena kako bi ga počistio. Evo koraka za izgradnju a prilagođeni RSS feed u Shopifyju za svoj blog.

  1. Idite do vašeg Online Store i odaberite temu u koju želite postaviti feed.
  2. U izborniku Radnje odaberite Uredi kôd.
  3. U izborniku Datoteke idite na Predlošci i kliknite Dodajte novi predložak.
  4. U prozoru Dodaj novi predložak odaberite Izradite novi predložak za blog.

Dodajte tekući blog feed u Shopify za Klaviyo

  1. Odaberite Vrsta predloška tekućina.
  2. Za naziv datoteke, unijeli smo klaviyo.
  3. 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>

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

  1. 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://closet52.com/blogs/fashion?view=klaviyo

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

  1. Dođite na Feedovi podataka
  2. odabrati Dodajte web feed
  3. Unesite Naziv feeda (nema mjesta)
  4. Unesite URL feeda koje ste upravo stvorili.
  5. Unesite način zahtjeva kao GET
  6. Unesite vrstu sadržaja kao XML

Klaviyo Dodaj Shopify XML Blog Feed

  1. Kliknite Ažurirajte feed podataka.
  2. Kliknite pregled kako bi se osiguralo da se feed pravilno popunjava.

Pregledajte Shopify Blog Feed u Klaviyo

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.

  1. Povucite a Split blok u svoj predložak e-pošte.
  2. Postavite lijevi stupac na an Slika a vaš desni stupac na a Tekst blok.

Klaviyo Split Block za Shopify Blog Post Članci

  1. Za sliku odaberite Dinamična slika i postavite vrijednost na:

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

  1. Postavite zamjenski tekst na:

{{item.title}}

  1. Postavite adresu veze tako da ako pretplatnik e-pošte klikne na sliku, ona će ih dovesti do vašeg članka.

{{item.link}}

  1. Odaberite desni stupac za postavljanje sadržaja stupca.

Naslov i opis Klaviyo blog posta

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

  1. Odaberite Podijelite postavke Tab.
  2. Postavite na a 40% / 60% raspored kako bi se osiguralo više prostora za tekst.
  3. Omogućiti Stack na mobitelu i postaviti S desna na lijevo.

Klaviyo Split Block za Shopify Blog Post Članci složeni na mobitelu

  1. Odaberite Display Options Tab.

Klaviyo Split Block za Shopify Blog Post Članci Opcije prikaza

  1. Odaberite Content Repeat i stavite feed koji ste stvorili u Klaviyo kao izvor u Ponovi za polje:

feeds.Closet52_Blog.rss.channel.item

  1. Postavi Alias ​​stavke as stavka.
  2. Kliknite Pregled i testiranje i sada možete vidjeti svoje postove na blogu. Obavezno ga testirajte u radnom i mobilnom načinu rada.

Klaviyo Split Block Pregled i testiranje.

I, naravno, ako vam treba pomoć u Shopify optimizacija i Klaviyo implementacije, ne ustručavajte se obratiti se Highbridge.

Otkrivanje: Ja sam partner u Highbridge i koristim svoje pridružene veze za Shopify i Klaviyo u ovom članku.