メールにプレビューテキストを挿入する方法

このページで学べること

プレビューテキストとは何か、デフォルトでメールのどこに表示されるか、そしてメール本文に挿入する方法について確認します。

プレビューテキストについて

プレビューテキストは、受信者がメールを受信トレイで受け取った際に最初に目にするものの 1 つです。プレビューテキストは、受信トレイでメールの件名の後に表示され、通常はメール本文内の最初の 1 行目のテキストから取得されます。

プレビューテキストを使ってメールを強化する方法は主に 2 つあります：

1. プレビューテキストを使用して、メールの概要をまとめます。
2. プレビューテキストを使用して、件名を補完します。

プレビューテキストを明示的に挿入しない場合、受信ボックスはメール内の最初のテキスト行から自動的に取得します。つまり、ALT テキストやナビゲーションバーなどがプレビューテキストとして取得される可能性があるため、プレビューテキストに表示したい内容を明確に指定することをおすすめします。プレビューテキストを戦略的に活用する方法の詳細については、Klaviyo ブログをご覧ください。

フローのメールにプレビューテキストを追加

メールプレビュー画面でフローのメールにプレビューテキストを挿入するには、次の手順に従ってください。

1. 編集したいメールが含まれているフローを開きます。
2. フローのメッセージをクリックして、メールの詳細 サイドバーを開きます。
   

3. 件名と送信者の下で、コンテンツ サイドバーから 編集 をクリックします。
4. プレビュー テキストフィールドに、希望するプレビュー テキストを追加します。
   

キャンペーンメールにプレビュー テキストを追加する

メールのプレビュー画面でキャンペーンのプレビューテキストを挿入するには、次の手順を実行します：

1. 編集したいキャンペーンを開きます。
2. [次へ] をクリックします。
3. プレビュー テキストフィールドに、希望するプレビュー テキストを追加します。
   

受信トレイでプレビュー テキストを確認する

プレビューテキストの入力は自動的にスペーサーを追加するため、入力したプレビューテキストのみがお客様の受信トレイに表示されます。

デバイスやメールクライアントによって、表示できるプレビュー テキストの文字数の上限が異なり、画面が小さいほど表示されるプレビュー文字数が少なくなります。この点に注意し、プレビュー テキストは簡潔に保ちましょう。以下は、メールクライアント別の文字数上限です。

メール内にプレビュー テキストを表示する

場合によっては、テンプレートの本文内にプレビューテキストを表示したいことがあります。次のタグを使用すると、メールプレビュー画面で設定した任意のプレビューテキストを参照できます。

{% render_variable preview_text %}

テンプレート内の任意のテキストブロックにタグを貼り付けます。

プレビューテキストを非表示

プレビュー テキストを完全に非表示にし、件名だけがお客様の受信トレイに表示されるようにするには、以下のコードスニペットをメールの一番上に追加してください。このコードにより、メール コンテンツがプレビュー テキストの表示領域より下に押し出されるため、空白として表示されます。

1. 他のすべてのコンテンツの上に、メールの一番上に HTML ブロックを追加してください。
2. 次のコードスニペットを追加します：
   

<div style="display: none; max-height: 0px; overflow: hidden;">͏ &zwnj;
    &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy;
    ͏&zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp;
    &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj;
    &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy;
    ͏&zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp;
    &shy; &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj;
    &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; &zwnj; &nbsp; &shy;
    ͏&zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp;
    &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj;
    &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy;
    ͏&zwnj; &nbsp; &shy;
</div>

1. HTML ブロックを保存します。

メールが受信トレイに届くと、お客様に表示されるのは件名だけです。

その他のリソース