メールでテーブル ブロックを使用する方法

このページで学べること

メールでテーブルブロックを使用する方法をご覧ください。これらのブロックでは、画像とテキストを並べて表示できます。テーブルブロックは動的にもでき、データを反復処理して受信者ごとにメールをパーソナライズできます。

テーブル ブロックの理解

テーブルブロックには 2 種類あります：

• 静的
  このタイプのテーブルブロックでは、選択した行数と列数がそのまま表示されます。各受信者には同じテーブルレイアウトが表示されますが、パーソナライズ、イベント、カタログ、またはその他のタグを使用すると、内容が異なる場合があります。
• 動的
  これらのテーブルブロックを使用すると、データのリスト（例：カゴ落ちフローや注文確認フロー内のアイテムのリスト）を反復処理できます。行数はリスト項目の数によって決まります。誰かが 1 個の商品を注文した場合は 1 行になり、5 個の商品を注文した場合は 5 行になります。

動的なテーブルブロックの最も一般的な使用例は、カゴ落ちメッセージ内で商品を強調表示することです。これは動的ブロックを使用して、カゴ落ちした各商品について画像、商品名、価格を含む複数行を表示します。

テーブル ブロックを使用するタイミング

テーブルブロックは、2 つ以上のコンテンツを横に並べる方法の 1 つです。代替手段として、分岐ブロックや列があります。

以下の表で、コンテンツを並べて配置するさまざまなオプションについて詳しく確認してください。

静的テーブル ブロック

ここでの「static」は、表の内容と行数が受信者ごとに変わらず、常に同じであることを意味します。コンテンツが変わるのは、静的テーブル ブロック内にパーソナライゼーション、日付、カタログ タグなどの動的コンテンツを追加した場合のみです。

静的テーブルブロックのユースケース

静的テーブルブロックを使用して、次のことを行います：

• フラッシュセールや商品ローンチなど、特定のアイテムを表示します。
• 常に同じ数の商品を含めてください（例：閲覧放棄メッセージに、直近で閲覧された商品を表示します。
• イベント データに 1 つのアイテムのみが含まれるフロー メッセージを作成します。これには次が含まれます:
  • カゴ落ちフロー（カートに追加トリガー）
  • 閲覧放棄フロー
  • 再入荷フローと値下げフロー
• 静的テキストと画像を並べて配置したい

静的テーブル ブロックを作成する方法

1. メール（キャンペーン メール、テンプレート、またはフロー メール）に移動します。
2. ブロックメニューから、テーブルブロックをキャンバスにドラッグします。
   

3. ブロックの [スタイル] メニューを開きます。テーブルブロックのデフォルト設定であるため、[静的] がすでに選択されていることに注意してください。
   

4. Columns の下で Add column をクリックして、列を追加します。
   

5. Rowsの下で、[行を追加]をクリックして行を追加します。
   

6. ブロックの Content タブに戻ります。
7. Cell selector エリアを使用して、編集したいセルを選択します。
   

8. Cell content メニューを使用して、そのセルをテキストにするか画像にするかを選択します。各セルに対して繰り返してください。
9. Cell content メニューの下にコンテンツ（テキストまたは画像など）を追加します。
10. すべてのセルにコンテンツを追加したら、戻る矢印をクリックしてメインの コンテンツ メニューに戻り、メールの作成を続けます。
    

動的テーブルブロック

動的テーブル ブロックはデータセットを反復処理し、その中のエントリー数に基づいてコンテンツを繰り返します。ブロックは、リストの末尾に到達するまで繰り返されます。たとえば、ユーザーのカート内の商品数を正確に表示できます。

動的ブロックを使用するには、ネストされたリストとしてフォーマットされたデータを参照する必要があります。リストの各エントリは同じ形式に従う必要があります。最も一般的な使用例は、フローのトリガーイベント（例：チェックアウトの開始、注文の確定）に含まれる商品情報ですが、ウェブフィード を使用してブログ記事を一覧表示したり、リスト形式にフォーマットされたプロファイルデータを参照したりすることもできます。

動的テーブルブロックの要素

動的コンテンツ ブロックを作成するには、3 つの要素が必要です：

