Jak opublikować kanał bloga Shopify w szablonie wiadomości e-mail Klaviyo?

Jak opublikować kanał bloga Shopify w szablonie wiadomości e-mail Klaviyo?

Nieustannie ulepszamy i optymalizujemy nasze ShopifyPlus e-mailowe działania klienta mody przy użyciu Klaviyo. Klaviyo ma solidną integrację z Shopify, która umożliwia mnóstwo komunikacji związanej z e-commerce, która jest wstępnie zbudowana i gotowa do działania.

Co zaskakujące, wstawiając swój Posty na blogu Shopify do e-maila NIE jest jednym z nich! Jeszcze trudniejsze sprawy… dokumentacja do tworzenia tego e-maila nie jest dokładna i nie opisuje nawet najnowszego edytora. Więc, Highbridge musieliśmy trochę kopać i wymyślić, jak to zrobić sami… i nie było to łatwe.

Oto rozwój niezbędny, aby tak się stało:

  1. Kanał blogu – Kanał atomowy dostarczony przez Shopify nie zapewnia żadnych dostosowań ani nie zawiera obrazów, więc musimy zbudować niestandardowy kanał XML.
  2. Kanał danych Klaviyo – Zbudowany przez nas kanał XML musi być zintegrowany jako źródło danych w Klaviyo.
  3. Szablon e-mail Klaviyo – Następnie musimy przeanalizować feed do szablonu wiadomości e-mail, w którym obrazy i treść są odpowiednio sformatowane.

Zbuduj niestandardowy kanał bloga w Shopify

Udało mi się znaleźć artykuł z przykładowym kodem do zbudowania niestandardowy kanał w Shopify dla MailChimp i dokonał kilku zmian, aby to wyczyścić. Oto kroki, aby zbudować niestandardowy kanał RSS w Shopify na swoim blogu.

  1. Przejdź do swojego Sklep internetowy i wybierz motyw, w którym chcesz umieścić kanał.
  2. W menu Czynności wybierz Edytuj kod.
  3. W menu Pliki przejdź do Szablony i kliknij Dodaj nowy szablon.
  4. W oknie Dodaj nowy szablon wybierz Utwórz nowy szablon dla blog.

Dodaj płynny kanał bloga do Shopify dla Klaviyo

  1. Wybierz typ szablonu z ciecz.
  2. Jako nazwę pliku wprowadziliśmy klawijo.
  3. W edytorze kodu umieść następujący 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. W razie potrzeby zaktualizuj zmienne niestandardowe. Jedna uwaga na ten temat jest taka, że ​​ustawiliśmy rozmiar obrazu na maksymalną szerokość naszych e-maili, szerokość 600 pikseli. Oto tabela rozmiarów obrazów Shopify:

Shopify Nazwa obrazu wymiary
pico 16px x 16px
ikona 32px x 32px
kciuk 50px x 50px
mały 100px x 100px
kompaktowy 160px x 160px
średni 240px x 240px
duży 480px x 480px
wielki 600px x 600px
1024 X 1024 1024px x 1024px
2048 X 2048 2048px x 2048px
mistrz Największy dostępny obraz

  1. Twój kanał jest teraz dostępny pod adresem Twojego bloga z dołączonym ciągiem zapytania, aby go wyświetlić. W przypadku naszego klienta adres URL kanału to:

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

  1. Twój kanał jest teraz gotowy do użycia! Jeśli chcesz, możesz przejść do niego w oknie przeglądarki, aby upewnić się, że nie ma błędów. Zamierzamy zapewnić prawidłowe przetwarzanie w następnym kroku:

Dodaj swój kanał bloga do Klaviyo

Aby wykorzystać nowy kanał bloga w Klaviyo, musisz dodać go jako źródło danych.

  1. Nawigować do Źródła danych
  2. Wybierz Dodaj kanał internetowy
  3. Wpisz Nazwa kanału (brak spacji)
  4. Wpisz Adres URL kanału które właśnie stworzyłeś.
  5. Wprowadź metodę żądania jako GET
  6. Wpisz typ treści jako XML

Klaviyo Dodaj kanał blogu Shopify XML

  1. Kliknij Zaktualizuj kanał danych.
  2. Kliknij Podgląd aby upewnić się, że kanał jest prawidłowo wypełniany.

Podgląd kanału bloga Shopify w Klaviyo

Dodaj swój kanał bloga do szablonu wiadomości e-mail Klaviyo

Teraz chcemy wbudować naszego bloga w nasz szablon wiadomości e-mail w Klaviyo. Moim zdaniem i powodem, dla którego potrzebowaliśmy niestandardowego kanału, podoba mi się podzielony obszar treści, w którym obraz znajduje się po lewej stronie, a tytuł i fragment poniżej. Klaviyo ma również możliwość zwinięcia tego w jedną kolumnę na urządzeniu mobilnym.

  1. Przeciągnij Podziel blok do szablonu wiadomości e-mail.
  2. Ustaw lewą kolumnę na Obraz a prawa kolumna do Tekst blok.

Klaviyo Split Block dla artykułów na blogu Shopify

  1. Dla obrazu wybierz Obraz dynamiczny i ustaw wartość na:

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

  1. Ustaw tekst alternatywny na:

{{item.title}}

  1. Ustaw adres linku, aby jeśli subskrybent e-maila kliknął obraz, przeniesie go do Twojego artykułu.

{{item.link}}

  1. Wybierz prawa kolumna aby ustawić zawartość kolumny.

Tytuł i opis posta na blogu Klaviyo

  1. Dodaj swój zawartość, pamiętaj, aby dodać link do tytułu i wstawić fragment 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. Wybierz Ustawienia podziału patka.
  2. Ustaw na Układ 40% / 60% aby zapewnić więcej miejsca na tekst.
  3. umożliwiać Stosuj na urządzeniu mobilnym i nastaw Od prawej do lewej.

Klaviyo Split Block dla artykułów na blogu Shopify ułożonych na urządzeniu mobilnym

  1. Wybierz Opcje wyświetlania patka.

Klaviyo Split Block dla opcji wyświetlania artykułów na blogu Shopify

  1. Wybierz Powtórz treść i umieść kanał, który utworzyłeś w Klaviyo jako źródło w Powtórz dla pole:

feeds.Closet52_Blog.rss.channel.item

  1. Ustaw Alias ​​przedmiotu as pozycja.
  2. Kliknij Podgląd i test i możesz teraz zobaczyć swoje posty na blogu. Pamiętaj, aby przetestować go zarówno w trybie stacjonarnym, jak i mobilnym.

Klaviyo Split Block Podgląd i test.

I oczywiście, jeśli potrzebujesz pomocy w Shopify optymalizacja i Klaviyo wdrożeń, nie wahaj się z nami skontaktować Highbridge.

Ujawnienie: jestem partnerem w Highbridge i używam moich linków afiliacyjnych do Shopify i Klaviyo w tym artykule.