Klaviyo 이메일 템플릿에 Shopify 블로그 피드를 게시하는 방법

Klaviyo 이메일 템플릿에 Shopify 블로그 피드를 게시하는 방법

우리는 지속적으로 개선하고 최적화합니다. 쇼피파이 플러스 패션 클라이언트의 이메일 마케팅 노력 클라 비요. Klaviyo는 사전 구축되어 바로 사용할 수 있는 수많은 전자 상거래 관련 커뮤니케이션을 가능하게 하는 Shopify와 긴밀하게 통합되어 있습니다.

놀랍게도, 당신의 Shopify 블로그 게시물 그러나 이메일로 보내는 것은 그 중 하나가 아닙니다! 일을 더 어렵게 만드는 것은… 이 이메일을 작성하기 위한 문서는 철저하지 않으며 최신 편집자도 문서화하지 않습니다. 그래서, Highbridge 땅을 파고 스스로 어떻게 해야 할지 알아내야 했고… 쉽지 않았습니다.

이를 위해 필요한 개발은 다음과 같습니다.

  1. 블로그 피드 – Shopify에서 제공하는 아톰 피드는 사용자 정의를 제공하지 않으며 이미지를 포함하지 않으므로 사용자 정의 XML 피드를 빌드해야 합니다.
  2. Klaviyo 데이터 피드 – 우리가 구축한 XML 피드는 Klaviyo에서 데이터 피드로 통합되어야 합니다.
  3. Klaviyo 이메일 템플릿 – 그런 다음 피드를 이미지와 콘텐츠 형식이 올바르게 지정된 이메일 템플릿으로 구문 분석해야 합니다.

Shopify에서 맞춤형 블로그 피드 구축

예제 코드가 포함된 기사를 찾을 수 있었습니다. Shopify의 사용자 정의 피드 ...에 대한 Mailchimp 그리고 그것을 정리하기 위해 꽤 많은 수정을 했습니다. 다음은 빌드 단계입니다. 사용자 정의 RSS 피드 블로그용 Shopify에서

  1. 귀하의 온라인 스토어 피드를 배치할 테마를 선택합니다.
  2. 작업 메뉴에서 코드 편집.
  3. 파일 메뉴에서 템플릿으로 이동하여 새 템플릿 추가.
  4. 새 템플릿 추가 창에서 다음을 선택합니다. 새 템플릿 만들기 ...에 대한 블로그.

Klaviyo용 Shopify에 유동적인 블로그 피드 추가

  1. 템플릿 유형 선택 액체.
  2. 파일 이름에 대해 다음을 입력했습니다. 클라비 요.
  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. 필요에 따라 맞춤 변수를 업데이트합니다. 이것에 대한 한 가지 참고 사항은 이미지 크기를 이메일의 최대 너비인 600px 너비로 설정했다는 것입니다. 다음은 Shopify의 이미지 크기 표입니다.

Shopify 이미지 이름 Dimensions
피코 16px X 16px
아이콘 32px X 32px
무지 50px X 50px
작은 100px X 100px
팩트 160px X 160px
매질 240px X 240px
넓은 480px X 480px
600px X 600px
1024 X 1024 1024px X 1024px
2048 X 2048 2048px X 2048px
석사 사용 가능한 가장 큰 이미지

  1. 이제 피드를 보기 위해 추가된 쿼리 문자열과 함께 블로그 주소에서 피드를 사용할 수 있습니다. 클라이언트의 경우 피드 URL은 다음과 같습니다.

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

  1. 이제 피드를 사용할 준비가 되었습니다! 원하는 경우 브라우저 창에서 해당 페이지로 이동하여 오류가 없는지 확인할 수 있습니다. 다음 단계에서 제대로 구문 분석되는지 확인할 것입니다.

Klaviyo에 블로그 피드 추가

새 블로그 피드를 활용하려면 클라 비요, 데이터 피드로 추가해야 합니다.

  1. 로 이동 데이터 피드
  2. 웹 피드 추가
  3. 입력 피드 이름 (공백은 허용되지 않습니다)
  4. 입력 피드 URL 방금 만든 것입니다.
  5. 요청 방법을 다음과 같이 입력하십시오. 바로
  6. 콘텐츠 유형을 다음과 같이 입력하십시오. XML

Klaviyo Shopify XML 블로그 피드 추가

  1. . 데이터 피드 업데이트.
  2. . 시사 피드가 올바르게 채워지고 있는지 확인합니다.

Klaviyo에서 Shopify 블로그 피드 미리보기

Klaviyo 이메일 템플릿에 블로그 피드 추가

이제 우리는 블로그를 이메일 템플릿으로 만들고 싶습니다. 클라 비요. 제 생각에는 사용자 정의 피드가 필요한 이유 때문에 이미지가 왼쪽에 있고 제목과 발췌문이 아래에 있는 분할 콘텐츠 영역이 좋습니다. Klaviyo에는 모바일 장치에서 이것을 단일 열로 축소하는 옵션도 있습니다.

  1. 드래그 분할 블록 귀하의 이메일 템플릿에.
  2. 왼쪽 열을 영상 오른쪽 열에 본문 블록.

Shopify 블로그 게시물 기사용 Klaviyo 분할 블록

  1. 이미지의 경우 동적 이미지 값을 다음과 같이 설정합니다.

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

  1. 대체 텍스트를 다음과 같이 설정합니다.

{{item.title}}

  1. 이메일 구독자가 이미지를 클릭하면 귀하의 기사로 이동하도록 링크 주소를 설정하십시오.

{{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. 선택 분할 설정 탭.
  2. 로 설정 40% / 60% 레이아웃 더 많은 텍스트 공간을 제공합니다.
  3. 사용 모바일 스택 설정하다 오른쪽에서 왼쪽으로.

모바일에 쌓인 Shopify 블로그 게시물 기사용 Klaviyo 분할 블록

  1. 선택 옵션을 표시 탭.

Shopify 블로그 게시물 기사 표시 옵션용 Klaviyo 분할 블록

  1. Content Repeat를 선택하고 Klaviyo에서 생성한 피드를 소스로 넣습니다. 반복 들:

feeds.Closet52_Blog.rss.channel.item

  1. 설정 항목 별칭 as .
  2. . 미리보기 및 테스트 이제 블로그 게시물을 볼 수 있습니다. 데스크톱 및 모바일 모드에서 모두 테스트하십시오.

Klaviyo 분할 블록 미리보기 및 테스트.

그리고 물론 도움이 필요한 경우 Shopify 최적화 및 클라 비요 구현하려면 주저하지 말고 Highbridge.

공개 : 나는 파트너입니다 Highbridge 내 제휴사 링크를 사용하고 있습니다. Shopify클라 비요 이 기사에서.