フローメールで動的ブロックを構築する方法

read
Last updated at:

学習内容

動的テーブルのブロックを使用して、メトリックによってトリガーされるフローに商品情報やその他のイベント情報を追加する方法を学びましょう。この記事では、カゴ落ちリマインダーで「カートに残された商品」を表示するを例を用いて、動的ブロックを作成する手順を紹介します。

Klaviyo にあらかじめ組み込まれている e コマース統合（例：Shopify、BigCommerce、Magento、WooCommerce）のいずれかを使用している場合、これらのブロックを手動で構築する必要はありません。代わりに、フローライブラリを使用して、テンプレートに最適なデザイン済みのフローメールを検索してください。 

メトリックによってトリガーされるフローでは、そのフローのトリガーとなったイベントに基づいて、メール内容をパーソナライズできます。例えば、顧客がチェックアウトを開始した場合、カゴ落ちメールで商品画像や価格を表示し、カートに戻って購入を完了するよう促すことができます。動的テーブルのブロックは、カート内の各商品に関する情報を順番に表示します。

始める前に

作業を開始する前に、使用可能なイベントデータが存在することを確認してください。[アナリティクス > メトリック] に移動すると、Klaviyo に存在するイベントを見ることができます。

イベントデータやプロファイルデータをメールで活用することに慣れていない場合は、まずはメッセージのパーソナライズに関する参考情報をご覧ください。 

また、Klaviyo におけるデータ型、特にリスト（配列）について理解しておくと役に立ちます。配列とは、同じ構造を持つ複数のデータを保存するための形式です。例えば、顧客のカート内の商品は、「チェックアウト開始」 イベント内で 1 つの配列として保存されます。この商品配列には、顧客が注文した各商品につき 1 つのエントリが含まれ、各エントリにはその商品の詳細（商品名、画像 URL、数量、サイズ、色など）が含まれます。 

どのようなフローに動的テーブルのブロックを使用できますか？ 

動的テーブルのブロックには、顧客が何らかの形でやりとりした （購入した、カートに残したなど）1 つ以上の商品に関する情報が含まれます。これらのテーブルブロックは、顧客の行動によって含まれる商品の数が変動するイベントで特に便利です。動的テーブルのブロックが効果的な例として、以下のようなイベントトリガーのフローが挙げられます。 

  • 注文確定（注文確認フロー）
  • チェックアウト開始（チェックアウト落ちフロー） 
  • 注文発送済み（配送確認フロー） 
  • 注文キャンセル（キャンセル確認フロー） 
  • 1 つ以上の商品のリストを含むその他のイベント

動的テーブルのブロックは、イベントに常に 1 つの商品しか含まれない場合には適していません。例えば、以下のようなイベントをトリガーとする場合、代わりに静的テーブルブロックを使用する必要があります。 

  • カートに追加（チェックアウト落ちフロー）
  • 商品閲覧（閲覧放棄フロー） 

単一商品イベント用の静的テーブルブロックの作成方法についてはこちらをご覧ください。 

1. フローを作成する

フローの作成から始めます。

  1. Klaviyo の [フロー] タブに移動します。
  2. [フローを作成] をクリックします。 
  3. [自分で作成] をクリックします。 
  4. フローに名前を付け、[フローを作成] をクリックします。 
  5. [トリガーを選択] にある  [メトリック] をクリックします。 
  6. トリガーメトリックの送信元となる統合サービス（例：Shopify）を選択します。
  7. フローのトリガーとなるイベントを選択します。この例では、「チェックアウト開始」をイベントとして使用します。これにより、カゴ落ちブロックを構築するのに必要なイベントデータにアクセスできるようになります。
  8. 完了をクリックします。 
  9. フローにメールアクションをドラッグ＆ドロップします。

2. フローメールに動的テーブルを追加する

次に、フローメールに動的テーブルを追加します。

  1. 上記手順 9 でフローに追加したメールブロックをクリックします。 
  2. [テンプレート] の横にある [テンプレートを選択] をクリックします。 
  3. ベースとして使用するテンプレートを選びます。
  4. テーブルブロックをメールにドラッグします。
  5. [スタイル] > [動的] をクリックして、テーブルを動的ブロックに変換します。[行コレクション] と [行エイリアス] の 2 つのフィールドが表示されます。これらはステップ 3 と 4 で入力します。
  6. [コンテンツ] タブに戻り、列のタイプを調整します。
  7. 一般的にカゴ落ちメッセージでは、左側にカゴに残された商品の画像、右側にその商品の詳細が表示されます。左側または右側の行セレクターをクリックし、[テキスト] または [画像] をクリックして、セルの種類を変更します。

3. 行コレクションを特定する

