Πώς να δημοσιεύσετε τη ροή ιστολογίου Shopify στο πρότυπο ηλεκτρονικού ταχυδρομείου Klaviyo

Πώς να δημοσιεύσετε τη ροή ιστολογίου Shopify στο πρότυπο ηλεκτρονικού ταχυδρομείου Klaviyo

Συνεχίζουμε να βελτιώνουμε και να βελτιστοποιούμε το δικό μας ShopifyPlus τις προσπάθειες μάρκετινγκ ηλεκτρονικού ταχυδρομείου του πελάτη μόδας χρησιμοποιώντας Klaviyo. Klaviyo has a solid integration with Shopify that enables a ton of e-commerce-related communications that are pre-built and ready to go.

Παραδόξως, εισάγοντας το δικό σας Shopify αναρτήσεις ιστολογίου σε ένα email ΔΕΝ είναι ένα από αυτά, όμως! Κάνοντας τα πράγματα ακόμα πιο δύσκολα… η τεκμηρίωση για τη δημιουργία αυτού του μηνύματος ηλεκτρονικού ταχυδρομείου δεν είναι ενδελεχής και δεν τεκμηριώνει καν τον πιο πρόσφατο επεξεργαστή τους. Ετσι, Highbridge έπρεπε να κάνουμε λίγο σκάψιμο και να καταλάβουμε πώς να το κάνουμε μόνοι μας… και δεν ήταν εύκολο.

Ακολουθεί η ανάπτυξη που απαιτείται για να συμβεί αυτό:

  1. Ροή ιστολογίου – Η ροή του atom που παρέχεται από το Shopify δεν παρέχει καμία προσαρμογή ούτε περιλαμβάνει εικόνες, επομένως πρέπει να δημιουργήσουμε μια προσαρμοσμένη ροή XML.
  2. Ροή δεδομένων Klaviyo – Η ροή XML που δημιουργήσαμε πρέπει να ενσωματωθεί ως ροή δεδομένων στο Klaviyo.
  3. Πρότυπο ηλεκτρονικού ταχυδρομείου Klaviyo – Στη συνέχεια, πρέπει να αναλύσουμε τη ροή σε ένα πρότυπο email όπου οι εικόνες και το περιεχόμενο έχουν διαμορφωθεί σωστά.

Δημιουργήστε μια προσαρμοσμένη ροή ιστολογίου στο Shopify

Μπόρεσα να βρω ένα άρθρο με παράδειγμα κώδικα για να δημιουργήσω ένα custom feed in Shopify for MailChimp and made quite a few edits to clean it up. Here are the steps to build a προσαρμοσμένη ροή RSS στο Shopify για το ιστολόγιό σας.

  1. Πλοηγηθείτε στο δικό σας Ηλεκτρονικό Κατάστημα και επιλέξτε το θέμα στο οποίο θέλετε να τοποθετήσετε τη ροή.
  2. Στο μενού Ενέργειες, επιλέξτε Επεξεργασία κώδικα.
  3. Στο μενού Αρχεία, μεταβείτε στην επιλογή Πρότυπα και κάντε κλικ Προσθέστε ένα νέο πρότυπο.
  4. Στο παράθυρο Προσθήκη νέου προτύπου, επιλέξτε Δημιουργήστε ένα νέο πρότυπο for blog.

Προσθέστε υγρή ροή ιστολογίου στο Shopify for Klaviyo

  1. Επιλέξτε τύπο προτύπου υγρό.
  2. Για το όνομα αρχείου, καταχωρήσαμε klaviyo.
  3. Στο πρόγραμμα επεξεργασίας κώδικα, τοποθετήστε τον ακόλουθο κώδικα:

