KlaviyoメールテンプレートでShopifyブログフィードを公開する方法

KlaviyoメールテンプレートでShopifyブログフィードを公開する方法

私たちは引き続き強化と最適化を行います Shopify プラス を使用したファッションクライアントのメールマーケティングの取り組み クラビヨ。 KlaviyoはShopifyとしっかりと統合されており、事前に構築されてすぐに使用できる大量のeコマース関連のコミュニケーションを可能にします。

驚いたことに、 Shopifyのブログ投稿 ただし、電子メールに含めることはそれらのXNUMXつではありません。 物事をさらに難しくしています…この電子メールを作成するためのドキュメントは完全ではなく、最新のエディタについてもドキュメント化されていません。 それで、 Highbridge 掘り下げて自分たちでどうやってやるのかを考えなければなりませんでした…そしてそれは簡単ではありませんでした。

これを実現するために必要な開発は次のとおりです。

  1. ブログフィード – Shopifyが提供するAtomフィードはカスタマイズを提供せず、画像も含まれないため、カスタムXMLフィードを作成する必要があります。
  2. Klaviyoデータフィード –作成したXMLフィードは、Klaviyoのデータフィードとして統合する必要があります。
  3. Klaviyoメールテンプレート –次に、フィードを解析して、画像とコンテンツが適切にフォーマットされた電子メールテンプレートにする必要があります。

Shopifyでカスタムブログフィードを作成する

サンプルコードを含む記事を見つけて、 Shopifyのカスタムフィード for Mailchimp それをクリーンアップするためにかなりの数の編集を行いました。 を構築する手順は次のとおりです カスタムRSSフィード あなたのブログのためにShopifyで。

  1. あなたの オンラインストア フィードを配置するテーマを選択します。
  2. [アクション]メニューで、[ コードの編集.
  3. [ファイル]メニューで、[テンプレート]に移動し、[ 新しいテンプレートを追加する.
  4. [新しいテンプレートの追加]ウィンドウで、[ 新しいテンプレートを作成する for ブログ.

ShopifyforKlaviyoに液体ブログフィードを追加する

  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. 必要に応じてカスタム変数を更新します。 これに関する600つの注意点は、画像サイズをメールの最大幅であるXNUMXpx幅に設定したことです。 Shopifyの画像サイズの表は次のとおりです。

Shopifyの画像名 寸法
ピコ 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. 次の項目を選択します。: Webフィードを追加する
  3. 入力します フィード名 (スペースは許可されていません)
  4. 入力する フィードURL 作成したばかりです。
  5. リクエストメソッドを次のように入力します GET
  6. コンテンツタイプを次のように入力します XML

KlaviyoはShopifyXMLブログフィードを追加します

  1. 【送信】ボタンをクリックします。販売者は原則としてXNUMX日以内に回答を返信します。XNUMX日を過ぎても回答がない場合は、Artisanaryまでお問い合わせください。 データフィードの更新.
  2. 【送信】ボタンをクリックします。販売者は原則としてXNUMX日以内に回答を返信します。XNUMX日を過ぎても回答がない場合は、Artisanaryまでお問い合わせください。 プレビュー フィードが正しく入力されていることを確認します。

KlaviyoでShopifyブログフィードをプレビューする

Klaviyoメールテンプレートにブログフィードを追加する

次に、ブログをメールテンプレートに組み込みます。 クラビヨ。 私の意見では、カスタムフィードが必要な理由は、画像が左側にあり、タイトルと抜粋が下にある分割コンテンツ領域が好きです。 Klaviyoには、モバイルデバイスでこれをXNUMXつの列に折りたたむオプションもあります。

  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. コンテンツリピートを選択し、Klaviyoで作成したフィードをソースとして 繰り返します フィールド:

feeds.Closet52_Blog.rss.channel.item

  1. をセットする アイテムエイリアス as 項目.
  2. 【送信】ボタンをクリックします。販売者は原則としてXNUMX日以内に回答を返信します。XNUMX日を過ぎても回答がない場合は、Artisanaryまでお問い合わせください。 プレビューとテスト これでブログの投稿を見ることができます。 デスクトップモードとモバイルモードの両方でテストしてください。

Klaviyoスプリットブロックプレビューとテスト。

そして、もちろん、あなたがで援助が必要な場合 Shopifyサービス 最適化と クラビヨ 実装、に連絡することを躊躇しないでください Highbridge.

開示:私はのパートナーです Highbridge そして私は私のアフィリエイトリンクを使用しています Shopifyサービス 及び クラビヨ 記事上で。