このステップでは、反復処理を行う配列の名前を [行コレクション] フィールドに追加します。配列の名前を見つけるには、以下を行います。

  1. [プレビューとテスト] をクリックします。
  2. イベントのプレビューデータをスクロールして、必要な情報を含む配列を探してください。 
    フローのトリガーとなるアクションを完了した人がまだいない場合、そのフローで利用できるプレビューデータはありません。プレビューデータがない場合、自社サイトに移動してアクション（カートにアイテムを追加してチェックアウトを開始するなど）を実行してみてください。Klaviyo のプレビューオプション内にイベントが表示されます。

    この例では、商品情報が格納されている配列が 2 つあります。 
    • [items]
      各商品名だけのシンプルなリストを含むトップレベルの配列。
    • [line_items]、
      [extra] 配列内にネストされた配列。各商品のタイトル、価格、SKU、画像の URL などの詳細な情報が含まれています。
      イベントデータの 2 つの商品サブセクション

    テーブルブロックの繰り返し表示に必要な詳細情報を含んでいるため、より詳細な配列である [line_items] を使用することをお勧めします。[行コレクション] フィールドに設定する適切な変数を見つけるには、配列の最初のセクション内にある 2 つの変数を選択してコピーしてください。この例では、[variant_price] と [title] のタグをコピーします。以下はこの例の 2 つのタグです。 

    {{ event.extra.line_items.0.variant_price }}

    {{ event.extra.line_items.0.title }}

  3. 波括弧は無視して、その中の変数を確認してください。両方の変数の先頭が同じ [event.extra.line_items.0] で始まっている点に注意してください。 

  4. この変数のうち、末尾のドットと数字の前までの部分を [行コレクション] として使用します。この例では、[行コレクション] フィールドの適切な設定は [event.extra.line_items] です。

フォールバックコンテンツの設定方法（任意）

選択した行コレクションにデータが存在しない場合は、フォールバックコンテンツが表示されます。これは、トリガーイベント内で常に表示されるとは限らないデータをもとにテーブルを作成する場合にのみ必要です。フォールバックコンテンツを追加するには、[フォールバックコンテンツ] オプションをオンにし、表示されるフィールドにコンテンツ（テキストや画像など）を追加します。 

フォールバックコンテンツを追加するオプション

4. 行エイリアスを選択する

行エイリアスには、任意のテキストを使用できます（特殊文字やスペースは使用できません）。このエイリアスは動的テーブルのブロック内で使用され、先ほど選択した配列からどの変数を抽出するかを特定する役割をします。覚えやすいように、シンプルで分かりやすいエイリアスを選ぶことをお勧めします。 

この例では、動的テーブルのブロックがカゴ落ちした商品のリストを順番に繰り返し表示するため、エイリアスには [item] を使用するとよいでしょう。ブロックがブログ記事のリストを繰り返す場合は、エイリアスに [post] を使用することをお勧めします。

エイリアスには好きな名前を使えますが、配列から変数を参照する際は、必ず同じエイリアスを一貫して使用するようにしてください（詳細は後述）。 

[行コレクション] と [行エイリアス] フィールドの入力が完了したら、テーブルの作成を開始できます。 

5. 動的な商品詳細を追加する

データソースの設定が完了したら、タグを使ってメールにテキストを追加できます。このメールはカゴ落ちフローで使うため、カートに残された商品の名前に加えて、価格や購入リンクなどの詳細を表示することが重要です。

ブロックに商品名を入力する手順は以下のとおりです。

  1. テーブルのいずれかの列に移動します。画像を 1 列目に、テキストを 2 列目に表示したい場合は、ブロックの [コンテンツ] セクションの右側にある列セレクターをクリックします。
  2. プレビューモーダルからイベント変数全体を貼り付けます（例：{{ event.extra.line_items.0.title }}）。
  3. 変数内の行コレクション（すなわち、行コレクションフィールドに入力したテキスト）と、その後に続くドットと番号を、ステップ 5 で選択したエイリアス（例：item）に置き換えます。このとき、外側の括弧はそのまま残します。この例では {{ event.extra.line_items.0.title }} が {{ item.title }} になります。
  4. メールをプレビューして、タイトルが表示されていることを確認してください。表示されない場合は、スペル、大文字・小文字の区別、書式設定に間違いがないか再確認してください。また、[スタイル] タブの設定にエラーがないかも確認してください。

同じ手順を繰り返して、その他の商品の詳細も追加します。 

商品名にハイパーリンクを設定する方法

商品名にハイパーリンクを追加するには、以下を行います。 

  1. イベントプロパティから商品の URL 変数を見つけます。
  2. 行コレクションと番号を前述した方法で、同様に行エイリアスに置き換えます（例： {{ event.extra.line_items.url }}が {{ item.url }} になります。） 
  3. 商品名の変数全体をハイライトします（例：{{ item.title }}）。 
  4. リンクアイコンをクリックし、URL フィールドに URL 変数を貼り付けます。
各統合サービスの一般的な商品 URL 変数

BigCommerce
イベント変数：{{ event.extra.items.0.product.url }}
最終タグ：{{ organization.url }}{{ item.product.url }}