{%- 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. Ενημερώστε τις προσαρμοσμένες μεταβλητές όπως απαιτείται. Μια σημείωση σχετικά με αυτό είναι ότι έχουμε ορίσει το μέγεθος της εικόνας στο μέγιστο πλάτος των email μας, πλάτος 600 pixel. Ακολουθεί ένας πίνακας με τα μεγέθη εικόνας του Shopify:

Shopify Όνομα εικόνας Διαστάσεις
pico 16px x 16px
εικονίδιο 32px x 32px
αντίχειρας 50px x 50px
small 100px x 100px
συμπαγής 160px x 160px
medium 240px x 240px
large 480px x 480px
μεγάλος 600px x 600px
1024 1024 X 1024px x 1024px
2048 2048 X 2048px x 2048px
κύριος Η μεγαλύτερη διαθέσιμη εικόνα

  1. Η ροή σας είναι πλέον διαθέσιμη στη διεύθυνση του ιστολογίου σας με προσαρτημένη τη συμβολοσειρά ερωτήματος για προβολή της. Στην περίπτωση του πελάτη μας, η διεύθυνση URL ροής είναι:

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

  1. Η ροή σας είναι τώρα έτοιμη για χρήση! Εάν θέλετε, μπορείτε να πλοηγηθείτε σε αυτό σε ένα παράθυρο του προγράμματος περιήγησης για να βεβαιωθείτε ότι δεν υπάρχουν σφάλματα. Θα διασφαλίσουμε ότι αναλύεται σωστά στο επόμενο βήμα μας:

Προσθέστε τη ροή του ιστολογίου σας στο Klaviyo

Για να χρησιμοποιήσετε τη νέα σας ροή ιστολογίου στο Klaviyo, πρέπει να το προσθέσετε ως ροή δεδομένων.

  1. Πλοηγηθείτε στο Ροές δεδομένων
  2. Αγορά Προσθήκη ροής Ιστού
  3. Εισάγετε ένα Όνομα ροής (δεν επιτρέπονται θέσεις)
  4. Εισάγετε το URL ροής που μόλις δημιουργήσατε.
  5. Εισαγάγετε τη μέθοδο αιτήματος ως ΠΑΡΤΕ
  6. Εισαγάγετε τον Τύπο περιεχομένου ως XML

Klaviyo Προσθήκη τροφοδοσίας ιστολογίου Shopify XML

  1. Πατήστε Ενημέρωση ροής δεδομένων.
  2. Πατήστε Προβολή για να βεβαιωθείτε ότι η ροή συμπληρώνεται σωστά.

Προεπισκόπηση της ροής ιστολογίου Shopify στο Klaviyo

Προσθέστε τη ροή του ιστολογίου σας στο πρότυπο ηλεκτρονικού ταχυδρομείου Klaviyo

Τώρα θέλουμε να δημιουργήσουμε το ιστολόγιό μας στο πρότυπο email μας Klaviyo. Κατά τη γνώμη μου, και ο λόγος για τον οποίο χρειαζόμασταν μια προσαρμοσμένη τροφοδοσία, μου αρέσει μια διαχωρισμένη περιοχή περιεχομένου όπου η εικόνα είναι στα αριστερά, ο τίτλος και το απόσπασμα είναι από κάτω. Το Klaviyo έχει επίσης την επιλογή να το συμπτύξει σε μια στήλη σε μια κινητή συσκευή.

  1. Σύρετε ένα Split Block στο πρότυπο email σας.
  2. Ορίστε την αριστερή σας στήλη σε an Εικόνα και η δεξιά σας στήλη στο α Κείμενο ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ.

Klaviyo Split Block για άρθρα αναρτήσεων ιστολογίου Shopify

  1. Για την εικόνα, επιλέξτε Δυναμική εικόνα και ορίστε την τιμή σε:

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

  1. Ορίστε το εναλλακτικό κείμενο σε:

{{item.title}}

  1. Ρυθμίστε τη Διεύθυνση Συνδέσμου έτσι ώστε αν ο συνδρομητής του email κάνει κλικ στην εικόνα, να τη μεταφέρει στο άρθρο σας.

{{item.link}}

  1. Επιλέξτε το δεξιά στήλη για να ορίσετε το περιεχόμενο της στήλης.

Klaviyo Τίτλος και περιγραφή ανάρτησης ιστολογίου

  1. Προσθέστε το περιεχόμενο, φροντίστε να προσθέσετε έναν σύνδεσμο στον τίτλο σας και να εισαγάγετε το απόσπασμά σας.

<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. Επιλέξτε το Διαχωρισμός ρυθμίσεων Tab.
  2. Ορισμός σε α 40% / 60% διάταξη για να παρέχει περισσότερο χώρο για κείμενο.
  3. Ενεργοποίηση Στοίβα στο κινητό και να θέσει Δεξιά προς τα αριστερά.

Klaviyo Split Block για άρθρα αναρτήσεων ιστολογίου Shopify στοιβαγμένα σε κινητά

  1. Επιλέξτε το Επιλογές Εμφάνισης Tab.

Επιλογές εμφάνισης άρθρων ανάρτησης ιστολογίου Klaviyo Split Block για Shopify

  1. Επιλέξτε Content Repeat και βάλτε τη ροή που δημιουργήσατε στο Klaviyo ως πηγή στο Επανάληψη Για πεδίο:

feeds.Closet52_Blog.rss.channel.item

  1. Ρυθμίστε το Ψευδώνυμο στοιχείου as είδος.
  2. Πατήστε Προεπισκόπηση και δοκιμή και τώρα μπορείτε να δείτε τις αναρτήσεις του ιστολογίου σας. Φροντίστε να το δοκιμάσετε και σε λειτουργία επιτραπέζιου και κινητού.

Klaviyo Split Block Προεπισκόπηση και δοκιμή.

Και, φυσικά, εάν χρειάζεστε βοήθεια Shopify βελτιστοποίηση και Klaviyo υλοποιήσεις, μη διστάσετε να απευθυνθείτε Highbridge.

Αποκάλυψη: Είμαι συνεργάτης του Highbridge και χρησιμοποιώ τους συνδέσμους συνεργατών μου για Shopify και Klaviyo σε αυτό το άρθρο.