• 行コレクション
  反復処理の対象となるデータの場所。ソースデータ（例：Started Checkout イベントのメタデータ内のアイテム）を確認する際、これは関連するテンプレートタグのうち、すべてのタグで共通する部分です。
• 行のエイリアス
  テーブルがデータセットを反復処理する際に、行コレクションを参照するための省略表現です。行のエイリアスは通常 item ですが、任意のテキストを使用できます。
• 動的コンテンツ
  各行に表示されるコンテンツ。たとえば、カートに残された各アイテムについて、画像、商品名、価格、バリエーション情報を表示したい場合があります。

動的テーブルブロックのユースケース

データのリストを動的に参照していて、かつリスト内の各エントリが同じ形式でフォーマットされている場合は、動的テーブル ブロックを使用してください。これには以下が含まれます：

• カゴ落ちフロー（チェックアウト開始トリガー）
• 注文確認フロー
• アップセルまたはクロスセルのフロー

動的テーブルブロックの作成方法

このセクションでは、動的テーブルブロックを概要レベルで説明します。このプロセスの詳細な手順については、フローメールで動的ブロックを構築する方法をご覧ください。

1. メールのエディターに移動します。イベントデータ（例：カゴ落ちの詳細）を使用している場合は、該当するイベントによってトリガーされるフロー内のメールに移動します。 
2. ブロックメニューから、テーブルブロックをキャンバスにドラッグします。
   

3. ブロックの [スタイル] メニューを開き、[動的] を選択します。
   

4. 行コレクション を設定します。表示したい各アイテムで共通しているパーソナライゼーションタグの部分を使用してください。
   • 例えば、{{ event.products.0.imageURL }} が 1 つ目のアイテムの画像のタグで、{{ event.products.1.name }} が 2 つ目のアイテムの名前のタグである場合、行コレクションは event.products にする必要があります。
   • 行コレクションは、ほとんどの場合、最初の数字の前にあるタグの部分になります（例：event.extra.line_items完全なタグが{{ event.extra.line_items.0.product.name }}の場合）。
5. 行のエイリアスを item に設定します。
6. ブロックの Content タブに戻ります。
   • テーブルの各セルにコンテンツを追加します。通常、左側のセルは画像で、右側のセルは商品情報を含む動的タグを含むテキストです。
7. テーブル内の各タグにおいて最初の数字より前の内容は、行エイリアス（例：「item」）に置き換えます。例：
   • {{ event.extra.line_items.0.imageURL }} は {{ item.imageURL }} になります
   • {{ event.items.0.product.name }} は {{ item.product.name }} になります
8. [プレビューとテスト] をクリックして、メールをプレビューします。
   • 適切なデータでプレビューしていることを確認してください(例: これがカゴ落ちメッセージの場合は、「チェックアウトを開始」イベントを使用してプレビューします)。そうしないと、テーブルには何も表示されません。

このプロセスにより、開発者やコードに精通したマーケターは、高度にカスタマイズされたコンテンツを作成できます。チームに開発者がいない場合や、このブロックを自分で作成することに不安がある場合は、サポートのためにKlaviyo パートナーにご連絡いただくことをご検討ください。

詳細については、カゴ落ちフローの作成またはイベントデータを使用してメールや SMS のフローをパーソナライズするをご覧ください。

動的テーブル ブロックの仕組み

動的テーブル ブロックは、ほとんどのプログラミング言語の for ループとまったく同じように動作します。

• 行コレクション は、ループ処理するデータの部分を特定します。
• Row alias は、動的コンテンツが表示される場所を識別するためのエイリアスです。
• Row alias を使用するすべてのタグは、表示される行に基づいて、イベント データ内の正しい行を参照します。

メールがレンダリングされると、Klaviyo はデータセット内の各項目をループ処理します。最初は、行エイリアスが [row collection].0. に置き換えられ、データセット内の最初の項目を参照します。次に、行エイリアスが [row collection].1. に置き換えられ、データセット内の 2 番目の項目を示します。このプロセスは項目が残らなくなるまで続き、データセット内の各項目に対して 1 行が作成されます。

その他のリソース