Magento 1
イベント変数：{{ event.extra.line_items.0.product.key }}
最終タグ：{{ organization.url }}{{ item.product.key }}

Magento 2
イベント変数：{{ event.Items.0.Product.FullURL }}
最終タグ：{{ item.Product.FullURL }}

Shopify
イベント変数：{{ event.extra.line_items.0.product.handle }}
最終タグ：{{ organization.url }}products/{{ item.product.handle }}

WooCommerce
イベント変数：{{ event.extra.Items.0.URL }}
最終タグ： {{ item.URL }}     

通貨変数に関する注意点

イベントプロパティで商品の価格が通貨記号のない数値として渡されている場合は、「currency_format」タグを使用して通貨形式を適用してください。このタグを適用するには、以下のコード内にある [variable_name] を、価格変数全体に置き換えます（波括弧は除いてください）。 

{% currency_format variable_name %}

最終的な変数は次のようになります。 

{% currency_format item.price %}

6. 画像を追加する

動的な画像を挿入するには、プレビューモーダルで画像のイベント変数を探します。多くの場合、この変数は「image」、「img」、または「src」の下にありますが、お使いの統合サービスによって異なります。この例では「src」の下にあり、{{ event.extra.line_items.0.product.images.0.src }} となっています。ステップ 5 で説明したのと同様に、この変数も調整します（「event.extra.line_items.0」を「item」に置き換えます）。これは、「event.extra.line_items」内にあるイベント変数の配列で、この特定の商品の画像を保持しています。

  1. この変数を取得したら、画像を表示したい列（この場合は左の列）に移動します。
  2. 現在、[セルのコンテンツ] が [テキスト] に設定されている場合は、[画像] をクリックします。
  3. [画像を選択] をクリックします。
  4. [動的画像] タブで、[動的変数または動的 URL] フィールドに画像変数を貼り付けます。
  5. カスタマイズした画像イベント変数 {{ item.product.images.0.src }} を入力します。
  6. [保存] をクリックします。
  7. 画像をクリック可能にするために、[リンクアドレス] フィールドにステップ 5 の商品 URL 変数を追加します。
  8. 画像の最大幅は 250 〜 300 を目安に設定し、必要に応じて調整します。
  9. 変更が完了したら、[完了] をクリックし、メールをプレビューして意図したとおりに表示されていることを確認します。画像が表示されない場合は、変数のスペルがプレビューモーダルに表示されているものと一致しているかを確認してください。

7. メールをプレビューする

上記のステップを完了すると、プレビュー時にメールテンプレートは以下のように表示されます。

動的コンテンツがどのように表示されるか、またリンクが正しく機能するかを確認するには、プレビューとテストをクリックします。エラーがある場合は、変数のスペルや構造、ブロックの [スタイル] タブに問題がないかを確認してください。 

他のメトリックをトリガーとするフロー用にも、同様の方法で動的ブロックを作成できます。

単一商品のイベント用に静的テーブルブロックを作成する方法 

イベントに含まれる商品が常に 1 つだけの場合は、静的テーブルブロックを使用します。このようなイベントでは、[行コレクション] や [行エイリアス] を設定する必要はなく、イベントデータに含まれる変数をそのまま編集せずに使用できます。 

  1. Klaviyo の [フロー] タブに移動します。
  2. [フローを作成] をクリックします。 
  3. [自分で作成] をクリックします。 
  4. フローに名前を付け、[フローを作成] をクリックします。 
  5. [トリガーを選択] にある  [メトリック] をクリックします。 
  6. [商品閲覧] や [カートに追加] のような単一商品のメトリックを選択します。 
  7. 完了をクリックします。 
  8. フローにメールアクションをドラッグ＆ドロップします。
  9. [テンプレート] の横にある [テンプレートを選択] をクリックします。 
  10. ベースとして使用するテンプレートを選択します。
  11. テーブルブロックをメールにドラッグします。
  12. デフォルトでは、[スタイル] の [データ] フィールドは [静的] に設定されています。この設定を変更しないでください。
  13. [プレビューとテスト] をクリックして、メッセージに使用できる変数を確認します。画像の URL 変数をクリックしてコピーします。
    画像 URL 変数を選択します。
  14. [セルセレクター] と [セルコンテンツ] フィールドを使用して、左側のセルを [画像] セルタイプに設定します。
  15. [画像を選択] をクリックします。 
  16. [動的画像] を選択します。 
  17. コピーした画像 URL 変数を動的変数または動的 URL フィールドに貼り付けます。 
  18. [保存] をクリックします。 
  19. 右のセルに [テキスト] セルタイプを設定します。 
  20. 表示したい変数（商品名、商品価格など）をコピーし、テキストセルに貼り付けます。
  21. カートに戻るための CTA ボタンなど、追加のブロックを配置し、メールを好きなスタイルにデザインします。
  22. 完了したら、[終了] をクリックします。

その他のリソース

x
この記事は役に立ちましたか？
228人中101人がこの記事が役に立ったと言っています